Cum se efectuează un audit de accesibilitate pentru conformitatea cu WCAG

WCAG (orientări privind accesibilitatea conținutului web) a fost creat de consorțiul World Wide Web (W3C) și este cel mai recunoscut standard la nivel global pentru accesibilitate.

În acest articol, descriem sarcinile necesare pentru efectuarea unui audit pentru a verifica conformitatea cu standardul WCAG 2.1.

Accesibilitatea înseamnă a vă asigura că conținutul și funcționalitatea site-ului dvs. pot fi accesate de un public mai larg.

De exemplu:

• Barieră temporară de accesibilitate – Cineva și-a pierdut ochelarii!
• Probleme cu dispozitivul – Sunt pe un dispozitiv care este restrictiv, de exemplu, telefonul mobil
• Situațional – Lumină puternică a soarelui, cameră întunecată etc
• Dizabilitate permanentă – fără vedere, fără auz, probleme cognitive etc.
• Probleme cu lățimea de bandă – O conexiune foarte lentă

După cum puteți vedea, există multe forme de handicap pe care trebuie să le luați în considerare.

Orientările WCAG sunt împărțite în următoarele:

Înainte de a parcurge fiecare secțiune, iată o listă cu ceea ce aveți nevoie pentru a efectua testarea:

1. Perceptibil

• O selecție de browsere care includ doar text (de exemplu, Lynx)
• Un instrument pentru verificarea etichetelor alternative, titlurilor etc. (de exemplu, ScreamingFrog)
• Un cititor de ecran precum NVDA
• Un instrument de testare a accesibilității site-ului web
• Instrumente de dezvoltare Chrome
• Acces la o selecție de dispozitive

Este vorba despre a vă asigura că conținutul este accesibil sub diferite forme. De exemplu, cineva poate vedea conținutul, îl poate asculta, poate folosi atingerea pentru a înțelege conținutul etc. Aceasta include și elemente ale interfeței cu utilizatorul, cum ar fi meniurile și butoanele.

Instrumentul de accesibilitate WAVE este unul dintre multele instrumente care pot fi utilizate pentru a găsi probleme în acest domeniu:

În exemplul de mai sus pagina merge destul de bine. Are doar 1 eroare și 5 erori cu probleme de contrast de culoare.

Singura eroare este că această pagină nu indică limba.

Dar sunt multe lucruri bune pe pagină. De exemplu, în imaginea din dreapta unde vedeți 2 elemente evidențiate în verde, ambele folosesc etichetele „ARIA” pentru a ajuta cititorul de ecran să înțeleagă acest conținut. Mai târziu vom explica mai multe despre asta.

Să trecem prin liniile directoare și criteriile de succes.

Ghid 1.1 - Furnizarea de alternative text la conținutul non-text

Există alternative text la conținutul non-text?

Când aveți conținut fără text pe un ecran, trebuie să verificați dacă există descrieri pentru fiecare dintre aceste elemente.

Înainte de a da exemple, vreau să discut despre ARIA, care este o modalitate de a oferi descrieri suplimentare elementelor și ar trebui să fie folosită numai atunci când HTML standard nu este posibil.

Când utilizați HTML, obțineți automat controlul de la tastatură, focalizarea etc. și aceasta este preferința, dar ARIA poate fi folosită ca rezervă.

Ce este ARIA?

ARIA (aplicații internet bogate accesibile) este o modalitate de a descrie conținut care nu poate fi descris suficient folosind HTML standard. Scopul său principal este pentru cititorii de ecran. Dacă puteți utiliza HTML standard, atunci aceasta este cea mai bună abordare, deoarece va oferi automat focalizare asupra elementului și controlului tastaturii. Când acest lucru nu este posibil, ARIA este alternativa.

Imagini descriptive

O imagine descriptivă este ceva care înfățișează ceva cu sens. De exemplu, o imagine a unei mașini Toyota Prius.

Dacă nu puteți vedea imaginea, atunci trebuie să existe o modalitate de a descrie ceea ce reprezintă această imagine, unde intervine o etichetă Alt.

În platforme precum WordPress puteți adăuga eticheta alt când încărcați imaginea:

Destul de des actualizăm această etichetă alternativă pentru a ne asigura că cuvintele cheie relevante sunt incluse în scopuri SEO, dar trebuie să depășim acest lucru.

