Wai-aria
WAI-ARIA ( Web Accessibility Initiative - Accessible Rich Internet Applications ) este un set de documente publicate de W3C ( World Wide Web Consortium ) care specifică cum să crească accesibilitatea conținutului dinamic și a componentelor interfeței utilizator dezvoltate cu AJAX , HTML , JavaScript și alte tehnologii conexe.
Descriere
HTML nu oferă posibilitatea de a crea conținut dinamic sau controale avansate ale interfeței cu utilizatorul, dar permite includerea applet-urilor ( Flash , Java ) și a scripturilor din partea clientului (de obicei JavaScript). Dezvoltatorii web folosesc din ce în ce mai multe scripturi de pe partea clientului pentru a crea controale de interfață cu utilizatorul care nu pot fi create numai cu HTML. De asemenea, utilizează scripturi de la partea clientului pentru a actualiza secțiunile unei pagini fără a solicita una nouă de la serverul web . Astfel de tehnici de pe site-uri web se numesc Aplicații Internet bogate . Aceste controale din partea utilizatorului și actualizarea dinamică a conținutului nu sunt adesea accesibile pentru utilizatorii cu dizabilități , în special pentru cei care folosesc cititoare de ecran și utilizatorii care nu pot utiliza mouse - ul sau alte dispozitive de indicare.
WAI-ARIA descrie cum să adăugați semantică sau alte metadate la conținutul HTML pentru a face mai accesibile comenzile din partea utilizatorului și conținutul dinamic. De exemplu, cu WAI-ARIA este posibil să identificați o listă de linkuri ca meniu de navigare, decidând dacă să o afișați extinsă sau contractată. Născut inițial pentru HTML, WAI-ARIA nu se limitează doar la acest lucru: poate fi utilizat în principal în alte limbaje de marcare, cum ar fi Scalable Vector Graphics (SVG). SVG 1.2 a adăugat un mic suport pentru WAI-ARIA pe 15 septembrie 2008 .
Documente disponibile
Aplicații de Internet bogat accesibile (WAI-ARIA) Versiunea 1.0 [1]
Document destinat în principal dezvoltatorilor de tehnologii web de asistență și alți agenți de utilizatori, dezvoltatorilor de alte specificații tehnice și dezvoltatorilor de instrumente pentru evaluarea accesibilității.
WAI-ARIA Primer [2]
Introducere tehnică în WAI-ARIA. Descrie problemele abordate de WAI-ARIA, conceptele de bază, abordarea tehnică și motivele de afaceri pentru care ar trebui adoptat WAI-ARIA.
WAI-ARIA Cele mai semnificative experiențe [3]
Descrie cele mai bune practici pentru diseminarea aplicațiilor bogate de internet cu WAI-ARIA: abordează subiecte precum primii pași pentru construirea widgeturilor , navigarea cu tastatura, relațiile, proprietățile formularului, suportul pentru copiere și lipire , alerte și dialoguri, biblioteci de componente reutilizabile și instrumente de testare.
HTML5
Înainte de nașterea etichetelor semantice HTML5 precum <nav>, <aside>, <footer>, cititoarele de ecran nu puteau distinge clar diferitele secțiuni din care a fost compusă pagina web. Soluția inițial a fost să adăugați unul sau mai multe linkuri ascunse în partea de sus a paginii. Aceste linkuri redirecționate către diferitele secțiuni ale paginii, cum ar fi bara de navigare [4] :
<A href = "#hidden" class = "hidden"> Accesați bara de navigare </ a>
HTML5, pe lângă etichetele semantice, a actualizat și regulile WAI ARIA [5] [6] [7] [8] :
Tip | Sarcină | Exemple |
---|---|---|
Roluri | Ele definesc ce este un element și care este funcția acestuia | role="navigation" potrivește cu <nav> |
Proprietate | Acordați elementelor un sens suplimentar | aria-required="true" (câmp de introducere obligatoriu) |
State | Ele definesc condițiile actuale ale elementelor | aria-disabled="true" (câmpul de intrare este dezactivat) |
Există, de asemenea, patru categorii de stări și proprietăți:
Atribute | Sarcină | Exemple |
---|---|---|
Tragere și plasare | Transmite informații către AT despre elementele drag-and-drop, inclusiv elemente glisabile și destinațiile de fixare a acestora. | aria-dropeffect |
Regiune live | Indică modificări ale conținutului pentru AT-ul unui utilizator, dacă un mesaj va fi citit cu voce tare cu fluxul de conținut (adică aria-live=“polite” ) sau, în schimb, oprește fluxul de conținut și va fi citit cu voce tare imediat ( aria-live=“assertive” ) . Aceste elemente nu trebuie să fie concentrate și pot include informații despre modul în care utilizatorul poate proceda. | aria-atomic |
De relație | Acestea adaugă relații între elemente care nu pot fi determinate altfel. | aria-describedby |
Widget | Folosit pentru elementele UI comune care primesc informații de la utilizatori atunci când procesează acțiunile și informațiile respective. | aria-autocomplete |
Regulă | Exemple de utilizare |
---|---|
Folosiți întotdeauna HTML nativ | Gresit: Corect: |
Nu modificați semantica HTML nativă | |
Toate comenzile interactive ARIA trebuie să fie accesibile de la tastatură. | <div tabindex=“0”>Ciao Mondo</div> |
Pentru toate elementele care pot fi focalizate, nu adăugați niciodată role=“presentation” sau aria-hidden=“true” . | Gresit: Corect: |
Toate elementele interactive trebuie să aibă un nume accesibil. |
Caz | Descriere | Exemple |
---|---|---|
Etichete descriptive | Când trebuie să adăugați mai multe etichete descriptive la elemente HTML, cum ar fi butoane sau linkuri (de exemplu, Citiți mai multe, Aflați mai multe etc.) | <a aria-label=“Read More about how awesome Lullabot is” href=“/path/to/your/page”>Leggi di più</a> |
Observații | Pentru ca evenimentele să fie anunțate pentru cititoarele de ecran, Live Region ARIA și mesaje de avertizare trebuie adăugate la aceste elemente pentru a fi detectate și citite cu voce tare. | <div class=“alert-message” role=“alert”> |
Relaţii | Pentru a crea o relație între elemente (părinte / copil), trebuie să adăugați atribute ARIA la fiecare dintre elemente. | <nav id=“main-nav”> <button id=“menu-button-1” aria-haspopup=“true” aria-controls=“menu-list-1”>Menu 1</button> <ul id=“menu-list-1” role=“menu” aria-labelledby=“menu-button-1”> <li role=“none”><a role=“menuitem” href=“...”>Link 1</a></li> <li role=“none”><a role=“menuitem” href=“...”>Link 2</a></li> <li role=“none”><a role=“menuitem” href=“...”>Link 3</a></li> </ul> </nav> |
Forme | Pentru a face formularele accesibile utilizatorilor cititorului de ecran. | <label for=“first-name”>Primo nome</label><input type=“text” id=“first-name” aria-required=“true” aria-autocomplete=“on” /> |
Notă
- ^ Aplicații de Internet bogat accesibil (WAI-ARIA) versiunea 1.0, schiță de lucru pentru ultimul apel W3C, 24 februarie 2009
- ^ WAI-ARIA Primer
- ^ Cele mai bune practici WAI-ARIA - Proiect de lucru W3C 4 februarie 2008
- ^ Elementele de bază ale tehnologiei WAI-ARIA - Aflați webul | MDN , la developer.mozilla.org . Adus la 22 februarie 2021 .
- ^ (EN) Accessable Rich Internet Applications (WAI-ARIA) 1.1 , pe www.w3.org. Adus la 22 februarie 2021 .
- ^ raghavendra satish peri, WAI-ARIA 1.1 Cheat Sheet de Digitala11y.com , 14 mai 2019. Accesat la 22 februarie 2021 .
- ^ (RO) Ce naiba este AIR? Un ghid pentru începători despre ARIA pentru accesibilitate | Lullabot , la www.lullabot.com . Adus la 22 februarie 2021 .
- ^ Folosind ARIA , la www.w3.org . Adus la 22 februarie 2021 .
Elemente conexe
linkuri externe
- Introducere în WAI-ARIA , pe html5today.it . Adus la 14 februarie 2011 (arhivat din original la 17 februarie 2011) .