Testarea site-urilor web Drupal pentru accesibilitate cu WCAG 2.1

Știați că 1 din 4 adulți din SUA are un handicap*? Sunt 61 de milioane de oameni care ar putea fi afectați de site-uri web inaccesibile.

În calitate de dezvoltator Drupal, aveți puterea de a face diferența, asigurându-vă că site-ul dvs. respectă Ghidurile de accesibilitate a conținutului web (WCAG). În acest blog, vom explora caracteristicile cheie și cele mai bune practici pentru testarea accesibilității WCAG 2.1 în Drupal, astfel încât să puteți crea site-uri web care să includă toți utilizatorii.

Ce este accesibilitatea (A11y)

Accesibilitatea se referă la a face un site web utilizabil de cât mai multe persoane posibil, în special în ceea ce privește persoanele cu dizabilități. La ce se referă A11y? A11y se referă pur și simplu la cuvântul „Accesibilitate”, unde 11 indică numărul de caractere prezente între „A” și „Y”

WCAG și originile sale

WCAG înseamnă Web Content Accessibility Guidelines. Este considerat a fi standardul de referință pentru accesibilitatea site-ului web. Creat de World Wide Web Consortium (W3C), liniile directoare WCAG sunt cea mai bună și mai ușoară modalitate de a face site-ul dvs. utilizabil pentru toată lumea. Ghidurile WCAG sunt respectate cu strictețe de majoritatea organizațiilor guvernamentale și de asistență medicală pentru a se asigura că site-ul web respectă legile privind accesibilitatea (de exemplu, secțiunea 508).

Principiile WCAG

Există patru principii majore de accesibilitate dacă doriți să adoptați conformitatea WCAG. Acestea urmează acronimul „POUR”, care înseamnă Perceivable, Operable, Understandable și Robust .

Perceptibil

Cu cuvinte simple, conținutul ar trebui să fie detectabil de simțurile unui utilizator. Aceasta înseamnă că trebuie să poată recunoaște informațiile care le sunt prezentate. Include permiterea utilizatorilor să audă clar conținutul audio și asigurarea faptului că acesta se distinge de zgomotul de fundal.

Operabil

Totul este să vă asigurați că utilizatorii pot naviga confortabil pe site-ul dvs. și că interfața este ușor de utilizat. Nu trebuie să existe nicio parte inaccesibilă a site-ului sau pași pe care utilizatorii ar putea fi incapabili să-i parcurgă. Ar trebui să evite conținutul care se mișcă rapid și intermitent atunci când vă proiectați conținutul web. Ar trebui să fie ușor să navighezi pe site fără tastatură, asigurându-te, de asemenea, că site-ul este accesibil de la tastatură pentru utilizatorii care nu pot folosi un mouse.

De inteles

Utilizatorii trebuie să poată procesa informațiile care le sunt prezentate și, de asemenea, să poată înțelege cum să folosească și să navigheze prin site. Aceasta include să faceți textul clar, lizibil și previzibil pentru a vă asigura că paginile apar într-un mod ușor de utilizat și anticipat.

Robust

Acest lucru evidențiază faptul că tehnologia ar putea evolua și să vă construiască site-ul web cu evoluțiile viitoare ale tehnologiei. Ca regulă generală, dacă tehnologia se schimbă și se dezvoltă, conținutul ar trebui să rămână accesibil. De asemenea, trebuie să fie înțeles de un spectru larg de utilizatori cu diferite dizabilități și rămâne în continuare ușor de înțeles. De exemplu, site-ul a făcut-o compatibil să funcționeze cu cea mai nouă versiune de cititoare de ecran.

De ce ar trebui să respectați WCAG

Mai jos sunt câteva dintre avantajele implementării WCAG

• Un site web accesibil generează bunăvoință față de marca dvs. și îmbunătățește optimizarea pentru motoarele de căutare. Site-ul dvs. se va clasa mai bine în rezultatele motoarelor de căutare.
• Un site web accesibil permite o mai mare implicare, acoperire și reținere, deoarece veți fi eliminat în mod eficient barierele care împiedică o gamă largă de persoane să vă acceseze conținutul.
• Odată ce WCAG este implementat ca parte a oricărui site web, acesta este considerat standard.

Criterii de succes WCAG 2.0/2.1: Cel mai larg implementat