Screaming frog va face o analiză a tuturor imaginilor de pe site-ul dvs. și va afișa imaginile care nu au etichete alt, etichete alt duplicat, etichete alt prea lungi sau etichete alt prea scurte!

Puteți vedea imaginile alături de detaliile imaginii și:

Imagine decorativă

O imagine decorativă este o imagine care este acolo pentru a îmbunătăți designul, dar nu există nimic în imagine care merită descris!

Imaginile decorative ar trebui să utilizeze proprietatea de fundal CSS, cu excepția cazului în care există un motiv întemeiat pentru a utiliza eticheta „img”. Dacă un cititor de ecran vede proprietatea de fundal CSS, știe să ignore imaginea.

Iată un exemplu de imagine descrisă ca imagine de fundal pe site-ul My Emergency Doctor din Australia:

Iată codul din spatele acestui lucru:

Deoarece această imagine nu este listată ca <img>, folosește rolul=img pentru a le informa cititorilor de ecran că aceasta este o imagine. Folosește „eticheta Aria” pentru a oferi o descriere bună și precisă a imaginii. De asemenea, definește imaginea ca „imagine de fundal”.

Notă: Dacă utilizați eticheta „img” pentru o imagine de fundal, trebuie să definiți o etichetă alt nulă, de exemplu alt=" "

Când ar trebui să utilizați <img> în loc de culoarea de fundal?

Când o imagine este o parte importantă a conținutului, atunci utilizați <img>. De exemplu, dacă aveți o imagine de produs, aceasta este <img> . De asemenea, puteți avea imagini care sunt doar imagini de fundal folosite în scopuri de decorare și nu are sens să le descriem ca imagini (care vor fi indexate de Google).

În exemplul de mai sus vă puteți întreba dacă imaginea afișată ar trebui definită ca img, dar este o fotografie de stoc și au decis să o definească ca imagine de fundal, ceea ce este ok.

Notă: <img> este o etichetă HTML, dar imaginea de fundal este un stil CSS pe care îl utilizați.

Controale UI

Există diverse comenzi ale interfeței de utilizare care necesită un text pentru a descrie ce este.

De exemplu, un buton sau un control de formular.

Un buton este folosit pentru a ajuta la finalizarea unei funcții. Ar putea fi un buton care are doar o pictogramă și unul care are text în buton. Ambele ar putea fi tratate diferit.

Folosind ARIA puteți defini „rol=button”, dar cu HTML standard puteți utiliza eticheta <button>. Pe care ar trebui să-l folosești?

Iată un exemplu de buton care are doar un X în el, care ne cere să creăm o „etichetă aria” pentru a descrie ce face butonul.

<button aria-label=”Close” onclick=”myDialog.close()”>X</button>

Iată o listă de comenzi tipice ale interfeței de utilizare pe care va trebui să le testați:

Dacă utilizați formulare, trebuie să vă asigurați că fiecare câmp este etichetat corect. Iată un exemplu de etichetare bună:

<label for="fname”>Prenumele:</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for="lname”>Nume:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

Notă: pentru formulare trebuie să vă asigurați, de asemenea:

• Marcați clar câmpurile obligatorii. Dacă un câmp este obligatoriu, atunci va trebui, de asemenea, să fie etichetat corect în html.
• Există instrucțiuni pentru utilizator (de obicei în partea de sus a formularului)
• Utilizatorii primesc ajutor atunci când comit o eroare la completarea unui câmp de formular (de exemplu, format incorect de dată, acesta este ceea ce trebuie să introduceți).

Captcha

Acest lucru poate fi foarte problematic în funcție de modul în care este implementat. De exemplu, când sunt afișate imagini și vi se cere să identificați ce imagine conține semafoare!

Vom examina implementarea și vom face sugestii relevante.

Conținut multimedia

Video/Audioul are nevoie de cel puțin o descriere pentru a identifica despre ce este vorba în videoclip/audio.

Legături

Vrei să te asiguri că linkurile ies în evidență clar pe pagină (de exemplu, culoare diferită) și că folosesc textul de ancorare și descrierea linkului relevante.

Linia directoare 1.2 – Media bazate pe timp

Această zonă se referă la catering pentru conținut video și audio care trebuie să fie mai accesibil.

Există transcriere disponibilă numai pentru audio sau video preînregistrat ?

