Site-urile web ar trebui să fie accesibile tuturor. Iată ce trebuie să știți.

Crearea unei pagini web nu înseamnă doar crearea unei pagini web. Un aspect important al dezvoltării front-end este asigurarea faptului că interfețele utilizatorului sunt accesibile tuturor pe internet, inclusiv persoanelor cu dizabilități vizuale și auditive. Trebuie să vă scrieți codul având în vedere acești oameni. Cum le oferi persoanelor cu deficiențe vizuale acces egal la site-ul tău web ca și persoanelor fără probleme vizuale? Citiți acest articol pentru a afla.

De ce ar trebui dezvoltatorii să fie îngrijorați de accesibilitatea web?

Accesibilitatea web se învârte în jurul ideii că toată lumea ar trebui să aibă acces egal la web, indiferent de orice dizabilitate sau dizabilități. Având un site web accesibil, este mai ușor să ajungeți la un public mai larg (aproximativ 16% din lume suferă de un handicap sau altul).

Accesibilitatea digitală nu ar trebui să fie o opțiune pentru dezvoltatori. Este o necesitate pentru orice brand profesional. Acest lucru este luat în serios: așa cum a raportat

instagram viewer
varietate, cineva a dat în judecată The Pokémon Company în 2019 din cauza unui site web inaccesibil.

Accesibilitate Web cu HTML

În HTML, există reguli pentru a asigura dezvoltarea de site-uri web accesibile. Această secțiune va explica unele dintre aceste reguli.

Utilizați elemente semantice

Elementele semantice din HTML sunt elemente care au semnificații. În HTML5, există aproximativ 100 de elemente. Unele elemente, cum ar fi și, sunt non-semantice, în timp ce alte etichete HTML sunt semantice. Deși ar putea fi imposibil să nu mai folosiți aceste elemente non-semantice, este important să încorporați cât mai multe elemente semantice în munca dumneavoastră. Iată o listă de elemente semantice populare:

Luați în considerare acest exemplu de la Taaskly:

O privire asupra imaginii de mai sus va dezvălui următoarele elemente:

  • Un titlu
  • O imagine
  • Un paragraf
  • Trei nasturi

Este ușor să presupunem că dezvoltatorii au folosit etichete pentru a aranja elementele pe ecran. Cu o privire mai atentă la coduri, veți observa că au folosit șase etichete semantice în schimb. Codul simplificat arată astfel:

<secțiune>
<imgsrc=„/hero.png”alt="erou">
<articol>
<h1>Găsiți produsele și serviciile potrivite la momentul potrivit.h1>
<p>
 Încălțăminte lucrată manual, renovare a părului, social media manager, trimitere de comisioane, sursă de venitb>— Numiți, Taaskly a înțeles. Găsiți fiecare produs sau serviciu de care aveți nevoie astăzi când vă înregistrați și utilizați Taaskly. 
p>
<Ahref=„/principal/acasă”>Externalizați o sarcinăA>
<Ahref=„/principal/servicii”> Găsiți un serviciuA>
<Ahref=„/principal/piață” >Găsiți un magazinA>
articol>
secțiune>

Din fragmentul HTML, puteți observa următoarele:

  1. Imaginile, textul și butoanele sunt în interiorul a element.
  2. The elementul împarte în mod egal și elemente.
  3. The elementul deține, , și elemente.
  4. Butoanele sunt codificate ca elemente; prin urmare, acestea sunt link-uri, nu butoane. Ca regulă generală, utilizați întotdeauna linkuri pentru a direcționa utilizatorul către o altă pagină sau vizualizare și utilizați butoanele atunci când doriți ca utilizatorul să efectueze o acțiune numai în aceeași vizualizare. Vedea Pagina Butonului lui Angular pentru mai multe informații despre asta.

Utilizați repere pentru a oferi o structură clară a paginii

Repere sunt etichete semantice care ajută utilizatorii nevăzători să navigheze pe o pagină web cu cititoare de ecran. Cu repere, este ușor să definiți diferite părți ale unei pagini web. Site-ul Apple folosește Repere.

Imaginea de mai sus arată patru repere diferite. Puteți folosi Informații despre accesibilitate extensie pentru a vizualiza aceste repere.