1. Fiecare câmp de intrare de pe site are o etichetă adecvată
2. Conținutul decorativ este implementat într-un mod care poate fi ignorat de tehnologia de asistență. De exemplu, imaginile decorative ignorate de cititoarele de ecran
3. Subtitrările sunt furnizate pentru tot conținutul audio/video preînregistrat
4. Pentru conținutul audio este oferită interpretare în limbajul semnelor
5. O secvență semnificativă de conținut, de exemplu, titlurile de pe orice pagină sunt plasate într-o ordine secvențială
6. Utilizatorul poate întrerupe sau opri audio sau controlează volumul audio independent de volumul general al sistemului pentru redarea automată a videoclipurilor.
7. Raportul de contrast al textului și imaginilor textului este de 4,5:1, iar textul și imaginile la scară mare sunt 3:1. Raportul de contrast nu se aplică conținutului decorativ sau logo-ului sau numelui mărcii
8. Sunet de fundal scăzut sau deloc. Audio/video preînregistrat nu conține zgomot de fundal
9. Toate funcționalitățile conținutului sunt accesibile prin interfața tastaturii. Nu va exista nicio capcană pentru cuvinte cheie.
10. Oferind utilizatorilor suficient timp pentru a citi și utiliza conținutul
11. Dacă conținutul este bazat pe timp, utilizatorului i se permite fie să întrerupă, fie să ajusteze constrângerea de timp
12. În cazul oricărui conținut care se mișcă rapid, cum ar fi caruselele automate, utilizatorului i se vor prezenta opțiuni pentru a-l întrerupe sau opri.
13. Când sesiunea utilizatorului autentificat expiră, utilizatorul va putea continua cu sesiunea fără pierderi de date după re-autentificare.
14. Titlurile paginii, titlurile și etichetele vor descrie subiectul paginii web
15. Focalizarea tastaturii este vizibilă și bine evidențiată
16. Componentele focalizabile vor primi focalizare într-o ordine care semnifică semnificația și operabilitatea.
17. Fiecare secțiune a paginii web este însoțită de titlul secțiunii sale
18. Cu excepția imaginilor decorative, toate imaginile au text Alt semnificativ
19. Audio, video, formulare, meniuri drop-down, text ancora, adrese URL și text alternativ sunt accesibile pentru tastatură și cititorul de ecran
20. Claritatea conținutului se adaptează în funcție de nivelul de zoom al paginii. Conținutul este clar vizibil, chiar și la nivelul maxim de zoom
21. Meniul antet și subsol cu ​​context de ajutor ar trebui să fie disponibil pe toate paginile de pe site
22. Site-urile au o implementare adecvată a stărilor de hover și focus

Cititoare de ecran

Mulți oameni cu provocări vizuale folosesc lupe și cititoare de ecran. Un cititor de ecran este un software care citește cu voce tare textul digital afișat pe ecran. Câteva exemple de cititoare de ecran includ:

• Produse plătite precum JAWS (Windows) și Dolphin Screen Reader (Windows).
• Programe gratuite precum NVDA (Windows), ChromeVox (Chrome) și Orca (Linux).
• Software încorporat în sistemul de operare (sistem de operare), cum ar fi VoiceOver (macOS, iPadOS, iOS), Narator (Windows), ChromeVox (pe Chrome OS) și TalkBack (Android).

Trei niveluri de accesibilitate

WCAG 2.1 are 3 nivele de criterii de succes

• Nivelul A: Toate cele 30 de criterii esențiale de succes definite în WCAG 2.0 sunt îndeplinite. Cel puțin, toate site-urile web ar trebui să atingă acest nivel de conformitate.
• Nivel AA: Toate criteriile de succes de nivel A sunt îndeplinite și sunt îndeplinite alte 28 de criterii de succes de accesibilitate. Acest nivel realizează un spectru de accesibilitate mai larg și este adesea obiectivul pe care îl ating majoritatea echipelor de dezvoltare.
• Nivel AAA: site-ul web ar trebui să îndeplinească toate cele trei niveluri ale criteriilor de succes, inclusiv 28 de criterii de succes suplimentare. Acest nivel este de obicei rezervat pentru site-uri speciale, cum ar fi organizațiile guvernamentale.

Majoritatea site-urilor compatibile cu WCAG se încadrează pe scară largă în criteriile de succes de accesibilitate de nivel A sau AA.

Testarea accesibilității unui site web Drupal

Următorii sunt pașii urmați pentru a efectua un test de accesibilitate pentru un site web Drupal

1. Rulați un audit Google Chrome Lighthouse și remediați problemele de accesibilitate evidențiate
2. Rulați un audit al instrumentului Wave
3. Validați manual focalizarea de evidențiere a tastaturii și ordinea de file a paginii
4. Validați pagina cu software-ul de citire de ecran necesar. De exemplu, VoiceOver
5. Validați accesibilitatea site-ului pe toate rezoluțiile, cum ar fi desktop lat, laptop, tab și dispozitive mobile
6. Validați codul site-ului folosind instrumentele de validare ale W3C pentru Markup și CSS
7. Validați contrastul de culoare al site-ului pentru a vă asigura că îndeplinește standardele (4:5:1) utilizând un instrument de extensii Chrome precum Kontrast sau o aplicație precum Color Contrast Analyzer