Transcrierea video este traducerea audio-ului video în text. Transcrierea nu include informații audio care descriu lucruri precum imaginile afișate în videoclip. Acest lucru este tratat separat.

Sfat de transcriere!

Rev.com este un serviciu grozav pentru crearea de subtitrări/transcriere pentru audio/video. Ei oferă chiar și un serviciu de subtitrări live pentru videoclipurile Zoom.

Există subtitrări disponibile pentru sunetul preînregistrat?

Subtitrarea este un text care apare în videoclip pentru a informa utilizatorul despre ceea ce spune persoana respectivă.

Există o descriere audio sau o alternativă media (preînregistrată) ?

Când vizionați un videoclip, subtitrările pot să nu fie suficiente pentru a descrie ceea ce este afișat în videoclip. Aici este necesară și descrierea audio.

De exemplu, o descriere audio ar putea descrie ce se întâmplă în fundal atunci când cineva vorbește, astfel încât să ofere utilizatorilor un anumit context.

Iată un exemplu de transcriere care include descriere audio.

Acest lucru este grozav pentru vizitatorul site-ului dvs., dar este bun și pentru SEO!

Sfat pentru selectarea unui jucător accesibil:

Doriți să vă asigurați că playerul video pe care îl utilizați acceptă ceea ce este necesar pentru accesibilitate:

1. Acceptă subtitrări
2. Descrierea audio poate fi activată/dezactivată
3. Controlul cuvintelor cheie poate fi utilizat pe playerul media
4. Media Player funcționează pe diferite dispozitive și browsere
5. Toate comenzile sunt accesibile.

Există subtitrări pentru sunetul live ?

În general, nu veți avea niciun conținut video sau audio live pe site-ul dvs. web, dar dacă ați avea, atunci ar trebui să aveți crearea simultană de subtitrări, astfel încât utilizatorii să vadă subtitrările afișate în timp ce persoana vorbește.

Există instrumente disponibile pentru subtitrarea automată a videoclipurilor și audio live.

Există o descriere audio pentru mediile sincronizate preînregistrate?

Aceasta este pentru media care conține video și audio. Dorim informații audio care să însoțească mass-media.

Ghid 1.3 – Adaptabil – Prezentați informațiile într-un format care poate fi înțeles de software.

Trebuie să vă asigurați că ceea ce puteți interpreta vizual uitându-vă la ceva este descris în mod programatic, astfel încât să poată fi interpretat corect de software precum cititoarele de ecran.

Există o structură logică a conținutului și este ușor de înțeles relația cu fiecare conținut din acea structură?

Când vizualizați o pagină web, vedeți în mod normal titluri, paragrafe, conținut îngroșat, tabele etc. Și când vizualizați detaliile unui tabel, vedeți titluri și vedeți clar ce rând este relevant pentru ce titlu.

Iată ce va trebui să revizuiți:

• Conținutul este împărțit în subtitluri?
• Sunt folosite liste, tabele etc. când este cazul?
• Există HTML corect folosit pentru alte elemente structurale de-a lungul conținutului?
• Există etichete și text alternativ utilizate după cum este necesar (de exemplu, pe formulare?)

Bacsis

Un bun punct de plecare este testarea site-ului dvs. folosind un instrument de validare care verifică codul html valid (de exemplu, validatorul html W3.org).

Iată un exemplu de formular care afișează câmpurile obligatorii în roșu. Acest lucru este ok pentru un utilizator vizual, dar cum rămâne cu cineva care folosește un afișaj braille?

Pentru a depăși această problemă, cuvântul „necesar” este adăugat și la eticheta pentru numele de familie, care este un câmp obligatoriu.

 <label for="lastname" class="required">Nume de familie (obligatoriu): </label>
<input type="text" size="25" value=""/>
<style type="text/css">
  .necesar {
    culoarea rosie;
  }
</stil>

Există o ordine de conținut care să aibă sens?

• Când vizualizați o pagină web, veți vedea o bară de navigare, apoi ceva conținut, titluri, subtitluri, paragrafe de text. Vrei să te asiguri că acest lucru este prezentat într-o ordine care are sens.
• Utilizați stilurile de titlu pentru a indica importanța secțiunilor. De obicei, aveți un singur stil <h1> pentru a identifica pagina de conținut și apoi este posibil să aveți mai multe H2, H3 etc.
• Aveți navigarea separată de conținut (de exemplu, definiți navigarea folosind <nav>)
• Folosiți html valid

