Cum se folosește ARIA în HTML-ul site-ului dvs. WordPress

Unul dintre obiectivele principale ale dezvoltării web este crearea unei experiențe atractive pentru utilizator. Veți face adesea acest lucru prin includerea de funcții interactive și elemente vizuale uimitoare pe site-ul dvs. web. Cu toate acestea, aceste aspecte nu sunt neapărat accesibile tuturor vizitatorilor potențiali, în special celor care se bazează pe cititori de ecran.

Din fericire, există un sistem pentru a ajuta toți utilizatorii să experimenteze rezultatele muncii dvs. Incorporarea de aplicații accesibile pentru Internet bogat (ARIA) în HTML-ul site-ului dvs. necesită doar un efort suplimentar și poate avea beneficii uriașe. Această postare vă va prezenta ARIA și cum să o utilizați. Să mergem!

O Introducere în ARIA: Ce este și de ce s-ar putea să doriți să o utilizați

Pe scurt, ARIA este o modalitate de a specifica atributele HTML, astfel încât cititoarele de ecran să le poată identifica cu exactitate și apoi să le transmită vizitatorilor. Este un aspect cheie al dezvoltării web accesibile și ajută la crearea unor experiențe mai precise pentru utilizatorii cititorului de ecran.

Acest lucru se datorează faptului că încorporarea ARIA în codul dvs. HTML influențează modul în care browserele vă modifică paginile web pentru cititoarele de ecran. Acest conținut modificat este prezentat într-un arbore de accesibilitate, iar ARIA își asumă sarcina de a traduce elementele dvs. HTML în el.

De exemplu, să presupunem că aveți o pagină cu o casetă de selectare și că ați folosit ARIA în HTML. ARIA va spune cititorului de ecran să informeze utilizatorul că există o casetă de selectare pe pagină și va indica dacă este bifată sau nu. HTML-ul nativ nu poate face acest lucru singur.

Gândește-te la cât de des folosești internetul, nu numai în munca ta, ci și în viața de zi cu zi. Acum imaginați-vă dacă o mare parte din web a fost inutilizabilă pentru dvs. Ați avea acces la mai puține resurse pentru educație, ocuparea forței de muncă, asistență medicală, informații, comunicare și chiar divertisment.

Utilizarea celor mai bune practici pentru dezvoltarea web accesibilă este o modalitate de a vă ajuta să faceți internetul un loc de șanse egale pentru toți, indiferent de vârstă sau abilitate. Acesta este considerat drept de bază al omului de către Organizația Națiunilor Unite și este un scop demn de urmărit pentru propriul său merit.

Dacă acest lucru nu este suficient pentru a vă investi în utilizarea ARIA, vă recomandăm, de asemenea, să rețineți că dezvoltarea accesibilă este utilă și din perspectiva afacerii. Se suprapune cu cele mai bune practici de optimizare a motorului de căutare și crește acoperirea site-ului dvs. În plus, în unele cazuri este cerut de lege. Cu alte cuvinte, există o mulțime de motive pentru a face câțiva pași simpli pentru a vă face site-ul mai accesibil.

Cum să utilizați ARIA în HTML-ul site-ului dvs. WordPress (3 practici cheie)

Vă recomandăm cu siguranță să continuați să vă educați cu privire la ARIA și accesibilitatea web dincolo de scopul acestei postări. Poate doriți în special să luați în considerare testarea accesibilității curente a site-ului dvs.

Acestea fiind spuse, există într-adevăr doar trei lucruri pe care trebuie să le cunoașteți pentru a începe să utilizați ARIA în HTML-ul site-ului dvs. WordPress. Învățarea practicilor de mai jos ar trebui să vă ofere o bază solidă.

1. Utilizarea ARIA cu HTML semantic

Înainte de a discuta despre cum să aplicați ARIA la codul dvs. HTML, este important să rețineți când este potrivit să îl utilizați. În timp ce HTML-ul nativ singur nu creează un conținut web accesibil, există câteva elemente semantice care fie fac ARIA inutilă, fie vor intra în conflict cu ARIA dacă nu este utilizat corect.

Elementele semantice - precum <header> , <figure> și <nav> - descriu scopul HTML-ului lor. Incorporarea ARIA în aceste elemente ar fi redundantă, deoarece HTML semantic implică deja rolul elementului (vom vorbi mai multe despre rolurile ARIA într-un moment).

În plus, există anumite reguli care se aplică utilizării ARIA, pentru a împiedica dezvoltatorii să o folosească într-un mod care intră în conflict cu HTML semantic. World Wide Web Consortium (W3C) are un tabel util care descompune elementele HTML semantice care au implicat roluri ARIA:

Prima coloană specifică un element HTML, în timp ce a doua listează rolul implicit. Dacă elementul are un rol implicit enumerat, nu trebuie să includeți un rol ARIA suplimentar pentru acesta. A treia coloană listează rolurile pe care le poate avea fiecare element HTML, conform celor mai bune practici.

2. Adăugarea de roluri la etichetele HTML

Odată ce sunteți sigur că elementul HTML la care lucrați necesită utilizarea ARIA, puteți să folosiți „roluri” și „atribute”. Este posibil să aveți deja o idee despre ceea ce fac rolurile ARIA din secțiunea precedentă. Acestea specifică tipul de element conținut în etichetă și denotă scopul elementului.

De exemplu, dacă doriți să creați o alertă pentru a informa utilizatorii că trebuie să instaleze o actualizare, ați folosi rolul de „alertă” astfel:

 <div role = "alert">
<p> Vă rugăm să instalați cea mai recentă actualizare! </p>
</div>

După cum am explicat mai devreme, nu este necesar să atribuiți un rol dacă elementul este semantic și implică rolul și nu ar trebui să atribuiți un rol nou unui element care intră în conflict cu rolul său implicit. Totuși, ar trebui să rețineți că puteți aplica doar un rol fiecărui element.

Ganditi - va acest fel - o definește rolul ce un element este. Un element nu poate fi două lucruri în același timp, deci ar trebui să alegeți rolul care îl descrie cel mai bine. Acestea fiind spuse, atunci când aveți nevoie, puteți alege să cuibăriți un element în interiorul unui element cu un rol diferit.

De exemplu, dacă doriți să adăugați alerta de mai sus la antetul dvs., ar putea arăta cam așa:

 <header> <div role = "alert">
<p> Vă rugăm să instalați cea mai recentă actualizare! </p>
</div> </header>

În loc să se afirme că un singur element este atât un antet, cât și o alertă, acest lucru arată clar că există o alertă conținută în antet.

3. Inclusiv atribute pentru stări și proprietăți ale notelor

Atributele sunt al doilea element care alcătuiește ARIA. Ele diferă de roluri prin faptul că le spun cititorilor de ecran ceva important despre un anumit element, mai degrabă decât să definească ce este acel element. Există două tipuri de atribute ARIA:

• Statele împărtășesc informații cu privire la caracteristicile care sunt susceptibile să se schimbe atunci când un utilizator interacționează cu acestea. De exemplu, aceasta poate include casete de selectare sau butoane radio.
• Proprietățile indică caracteristici care este puțin probabil să se schimbe în timpul utilizării. Un element care etichetează un alt element sau nivelul ierarhic la care se află un element sunt ambele proprietăți.

Ambele sunt ușor de observat, deoarece încep întotdeauna cu aria- urmate de starea specifică sau proprietatea utilizată. De exemplu, starea utilizată pentru a informa un cititor de ecran că o casetă de selectare este completată în mod implicit este verificată aria, ca în acest exemplu:

 <span role = "checkbox" 
aria-verificat = "adevărat"
tabindex = "0">
</span>

De asemenea, proprietatea utilizată pentru a nota când un element etichetează altul este etichetată aria. Puteți aplica acest atribut unei imagini, de exemplu, pentru a indica legenda asociată cu aceasta:

 <figure aria-labelledby = "operahouse_1" role = "group">
<img src = "operahousesteps.jpg" alt = "Opera din Sydney">
<figcaption> Am văzut opera <cite> Frizer din Sevilla </cite> aici! </figcaption>
</figure>

Vă recomandăm să consultați lista W3C cu roluri, stări și proprietăți permise, pentru a vedea mai multe exemple de atribute pe care le puteți utiliza.

Concluzie

Când vine vorba de dezvoltarea web, crearea de conținut accesibil poate să nu fie primul lucru pe care îl ai în minte. Cu toate acestea, urmând cele mai bune practici de accesibilitate web și încorporând ARIA HTML în site-ul dvs., puteți juca un rol în a face web disponibil pentru toată lumea.

Trei practici cheie pentru utilizarea ARIA pe site-ul dvs. WordPress includ:

1. Utilizarea ARIA cu HTML semantic.
2. Adăugarea de roluri la etichetele HTML.
3. Inclusiv atribute pentru a nota stările și proprietățile.

Aveți întrebări despre utilizarea ARIA pe site-ul dvs. WordPress? Spuneți-ne în secțiunea de comentarii de mai jos!

Articol Miniatură articol EgudinKa / shutterstock.com