Cum ajută Drupal la atingerea standardelor de accesibilitate

Dezvoltarea web trebuie să includă accesibilitatea pentru a se asigura că site-urile web sunt funcționale și accesibile celor care au dizabilități. Drupal este renumit pentru devotamentul său constant față de accesibilitate. Uitați-vă la modul în care Drupal promovează accesibilitatea și ce instrumente și funcții oferă pentru a ajuta site-urile web să fie mai ușor de utilizat.

1. Construirea accesibilității în Drupal

Scopul echipei de dezvoltare Drupal a fost întotdeauna de a construi o platformă care să fie utilizabilă de cât mai mulți utilizatori posibil. Cerințele privind accesibilitatea conținutului web (WCAG) 2.1 Nivel AA sunt respectate atunci când se dezvoltă platforma de bază Drupal. Acest lucru indică faptul că o varietate de dizabilități, cum ar fi cele care afectează sistemele vizuale, auditive, fizice, verbale, cognitive și neurologice, pot accesa site-urile web Drupal.

2. Caracteristici implicite de accesibilitate

• Cu capacitatea lor de a se adapta la diferite dimensiuni de ecran și dispozitive datorită designului responsive, temele implicite ale Drupal sunt utilizabile pentru cei care folosesc dispozitive mobile sau tehnologie de asistență.
• Drupal creează un marcaj HTML semantic, care ajută cititorii de ecran și alte instrumente tehnologice de asistență să înțeleagă structura site-ului web.
• Drupal include un câmp pentru adăugarea de text alternativ la fotografii, care îi ajută pe cei nevăzători să înțeleagă conținutul site-ului web.
• Drupal acceptă navigarea prin tastatură, care este crucială pentru utilizatorii care nu pot folosi mouse-ul.
• Formularele care sunt ușor de utilizat și de navigat cu ajutorul tehnologiei de asistență sunt generate de Drupal și sunt accesibile.

3. Drupal oferă pluginuri și module pentru accesibilitate

Pentru a îmbunătăți accesibilitatea unui site web, Drupal oferă o varietate de module de accesibilitate și pluginuri care pot fi implementate. Câteva module și plugin-uri de accesibilitate apreciate sunt următoarele:

• Editoria11y Verificator de accesibilitate: Acest modul examinează un site web pentru probleme de accesibilitate și face recomandări pentru soluții.
• Plugin de accesibilitate CKEditor: Acest program de completare îmbunătățește accesibilitatea editorului de text utilizat pe scară largă pentru Drupal, CKEditor.
• Widget de accesibilitate all-in-one: acest modul include un widget de accesibilitate care permite utilizatorilor să modifice dimensiunea textului site-ului, contrastul și alte setări legate de accesibilitate.
• A11Y: Ajutor de formulare: Acest modul ajută la ca toate formularele web Drupal să îndeplinească standardele de accesibilitate
• Roluri de reper ARIA bloc: Acest modul adaugă elemente suplimentare la formularele de configurare a blocurilor care permit utilizatorilor să atribuie un rol de reper ARIA și/sau etichete ARIA unui bloc.

4. Sprijin puternic al comunității pentru accesibilitate

Dezvoltatorii și designerii care sunt dedicați accesibilității reprezintă o parte considerabilă a comunității Drupal. Un efort condus de comunitate pentru a face Drupal mai accesibil persoanelor cu dizabilități este Drupal Accessibility Group. Grupul oferă îndrumări, instrumente și cele mai bune practici pentru dezvoltarea site-urilor web Drupal conforme cu ADA.

Referinte:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Gânduri finale

Drupal este un sistem de gestionare a conținutului eficient și open-source care oferă o varietate de caracteristici, instrumente și plugin-uri pentru a îmbunătăți accesibilitatea unui site web. Datorită devotamentului său față de accesibilitate și puterii comunității sale axate pe accesibilitate, Drupal este o platformă fantastică pentru construirea de site-uri web care sunt utilizabile și accesibile pentru cei cu deficiențe.
Sper că acest articol vă oferă informațiile necesare despre testarea accesibilității cu WCAG 2.1. Doriți să construiți un site web Drupal accesibil de la zero sau doriți să faceți site-ul dvs. actual mai accesibil? Ne-ar plăcea să facem asta să se întâmple! Hai să vorbim!