Iată o structură tipică de titluri care au sens:

Pot utilizatorii să înțeleagă conținutul atunci când nu pot percepe forma, dimensiunea sau nu pot folosi informații despre forma sau dimensiunea spațială?

Cel mai simplu mod de a explica acest lucru este cu un exemplu:

Să presupunem că aveți un tabel de comparație cu caracteristicile produsului software și, atunci când un produs are o caracteristică, în această coloană este afișată o imagine de diamant. Acest lucru nu este suficient, va trebui să adăugați text pentru a indica ce reprezintă acest diamant.

Site-ul web funcționează bine în modul portret și peisaj?

Site-ul web trebuie să se poată adapta la modul portret sau peisaj fără a pierde sensul.

Dacă un site web a implementat corect designul responsive, atunci când schimbați orientarea, acesta se adaptează la o altă fereastră de vizualizare (adică selectează un afișaj mai potrivit pe baza dimensiunilor ecranului).

Intrările în formulare sunt descrise corect?

Scopul acestui lucru este de a se asigura că în mod programatic există suficiente informații despre orice câmp care trebuie completat într-un formular.

Și dacă este posibil, activați completarea automată, astfel încât utilizatorul să nu fie nevoit să completeze totul!

Scopul elementelor dintr-o pagină poate fi stabilit în mod programatic?

Un exemplu în acest sens este utilizarea elementului „rol” ARIA pentru secțiunile unui site web.

De exemplu, un banner care conține sigla/numele companiei etc. ar putea fi descris ca „rol=banner”.

sau folosind etichete de intrare pe formulare pentru e-mail, nume, adresă etc.

Iată cum ați vedea asta în HTML:

<input type="e-mail>

Există o versiune text a oricărui grafic?

Dacă există conținut de tip grafic, veți dori să aveți un tabel care rezumă despre ce este vorba despre acest conținut.

Ghid 1.4 – Vedeți și auziți conținutul

Este vorba despre a facilita oamenilor să vadă și să audă conținutul.

Există alternative de text atunci când culoarea este folosită pentru a transmite informații?

Imaginați-vă că aveți un formular și un câmp obligatoriu a fost afișat cu roșu.

Acest lucru nu înseamnă mare lucru pentru un cititor de ecran!

Dar puteți adăuga cuvântul „necesar” în tabel, ca în exemplul de mai jos:

<label for=”lastname” class=”required”>Nume de familie (obligatoriu): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”text/css”> .required { culoare:roșu; } </stil>

Există un mecanism pentru a întrerupe sau a opri audio dacă este redat mai mult de 3 secunde?

Dacă utilizați un cititor de ecran și un videoclip este redat automat în același timp, veți auzi două voci!

În mod ideal, nu va exista redare automată a videoclipurilor care să rezolve această problemă.

Dacă există o redare automată, asigurați-vă că durează mai puțin de 3 secunde, iar dacă nu este, atunci asigurați-vă că există o modalitate de a controla sunetul redării video.

Există un contrast bun între text și imagini/culoare din fundal?

Știm cu toții cât de importante sunt culorile în design și branding, dar pentru vizitatorii cu deficiențe de vedere ai site-ului dvs., culorile nu vor face o mare diferență în experiența lor.

De exemplu, persoanele daltoniste nu vor vedea o diferență între roșu, portocaliu, galben și verde și trebuie să le satisfaci și tu.

Cheia aici este să fiți atenți la raportul de contrast, care este una dintre cele mai frecvente probleme de accesibilitate găsite pe site-uri web.

Există suficient contrast între culoarea textului și fundalul acestuia? Un instrument precum verificatorul de contrast de culoare vă poate ajuta să aflați!

Culoarea de fundal este în stânga și apoi culoarea textului este în dreapta. Scorul este la mijloc.

Recomandarea este ca contrastul să fie de cel puțin 4,5:1 sau 3,1 când textul este mare (de exemplu, 18 puncte sau 14 puncte aldine).

De asemenea, asigurați-vă că utilizați alte instrumente decât culoarea pentru a comunica conținut și informații importante pe site-ul dvs.

De exemplu, CTA principală apare de obicei pe pagină datorită unei culori care îi face pe utilizatori să-l observe. Pentru a face CTA-urile mai accesibile, puteți folosi dimensiunea, plasarea, îndrăzneala, contrastul, pentru a le face vizibile pentru persoanele cu daltonism.

