Share
În articolul precedent din această serie am analizat primul principiu al accesibilității: asigurarea conținutului trebuie să fie disponibil într-un format ușor perceput de utilizator. Dacă un utilizator utilizează tehnologii de asistență, o modalitate de a face acest lucru posibil este de a facilita ca aceste tehnologii să analizeze și să înțeleagă site-ul și conținutul acestuia. În acest articol ne vom concentra pe o anumită modalitate de a face acest lucru: ARIA.
WAI-ARIA (Inițiativa accesibilă pentru Internet), sau ARIA, este un protocol W3C care îmbunătățește interacțiunea site-ului dvs. cu tehnologii de asistență. Aceasta face acest lucru în mai multe moduri:
Legate de browsere nu prezintă o problemă aici: ARIA este susținută de cele mai moderne browsere și cititoare de ecran, iar restul nu au probleme de compatibilitate.
În această serie ne vom concentra pe primul dintre punctele de mai sus, declarând un element rol ca parte a structurii paginii.
Dacă structura unei pagini poate fi determinată programatic și este identificată fiecare "regiune" a paginii web (de ex. Navigația site-ului, conținutul principal, bara laterală etc.), atunci tehnologiile de asistență pot face mai bine să prezinte această structură utilizatorul. De exemplu, legăturile "săriți la conținut" (pe care o vom acoperi în următorul articol) ar putea deveni caduce dacă un cititor de ecran știut unde a fost conținutul principal. Cu toate acestea, codul HTML nu oferă nicio modalitate de a identifica scopul unei regiuni pe pagină. Aici intră rolurile ARIA.
Un rol ARIA este pur și simplu o valoare de atribut care identifică scop a elementului. Cel mai simplu exemplu ar fi un formular de căutare:
Rolul "căutare" identifică acest lucru ca fiind o formă de căutare a conținutului site-ului, și un cititor de ecran care este capabil să recunoască faptul că știe unde să ia utilizatorul dacă dorește să caute conținut. Unii cititori de ecran, de exemplu, oferă o cheie de acces rapid pentru a trece la formularul de căutare. De asemenea, conștientizarea structurii paginii permite tehnologiilor de asistență să genereze un "arbore" semnificativ al paginii. Rețeaua de redare JAWS, de exemplu, utilizează tasta semicolon pentru a sări peste aceste roluri, permițând utilizatorului să sară rapid între regiunile site-ului (antetul, navigarea, conținutul principal etc.).
Acest tip de atribut este numit Role de referință pentru documente, iar printre valorile disponibile sunt:
Conținutul legat de site-ul web, de exemplu numele site-ului și / sau logo-ul companiei. În majoritatea temelor, aceste informații se află în header.php, și etichetează un element care împachetează titlul site-ului, descrierea și logo-ul cu acest rol:
„>
Acest rol identifică partea din pagină care conține legăturile de navigare pentru document sau site web. O temă poate avea mai multe locații de navigare și fiecare poate fi înfășurată într-un element cu rol de navigare:
Conform specificațiilor HTML5, rol = „navigație“ se presupune că este implicită în utilizarea , și astfel nu este necesar. Cu toate acestea, nu există nici un rău în a fi explicit.
Conținutul principal al paginii. Acest trebuie sa apar doar o singură dată pe o pagină. Fiecare temă va varia, însă fișierele șablon relevante vor include de obicei:
Bucla dvs. principală, de exemplu, poate arăta ceva asemănător:
// Conținutul bucla
iar șabloanele dvs. de pagină ar putea arăta mai degrabă:
>
Aceasta identifică formularul de căutare de pe site-ul dvs. și poate fi utilizat de mai multe ori. Cele mai multe teme nu "hardcode" un formular de căutare în tema lor, ci în loc să se bazeze pe regiunile widgetised în cazul în care utilizatorul poate adăuga widget de căutare. În acest caz (și presupunând că executați WP 3.6 sau o versiune superioară), nu trebuie să faceți nimic: Formularul de căutare implicit al WordPress adaugă deja rolul de căutare în mod corespunzător. În plus, se ocupă de etichetele de formular și se prezintă butonul într-o manieră accesibilă.
Dacă faceți un hardcod într-un formular de căutare în tema dvs., asigurați-vă că îl utilizați get_search_form () (A se vedea UZIN). În cele din urmă, dacă aveți nevoie de tema dvs. pentru a modifica formularul de căutare prestabilit, puteți crea un fișier șablon numit searchform.php-dar asigurați-vă că adăugați rolul de căutare. Șablonul de formular implicit de căutare este:
Aceasta identifică o parte a conținutului autonom care are sens în mod izolat. Un exemplu bun în acest sens ar fi postările pe blog care apar pe pagina "postări". La fel, fiecare comentariu ar putea fi considerat un "articol". Poate fi imbricat: de exemplu, un comentariu (articolul) poate sta în interiorul postului de blog (articolul).
role = "article"> // Titlul postului / extras ...
Aceasta identifică o regiune care a fost descrisă drept "conținut compatibil pentru conținutul principal". Într-un context WordPress, acest lucru poate fi considerat ca orice bare laterale. Ta sidebar.php șablon, așadar, poate arăta ceva asemănător:
Acest lucru este folosit de obicei pentru a identifica subsolul. Oficial este descris ca:
O regiune perceptibilă mare care conține informații despre documentul părinte.
De exemplu, ar putea include note de subsol, drepturi de autor, linkuri către declarațiile de confidențialitate etc. Cu toate acestea, este, în general, utilizat pentru a eticheta subsolul paginii, indiferent de conținutul acesteia. Firefox, Safari și Chrome atribuie automat rolul contentinfo Etichete:
...
Deși este în creștere, suportul pentru HTML5 de către cititoarele de ecran variază. Pe de altă parte, suportul pentru reperele ARIA este de obicei mult mai bun. Deci, deși din ce în ce mai multe browsere sunt în mod automat cartografiere tag-uri semantice HTML5 la rolul lor adecvat, este încă o idee bună să se precizeze explicit rolul. Cu toate acestea, trebuie avut grijă să nu se modifice rolul nativ al unui element semantic. De exemplu, ar trebui să evitați să faceți ceva de genul:
Faceți clic pe Me!
Mai jos este o listă a elementelor HTML5, împreună cu rolurile implicite ARIA.
| Elementul HTML5 | Implicat rolul reperului ARIA | Alte note |
|---|---|---|
| rol = "banner" | Ar trebui să existe doar un singur exemplu de banner |
| rol = „navigație“ | |
| rol = „principal“ | Ar trebui să existe doar o singură instanță principală |
| rol = „articol“ | |
| rol = „complementar“ | |
| rol = "contentinfo" | Ar trebui să existe doar o singură instanță de contentinfo |
| rol = „buton“ |
Când utilizați HTML5, ar trebui să utilizați un script precum HTML5 Shiv v3.6, așa cum este folosit în temele Twenty *, pentru a oferi suport browserelor vechi.
Declararea rolurilor ARIA este o modalitate incredibil de ușoară de a ajuta utilizatorii de tehnologii de asistență pentru a interpreta aspectul site-ului dvs. și pentru a găsi conținutul pe care îl urmăresc. În următoarea parte a acestei serii vom examina principiul asigurării temei Operabil. În mod loosely, acest lucru afirmă că utilizatorii ar trebui să poată naviga cu ușurință și în siguranță prin site-ul dvs..
Accentsconagua