Din imagine, putem deduce a în vârf, a conţinând a, și a element. În mod remarcabil, se vede imaginea "navigare", "regiune", și „informații de conținut”. Acestea sunt cunoscute sub numele de roluri, pe care le vom analiza mai târziu.

Ori de câte ori trebuie să utilizați mai multe repere pentru o pagină, diferențiați-le întotdeauna printr-o etichetă. De exemplu, dacă utilizați mai multe elemente precum Apple are, trebuie să le etichetați. Ar trebui să le etichetați cu aria-etichetă atribut. Așa că poți scrie ceva ca oricare dintre acestea:

<navaria-etichetă = "global">
<navaria-etichetă = „navigație locală”>
<navaria-etichetă = "directorul Apple">

Utilizarea etichetelor poate ajuta cititorii de ecran să treacă la orice navigare.

Utilizați atribute de rol, nume și valoare

Uneori, ar putea fi imposibil să utilizați elemente HTML cu funcții de accesibilitate încorporate. Astfel de cazuri pot fi oricare dintre aceste două:

  1. Nu există niciun element HTML nativ pentru ceea ce doriți să realizați. De exemplu, dacă trebuie să utilizați un pentru că niciun alt element nu pare să se potrivească cu rolul.
  2. Nu puteți utiliza elemente semantice din cauza unor probleme tehnice. Dacă utilizați un cadru care utilizează când ar fi fost mai bine de folosit, va fi de datoria dumneavoastră să definiți un control personalizat.

Pentru a defini un control personalizat, aveți nevoie de un rol, un nume și o valoare (uneori) pentru elementul dvs.

Rol

În mod implicit, a elementul are rolul de navigare, în timp ce a elementul are rolul de banner. Trebuie să utilizați aceste elemente numai în scopurile propuse pentru a ajuta tehnologiile de asistență să înțeleagă structura unei pagini web. Dacă trebuie să utilizați unul în locul celuilalt, ar trebui să specificați rolul astfel:

<antetrol = "navigare">
<navrol = "banner">
<divrol = "navigare">

Nume

Un nume este un text descriptiv sau o etichetă asociată cu un element HTML. Cea mai simplă formă a unui nume este textul unui element. Iată un exemplu:

<divrol = "buton">Click pe mine!div>

În fragmentul de mai sus, "Click pe mine!" este numele element. Este cunoscut și ca numele accesibil.

Pentru elemente precum navigarea, meniurile derulante etc., alocarea unui nume este mai complexă decât în ​​exemplul anterior. Este diferit deoarece aceste elemente au elemente copil în ele. Pentru a atribui un nume pentru navigarea de mai sus, utilizați aria-etichetă atribut. Uită-te la acest exemplu:

<navrol = "navigare"aria-etichetă = "navigație globală">...nav>

Ar trebui să rețineți că a Nume atributul este diferit de un nume accesibil. Acest fragment de cod oferă o mai bună înțelegere:

 atributul numelui 
<navrol = "navigare"Nume = "navigație globală">...nav>
 nume accesibil 
<navrol = "navigare"aria-etichetă = "navigație globală">...nav>

Vedea Articolul lui TGPi despre nume accesibile pentru a înțelege mai profund acest lucru.

Valoare

În HTML, atributul value poate oferi informații suplimentare despre un element. Valorile oferă informații despre starea componentei pentru componente personalizate, cum ar fi acordeoanele. De exemplu, un acordeon poate fi deschis sau închis.

Puteți adăuga valoare elementelor dvs. în mai multe moduri. Acest fragment arată câteva dintre modalitățile prin care puteți face asta:

 aria-valuenow 
valoare
<intraretip="Caseta de bifat"Nume="produs[]"valoare="1">

Prioritizarea accesibilității web pentru o experiență online incluzivă

Accesibilitatea web este dincolo de respectarea regulilor; este, de asemenea, să vă asigurați că toată lumea are acces egal la site-ul dvs. web. Încorporarea elementelor semantice, reperelor și atribute precum rolul, numele și valoarea în HTML vă poate face site-ul web mai accesibil persoanelor cu dizabilități. Nu vă gândiți la accesibilitatea web ca o opțiune; consideră că este o necesitate.