Textul poate fi mărit și site-ul dvs. web încă funcționează normal?

Unul evident este doar mărirea textului de pe un ecran pentru a ajuta pe cineva cu deficiențe de vedere.

Dar doriți ca site-ul web să funcționeze normal dacă un utilizator mărește dimensiunea textului.

De exemplu, atunci când un utilizator mărește textul cu până la 400%, trebuie să vă asigurați că nu se pierde nicio informație.

Iată o imagine de pe W3.org. Sunt sigur că nu doriți ca site-ul dvs. web să arate ca cel din dreapta atunci când măriți textul.

Cerința WCAG 2.1 este că ar trebui să puteți mări cu 200% fără probleme.

Sunt evitate imaginile textului dacă nu este necesar?

Este posibil să aveți un logo care conține text (de exemplu, numele companiei dvs.), ceea ce este în regulă.

Dar ce zici de imaginile textului?

Dacă aveți o imagine a textului, trebuie, cel puțin, să furnizați o etichetă care o descrie.

Dar ar fi mai bine să evitați acest tip de imagini decât dacă:

• Este esential
• Este personalizabil

Site-ul este responsive?

Este normal să derulați în jos pentru a vedea pagina web completă, dar nu să derulați la dreapta sau la stânga.

Când treceți de la un desktop la un dispozitiv mai mic, ecranul ar trebui să se ajusteze automat, astfel încât să nu mai fie nevoie să derulați la dreapta sau la stânga.

Există suficient contrast pentru conținutul non-text?

Culorile adiacente trebuie să aibă un raport de contrast de cel puțin 3:1

Această cerință este pentru persoanele cu vedere relativ scăzută.

Se poate regla distanța/înălțimea liniilor fără pierderi de performanță?

• Înălțimea liniilor (spațierea între linii) trebuie să fie de cel puțin 1,5 ori dimensiunea fontului;
• Spațierea următoarelor paragrafe ar trebui să fie de cel puțin 2 ori dimensiunea fontului;
• Spațierea dintre litere (urmărire) ar trebui să fie de cel puțin 0,12 ori dimensiunea fontului;
• Spațierea cuvintelor trebuie să fie de cel puțin 0,16 ori dimensiunea fontului.

Conținutul este afișat corect la trecerea cu mouse-ul sau la focalizare?

Când vă concentrați asupra unui element (de exemplu, fila către acesta) sau treceți cu mouse-ul peste el, vedeți conținut suplimentar.

De exemplu, treci cu mouse-ul peste un buton și apare o fereastră pop-up.

…sau este afișat un submeniu.

Acest conținut trebuie să fie:

Închidere – De exemplu, dacă faceți clic pe Escape, conținutul nu mai este afișat.

Hoverable – Când treceți cu mouse-ul peste conținut, conținutul este afișat atâta timp cât mouse-ul este deasupra declanșatorului.

Persistent - Aceasta este o combinație a ambelor. Conținutul rămâne vizibil până când utilizatorul îl respinge, utilizatorul îndepărtează mouse-ul sau conținutul nu mai conține informații importante.

Notă: Acest lucru nu se aplică atunci când un element HTML, cum ar fi un titlu, este afișat atunci când treceți cu mouse-ul peste ceva (de exemplu, o imagine).

Este fontul lizibil?

Unele font/fonturi sunt mai lizibile decât altele. Există preferință față de serif sau sans serif, dar acest lucru nu este obligatoriu. Partea cheie este că este lizibil.

2. Operabil

Aceasta înseamnă că utilizatorii trebuie să poată utiliza navigarea și interfața cu utilizatorul interacționând cu aceasta. De exemplu, ei pot „opera” interfața cu utilizatorul folosind tastatura.

Ghid 2.1 – Tastatură accesibilă

Mulți utilizatori folosesc o tastatură în loc de mouse sau trackpad, inclusiv utilizatorii cu bariere de accesibilitate pentru mobilitate sau cei care folosesc un cititor de ecran.

Acesta este motivul pentru care toate funcționalitățile de pe site-ul dvs. trebuie să fie accesibile prin tastatură - linkuri, butoane, formulare și alte comenzi.

Este totul accesibil prin tastatură?

Acum este momentul să nu mai folosiți mouse-ul și să folosiți numai tastatura.

Tu verifici:

