Share
Acest principiu prevede că tot conținutul trebuie să fie într-un format (sau disponibil la cerere într-un format), care poate fi ușor perceput de către utilizator. A spus într-un alt mod, site-urile dvs. ar trebui proiectate astfel încât oricine să poată "citi" conținutul, indiferent de handicapul pe care îl pot avea. Mulți utilizatori cu dizabilități vor utiliza tehnologii de asistență; de exemplu cei cu deficiențe de vedere pot folosi un cititor de ecran, care citește ce apare pe ecran sau un convertor de tip text în braille. Scopul este de a facilita aceste tehnologii de asistență.
Rețineți că liniile directoare sunt aici nu exhaustiv, deci trebuie să vă referiți întotdeauna la Regulile de accesibilitate a conținutului web.
Acesta este probabil cel mai frecvent sfat pentru îmbunătățirea accesibilității. Dacă site-ul dvs. conține orice imagini, atunci acestea sunt ignorate de cititorii de ecran dacă nu utilizați Alt etichetă.
Rețineți că descrierea altului ar putea să nu fie neapărat o descriere a imaginii, ci mai degrabă ceea ce încearcă imaginea transmite. Eticheta alt spune în cuvinte ceea ce încerci să spui cu imaginea.
Deși acest sfat este cel mai potrivit pentru editori, îl ridic aici, deoarece dezvoltatorii temelor vor furniza adesea un logo în loc de text pentru a transmite numele site-ului sau al companiei. În acest caz, este probabil cel mai bine să utilizați numele site-ului (get_bloginfo ( 'nume')) ca descriere alternativă:
echo "„;
". get_bloginfo ("nume"). '
Ar trebui să fie alte etichete nu să fie folosit pentru imagini pur decorative, în caz contrar, obligați utilizatorul să treacă prin informații excesive și inutile.
Dacă pluginul dvs. creează un formular, este posibil să aveți nevoie de un fel de confirmare a faptului că acesta este accesat mai degrabă de o persoană decât de un computer. Dacă decideți să oferiți utilizatorului o imagine sau un clip audio pe care trebuie să îl interpreteze, ar trebui să explicați acest lucru în text și să furnizați o formă alternativă de CAPTCHA pentru a se adapta diferitelor dizabilități.
Această orientare se va aplica în mare parte dezvoltatorilor de pluginuri, dar se poate aplica și temelor. Dacă culoarea, forma sau poziția sunt folosite pentru a transmite o semnificație care nu este discernamântă din text, acest sens este pierdut pentru utilizatorii care sunt color orbi sau orbi.
De exemplu, un exemplu tipic ar putea fi butoanele formularului de contact care se bazează exclusiv pe o pictogramă din fontul popular de pictograme Font Awesome:
Scopul acestor butoane este ușor de înțeles pentru un utilizator cu deficiențe de vedere, dar pentru cei care se bazează pe cititoarele de ecran nu există niciun indiciu cu privire la ceea ce fac butoanele. Dacă, din motive de proiectare, doriți să evitați utilizarea textului, trebuie să specificați eticheta folosind Aria-label atribut.
Acesta este doar un exemplu al protocolului ARIA, pe care îl vom detalia mai detaliat în următorul articol.
Aceasta este o cerință aproape evidentă. Chiar și pentru o persoană cu deficiențe de vedere, un site web cu un contrast scăzut între text și fundal este dificil de citit și poate provoca tulpina ochilor. Pentru cei cu deficiențe de vedere, este necesar un contrast și mai mare, motiv pentru care WCAG prevede că culoarea de fundal și textul ar trebui să aibă un raport de contrast de 4,5: 1.
Nu este evident imediat ce arată acest raport sau înseamnă, dar există o varietate de instrumente care vă ajută să verificați raportul:
Textul mai mare are o cerință mai mică de 3: 1, iar logo-urile, textul care este decorticat pur sau nu este vizibil și butoanele text / dezactivate nu au o cerință de contrast.
Deși majoritatea temelor oferă utilizatorilor posibilitatea de a ajusta culorile folosite pe site, este o idee bună să se asigure că cel puțin culorile implicite (sau paletele disponibile) îndeplinesc cerința minimă de contrast. Mai târziu, în această serie vom analiza construirea unei caracteristici în tema dvs. care avertizează utilizatorul dacă selectează culori cu contrast insuficient.
Asociația Britanică de Dyslexie recomandă evitarea fundalurilor albe pentru text și utilizarea unei culori alb-murdare, crem sau a unei culori pastelate moi. Motivul din spatele acestui lucru este că strălucirea unei pagini albe poate "să-l uimească" pe cititor.
Pentru cei care suferă de sindromul sensibilității scotopice (sau sindromul Irlen), un contrast prea ridicat între fundal și text poate exacerba simptome precum:
Aceste simptome fac ca citirea să fie dificilă și incomodă și poate provoca oboseală, tulburări ale ochilor, somnolență și dureri de cap.
Având în vedere secțiunea anterioară, cel mai bun sfat este de a asigura un contrast bun, dar nu prea mult contrast. Deoarece preferințele care variază între indivizi, ceea ce constituie "prea mult" va fi la discreția personală.
O structură structurată, cu utilizarea adecvată a rubricilor, facilitează înțelegerea de către utilizatori a informațiilor care le sunt prezentate. Utilizatorii cititorului de ecran se bazează într-o oarecare măsură pe o structură "sensibilă" pentru a le ajuta să își găsească drumul în jurul unei pagini.
O modalitate rapidă de a testa acest lucru este să vizualizați tema cu CSS și JavaScript dezactivat. A mai bine mod este de a utiliza Lynx, care este un browser bazat pe text. Dacă structura site-ului dvs. determină ca conținutul să apară într-o manieră dezorganizată, va fi dificil pentru utilizatorii care folosesc Lynx sau alte tehnologii de asistență să vă citească site-ul. Întrucât utilizatorii care se bazează pe astfel de tehnologii nu au avantajele pe care CSS și JavaScript le aduc orientării spre pagină și fluxul de conținut, este important ca secvența corectă de citire să fie evidentă fără ele.
Acest lucru este destul de simplu de realizat: asigurați-vă că marcajul HTML reflectă ordinea vizuală dorită. Acest lucru este destul de natural și dacă descoperiți că site-ul dvs. nu citește bine fără CSS, atunci probabil că ați deviat-o intenționat. Ca regulă generală, site-ul dvs. web ar trebui să urmeze modelul:
Aceasta este destul de ușor să ai dreptate. Regulile sunt simple:
Accentsconagua
O întrebare care este pusă adesea este: Titlul site-ului meu ar trebui să fie în interiorul unui etichetă? Recomandările W3C indică faptul că, deși există unele cazuri în care acest lucru ar fi un lucru valabil de făcut, în contextul temelor WordPress, este probabil cel mai bine să nu se folosească tag-uri pentru titlul site-ului. Există câteva motive:
</code> etichetă. În timp ce acest lucru este adesea trecute cu vederea și un pic urât pentru utilizatorii vizați, este primul lucru citit de cititorii de ecran. Prin urmare, înfășurați titlul site - ului în <code><h1></code> îi conferă o importanță redundantă utilizatorilor de cititoare de ecran, făcând totodată ca titlul să devină mai evident pentru utilizatorii cu deficiențe de vedere, poate fi realizat fără utilizarea etichetei antet.</li> <li>Etichetele antetului sunt utilizate pentru a organiza informații. Titlul site-ului dvs. nu este deosebit de util pentru un astfel de scop.</li> </ol><p>Indiferent de ce decideți, anteturile ulterioare de pe pagina dvs. ar trebui să stea sub ea. Deci, articole din "Buclă" sau titlurile paginilor ar trebui să aibă <code><h2></code> dacă ați folosit <code><h1></code> etichetă pentru titlul site-ului dvs. și <code><h1></code> etichetele altfel.</p><p>După postarea conținutului, majoritatea temelor vor afișa comentariile postării. Este firesc ca "Comentariile" să fie ca titlu, deoarece este o pauză logică din conținut, dar ca fiind legată de conținutul postului, nivelul de titlu ar trebui să reflecte acest lucru. Cel mai logic lucru este să aveți antetul "Comentarii" la un nivel sub titlul postului.</p><p>Iată un fragment de la a <code>single.php</code>:</p><pre><div role="main"> <div <?php post_class(); ?>> <h1> <?php the_title(); ?> </h1> <div> <?php the_content(); ?> </div><!--.entry-content--> <?php comments_template(); ?> </div> </div></pre><p>În exemplul meu am folosit un <code><h1></code> eticheta pentru titlul postului, astfel încât șablonul de comentarii (<code>comments.php</code>) ar putea arata apoi:</p><pre><div> <h2> <?php printf( _n( 'One Comment on %2$s', '%1$s Comments on %2$s', get_comments_number(), 'mytheme' ), number_format_i18n( get_comments_number() ), get_the_title() ); ?> </h2> // ... </div></pre><h2>Asigurați-vă că site-ul dvs. răspunde bine la mărirea textului (1.4)</h2><p>Unii utilizatori cu dizabilități vizuale ușoare se pot baza pe lărgirea dimensiunilor de fonturi, mai degrabă decât pe tehnologii de asistență, cum ar fi lămpile de ecran. În acest sens, orientările WCAG specifică faptul că site-ul dvs. nu trebuie să "se rupă" atunci când textul este mărit cu până la 200%. "Break" aici înseamnă că textul dispare, se ciocnește, se revarsă din containerele sale sau, mai general, aspectul site-ului este perturbat, astfel încât este dificil sau confuz să citești.</p><h3>Utilizați dimensiuni relative de font</h3><p>Deoarece browserele moderne au devenit mai bune la redimensionarea textului, utilizarea dimensiunilor relative ale caracterelor nu este la fel de importantă (deși IE9 nu redimensionează dimensiunile fontului definite în pixeli). Indiferent, este recomandat să folosiți dimensiuni relative ale fontului (procente, ems sau rems). Unitatea rem se adresează anumitor probleme cu unitatea em - și, deși a fost introdusă doar cu CSS3, o puteți utiliza într-un mod compatibil cu versiunile viitoare. Detalii despre modul de implementare a fonturilor relative sunt puțin în afara scopului, dar puteți afla mai multe aici:</p><ul> <li>Luând "Erm ..." din Ems</li> <li>Dimensiunea fontului cu REM</li> </ul><h3>Utilizați machetele fluide</h3><p>Cu toate acestea, redimensionarea textului poate duce la probleme de aspect. Este posibil ca textul să fie împins de pe ecran, forțând utilizatorul să deruleze sau textul să sângereze din containerul său, eventual în alt text, făcând părți ale paginii web ilizibile. Aici unde a <em>sensibil</em> (sau lichid) poate ajuta. Site-urile "responsive" sunt concepute să se adapteze la orice dispozitiv pe care sunt vizionate; ca atare, ele folosesc rar pixeli fixi pentru înălțime / lățime sau dimensiune font. În consecință, astfel de site-uri se comportă de obicei bine atunci când dimensiunile fontului sunt schimbate: aspectul lor nu se rupe.</p><p>Orientările WCAG recomandă nu numai că textul ar trebui să poată fi mărit cu până la 200%, dar și faptul că site-ul web poate găzdui dimensiunea textului mărită. Design-ul web responsiv poate ajuta acest lucru deoarece:</p><ul> <li>un ecran mărit se ajustează la dimensiunea portului "mai mic"</li> <li>elementele sunt mutate pentru a elimina derularea orizontală</li> <li>dimensiunile nefixate împiedică suprapunerea sau tăierea textului</li> <li>imaginile sunt redimensionate pentru a se potrivi spațiului disponibil și nu se suprapun cu textul</li> </ul><p>Cu toate acestea, este important să rețineți că designul și accesibilitatea receptive nu sunt aceleași: deși se pot completa reciproc, în cele din urmă au scopuri diferite. Un site receptiv nu este neapărat accesibil și invers.</p><h2>Utilizați marcajul corect (1.3)</h2><h3>Utilizați doar tabelele pentru a reprezenta datele</h3><p>Utilizarea tabelelor ca ajutoare într-un aspect al paginii este (sperăm) un lucru din trecut. Există, de asemenea, ramificații legate de accesibilitate pentru utilizarea greșită a tabelelor. Tabelele sunt destinate să reprezinte date sau informații, iar astfel de rânduri și coloane au un înțeles inerent, iar cititorii de ecran își asumă acest lucru atunci când citesc date. </p><p>Un cititor de ecran, de exemplu, va citi numărul rândului și al coloanei înainte de a citi conținutul celulei. Întrucât poziția celulară din tabele utilizate în scopuri pur prezentare este irelevantă, această informație poate fi confuză sau, cel puțin, iritantă: utilizatorul final este spus că există o structură tabulară, când într-adevăr nu există.</p><h3>Utilizarea corectă a marcajului de masă</h3><p>Majoritatea dezvoltatorilor temelor nu vor trebui să producă tabele (și calendarul de postări WordPress este deja accesibil). Cu toate acestea, pluginurile pot afișa tabele prin coduri scurte sau widget-uri. Există numeroase lucruri pe care trebuie să le cunoașteți la elaborarea marcajului de masă:</p><ul> <li>Atunci când este posibil, păstrați tabelele simple. Deși rândurile / coloanele spanning au fost marcate standard timp de mulți ani, ele nu sunt universal acceptate de cititoare de ecran.</li> <li> <p>Dacă este cazul, furnizați o <code><caption></code> element în partea de sus a unei mese, descriind ceea ce arată tabelul:</p> <pre><table> <caption>... </caption>... </table></pre> </li> <li>Utilizare <code><th></code> pentru masă <em>antete</em> și <code><td></code> pentru <em>datele din tabel</em>. <code><th></code> celulele nu ar trebui să fie niciodată goale.</li> <li>Oferiți un domeniu de aplicare <code><th></code> celule, indicând dacă este un antet rând sau coloană: <code><th scope="col"></code> sau <code><th scope="row"></code>. Deși domeniul de aplicare este deseori determinat de cititorul de ecran, nu durează să fie explicit.</li> <li>Poți să folosești <code><thead></code>, <code><tbody></code> și <code><tfoot></code>, dar nu oferă niciun avantaj în ceea ce privește accesibilitatea.</li> <li> <p>Folosește <code>titlu</code> atributul titlurilor pentru a explica o abreviere folosită în celulă:</p> <pre><table> <caption> februarie 2014 </caption> <thead> <tr> <th title="luni" scope="col">M</th> <th title="marţi" scope="col">T</th> <th title="miercuri" scope="col">W</th> <th title="joi" scope="col">T</th> <th title="vineri" scope="col">F</th> <th title="sâmbătă" scope="col">S</th> <th title="duminică" scope="col">S</th> </tr> </thead>... </table></pre> </li> </ul><h3>ARIA & Formulare</h3><p><em>Aplicații Rich Internet accesibile</em> (ARIA) sunt utile în identificarea scopului unei anumite părți a paginii, a oricăror proprietăți (de exemplu, etichetarea unei intrări de formă cerută ca atare) și a stării (de exemplu, etichetarea unui buton ca fiind dezactivat). Utilizarea acestora poate ajuta tehnologiile de asistență să înțeleagă mai bine site-ul dvs. și să vă prezinte mai clar pagina dvs. către utilizatorul final. Vom analiza ARIA în următorul articol din această serie. Mai târziu, în serie, vom analiza, de asemenea, marja corectă a formularului și feedbackul accesibil.</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Cod</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/accessibility-part-3-aria.html">Accesibilitate, partea 3 ARIA</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/accessibility-part-3-aria_2.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/accessibility-part-1-introduction.html">Accesibilitate, Partea 1 Introducere</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/accessibility-part-1-introduction.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Căutare...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>