Wai-aria

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

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

Pictogramă lupă mgx2.svg Același subiect în detaliu: HTML5 și Accesibilitate (web) .

Î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] :

Categorii WAI ARIA 1.1
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:

Subcategoriile WAI ARIA 1.1
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
Reguli de utilizare WAI ARIA
Regulă Exemple de utilizare
Folosiți întotdeauna HTML nativ Gresit:

<span role=“button” onClick=“submitForm();”>INVIA</span>

Corect:

<button type=“submit” onClick=“submitForm();”>INVIA</button>

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:

Search: <input type=“text” id=“search” />

Corect:

<input type=“text” id=“search” aria-label=“Search” />

Toate elementele interactive trebuie să aibă un nume accesibil.
Cazuri în care sunt utilizate regulile WAI ARIA
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”>

Hai completato con successo il modulo di contatto e riceverai presto un'email di conferma.</div>

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ă

Elemente conexe

linkuri externe

Internet Portal internet : accesați intrările Wikipedia care se ocupă de internet