Totul urmează o ordine logică înainte sau înapoi (folosind tab pentru a merge înainte și shift tab pentru a reveni).

Când vă aflați pe un anumit buton, secțiune etc., vedeți că acest element este evidențiat? În exemplul următor, este evident că am selectat „articole”.

Este totul accesibil folosind tasta Tab și când apăsați enter când aveți focalizare activează acțiunea?

Notă: Dacă apare o fereastră pop-up, trebuie să puteți naviga și pe aceasta.

Poți sări peste antet?

Când utilizați un cititor de ecran, nu doriți ca acesta să citească același antet pe fiecare pagină. Asta te-ar înnebuni. Prin urmare, ar trebui să puteți accesa linkul „Scrieți la conținut”, apăsați pe Enter, iar următoarea filă va omite acea secțiune.

Când faceți clic pe filă când ajungeți pentru prima dată pe site-ul web de mai jos, vă aflați pe linkul „Săriți la conținut”. Dacă apăsați enter, mergeți direct la conținut.

Dacă apăsați pe o a doua filă, treceți la linkul „Săriți la navigare”. Dacă apăsați enter pe aceasta, sunteți adus la navigare.

Dacă apăsați din nou Tab, treceți la „săriți la navigare”. Dacă selectezi aceasta, treci direct la navigare.

Dacă există un caracter, punctuație, număr sau simbol folosit ca scurtătură, trebuie să existe o modalitate de a dezactiva sau de a schimba această comandă rapidă la unul sau mai multe caractere care nu pot fi imprimate. Singura altă excepție este atunci când comanda rapidă este disponibilă numai când elementul are focus.

2.1.2 Există situații în care ați lovit un punct mort cu tastatura (o capcană pentru tastatură) ?

Îți tabulați drumul către un loc de pe site și nu puteți trece înainte sau înapoi.

Aceasta este cunoscută sub numele de capcană pentru tastatură. Pe măsură ce cântecul merge... prins într-o capcană, nu mă pot uita înapoi...

Există o alternativă la o comandă rapidă de la tastatură implementată folosind o literă?

A avea o comandă rapidă a tastei de caractere cu cineva care se bazează pe o tastatură pentru navigare nu este bine, deoarece poate ajunge să o apasă din greșeală.

Deci trebuie să oferim o alternativă.

a) Abilitatea de a remapa acest personaj la o altă comandă rapidă

b). Opreste-l

c). Este activ doar atunci când te concentrezi pe asta. Deci, asta înseamnă că dacă folosești comanda rapidă, nu se întâmplă nimic decât dacă ești cu adevărat pe ea!

Ghid 2.2 – Suficient timp

Imaginați-vă dacă stabiliți o limită de timp pentru completarea unui formular, dar considerați doar utilizatorii fără nevoi de accesibilitate. Acest termen limită poate fi prea scurt.

Timpul este reglabil?

Oprirea cronometrarii este ideală, dar posibilitatea de a-l extinde (adică atunci când limita de timp este aproape atinsă) sau de a-l ajusta la noua oră este ok.

Poate utilizatorul site-ului web să întrerupă, să oprească sau să ascundă conținutul în mișcare, clipire sau actualizare automată?

Dacă se mișcă/clipește sau se strigă și:

A). pornește automat

b). durează mai mult de 5 secunde

c). este prezentat în paralel cu alte conținuturi

Apoi există un mecanism pentru pauză, oprire sau ștergere.

Aceeași problemă cu actualizarea automată a conținutului.

Ghid 2.3 – Convulsii și reacții fizice

Acest ghid este pentru a vă asigura că nu este proiectat nimic care ar putea provoca o convulsie sau o reacție fizică.

„Blițurile” de pe ecran respectă regulile?

Regula numărul unu este să evitați orice obiecte intermitente, dar dacă acest lucru nu este posibil, asigurați-vă că nu clipește de mai mult de 3 ori într-o secundă sau nu clipește sub pragurile generale sau roșii.

Ghid 2.4 – Navigabil

Este vorba despre a facilita navigarea prin site.

Poți sări peste blocurile care se repetă?

Imaginați-vă că utilizați un cititor de ecran și de fiecare dată când ajunge la o pagină nouă, acesta citește navigarea. Acum, asta nu ar fi distractiv. Deci trebuie să puteți sări peste acestea. Am dat un exemplu în acest sens mai devreme.

Toate paginile sunt intitulate corect?

Aveți nevoie de titluri descriptive bune pe toate paginile. Acest lucru este bun pentru accesibilitate, dar și pentru SEO.

Puteți folosi Screaming Frog pentru a vedea titlurile paginilor într-un singur loc:

Ordinea de focalizare păstrează sensul?

Dacă parcurgeți conținutul, dar fila într-o ordine care nu are sens, va trebui să remediați acest lucru.

Puteți determina scopul linkului din textul linkului?

„Faceți clic aici” nu este un text de ancorare foarte util. Trebuie să aveți cuvinte care să descrie conținutul către care se va adresa linkul.

Ce este textul ancora?

Atunci când creați un link către o altă pagină de pe site-ul dvs. web sau un site extern, textul ancora este textul vizibil pe care îl vedeți și care are legătură cu pagina către care trimiteți oamenii. În loc să afișați doar linkul, este mai bine să afișați textul real.

Există mai multe modalități de a localiza o pagină web?

Aici sunt cateva exemple:

• Harta site-ului – Aveți o listă cu toate paginile de pe o hartă a site-ului
• Legături rapide – aveți legături rapide pentru a ajunge la paginile importante
• Căutare – Căutați pentru a găsi o pagină relevantă

Focalizarea tastaturii este vizibilă?

Întrebarea spune totul! Acest lucru a fost, de asemenea, acoperit într-unul din liniile directoare anterioare. Când tastați undeva, trebuie să puteți vedea vizual că focalizarea este în zona respectivă.

Antetul, corpul și subsolul sunt clar definite?

Tehnologiile de asistență trebuie să fie capabile să identifice în mod clar antetul, subsolul și corpul. Există etichete html care definesc aceste zone.

Ghidul 2.5 Modalități de introducere

Acest ghid se referă la interfețele mai noi în care nu puteți folosi o tastatură sau un mouse pentru a naviga. De exemplu, pe smartphone-uri puteți glisa, ciupiți și măriți, atingeți etc.

Funcționalitatea care utilizează gesturi multipunct sau bazate pe cale poate fi operată de un singur indicator fără a utiliza gestul (cu excepția cazului în care este esențial)?

Un gest bazat pe cale este locul în care trebuie să vă deplasați într-o anumită cale. De exemplu, glisați în sus pentru a accesa anumite funcționalități sau în jos pentru a accesa altele. Un gest cu mai multe puncte este în cazul în care utilizați două sau mai multe puncte de contact pentru a accesa funcționalitatea, de exemplu, folosiți două degete pentru a ciupi și a mări.

Există o modalitate ușoară de a ieși dintr-o acțiune care a fost inițiată de un singur pointer?

Ce este un singur indicator?

Aici puteți accesa funcționalitatea cu un singur punct de interacțiune cu un ecran, de exemplu, atingeți, faceți clic, apăsați lung etc.

Cel puțin una dintre următoarele trebuie să fie adevărată:

• Fără eveniment de down – declanșatorul este implementat atunci când apăsați pe un buton
• Abort sau Undo – Folosiți un eveniment up (adică funcția este activată când indicatorul este eliberat) și există o modalitate de a anula. De exemplu, apăsați pe ceva cu degetul și, în loc să ridicați degetul drept, îl glisați în altă parte a ecranului și funcționalitatea este anulată.
• Inversare în sus – Evenimentul în sus inversează evenimentul în jos
• Esențial – Completarea funcției evenimentului de jos este esențială.

Eticheta vizibilă a unei componente se potrivește cu numele programatic al acelei componente?

Dacă un utilizator văzător folosește textul în vorbire, numele programatic va fi citit și este o experiență mai bună dacă aceasta se potrivește cu eticheta vizibilă.

Funcționalitatea care este operată prin mișcare sau gesturi poate fi operată și de alte comenzi UI?

Dacă scuturați sau înclinați ceva pentru a-l controla, puteți utiliza un alt control UI pentru a accesa această funcționalitate?

De inteles

Este vorba despre a vă asigura că limbajul folosit pe pagină este ușor de înțeles.

3.1 Citibil

Acoperim următoarele:

Limba paginii sau secțiunilor paginii poate fi determinată programatic?

Ar trebui să vedeți așa ceva la începutul oricărei pagini. „Lang” indică limba paginii.

<html class="ie ie7″ lang="en-US">

Dacă limba se schimbă pe pagină, va trebui să puteți identifica și acest lucru.

3.2 Previzibil

Vrei ca interfața ta de utilizare să funcționeze într-un mod previzibil, fără surprize!

Navigarea este în aceeași ordine pe pagini?

Poziția de navigare pe o pagină ar trebui să fie aceeași pe toate celelalte pagini, cu excepția cazului în care utilizatorul face o modificare la navigare.

Componentele, imaginile etc. sunt numite în mod consecvent pe pagini?

Dacă aveți o imagine pe o pagină și aveți aceeași imagine pe altă pagină, atunci doriți ca imaginea să fie numită la fel.

Dacă aveți mai multe pagini dintr-o postare și denumiți paginile pagina 1, pagina 2, pagina 3, aceasta este consecventă. Etichetarea nu trebuie să fie aceeași dacă nu are sens, dar trebuie să fie consecventă.

3.3 Asistență de intrare

Este vorba despre a ajuta utilizatorii să evite sau să se recupereze din greșeli:

Eroare de introducere – Dacă introduceți ceva incorect, este posibil să vedeți vizual că este greșit, dar trebuie să existe și un text care să identifice problema.

Etichete – Când utilizatorii trebuie să introducă un text, există o etichetă asociată care descrie câmpul.

Eroare de introducere – Dacă un utilizator face o eroare, există o sugestie despre cum să o remediați.

Prevenirea erorilor – Ar trebui să puteți fie să inversați, să obțineți feedback despre eroare sau să aveți posibilitatea de a confirma înainte de a trimite.

4. Robustă

Pe lângă faptul că este accesibil, conținutul dvs. trebuie să accepte o varietate de browsere, tehnologii etc.

Ghid 4.1 Compatibil

Aceasta implică testarea cu o varietate de agenți de utilizator și tehnologii de asistență. Un test inițial bun pentru acest lucru este utilizarea instrumentului de validare a marcajului W3C pentru a vedea dacă există erori (adică validează faptul că structura/sintaxa html, xhml etc. este corectă).

Iată un exemplu de rezultat:

De asemenea, trebuie să testați pe mai multe browsere pentru a vă asigura că conținutul este încărcat corect.

Și, de asemenea, merită să încărcați pagina într-un browser doar text (cum ar fi Lynx).

Pot fi analizate corect toate datele?

Există etichete de început și de sfârșit adecvate în secțiunile conținutului, astfel încât să fie ușor de identificat unde începe și se termină o secțiune?

Elementele sunt imbricate corect?

Există atribute sau ID-uri duplicat care fac dificilă distingerea elementelor?

Toate comenzile interfeței cu utilizatorul pot fi înțelese de tehnologiile de asistență?

Iată câteva exemple de controale și ceea ce trebuie să vă dați seama:

• Caseta de selectare – este bifată sau nu?
• Focus – Ce element are focalizare și poate fi înțeles programatic (nu doar vizual)?

Sunt utilizatorii informați despre mesajele de stare cărora nu li se acordă atenție într-un mod care nu întrerupe neapărat activitatea?

Imaginați-vă dacă ați naviga pe o pagină și, în timp ce erați în acea pagină, un banner a apărut în partea de sus a site-ului care anunță o vânzare.

Formele sunt concepute în mod corect?

Pentru a face formularele accesibile, trebuie să vă asigurați că sunt activate următoarele:

• Posibilitatea de a folosi tab pentru a naviga prin formular
• Posibilitatea de a folosi tab pentru a naviga prin formular

<form>

<label for="fname”>Prenumele:</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for="lname”>Nume:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

• Câmpuri obligatorii marcate clar. Dacă un câmp este obligatoriu, atunci va trebui, de asemenea, să fie etichetat corect în html.
• Există instrucțiuni pentru utilizator (de obicei în partea de sus a formularului)
• Utilizatorii primesc ajutor atunci când comit o eroare la completarea unui câmp de formular (de exemplu, format incorect de dată, acesta este ceea ce trebuie să introduceți).

rezumat

După cum puteți vedea, există o mulțime de teren de acoperit atunci când rulați un audit cuprinzător al accesibilității. Totuși, totul dă roade și beneficiile pe care le aduce afacerii tale sunt multe – de la construirea unei imagini pozitive de brand până la atingerea unui public mai larg și îmbunătățirea SEO.