Articolul Transformă compasiunea în acțiune evitând aceste 8 greșeli de design accesibile

Designul accesibil respectă unicitatea tuturor indivizilor, indiferent de vârstă și abilități. Începe prin a recunoaște că nu toți oamenii sunt la fel ca tine.

Pentru a servi cât mai bine diferiți utilizatori, este imperativ să înțelegeți și să empatizați cu tot felul de oameni. Respectarea ghidurilor WCAG 2.0 AA face conținutul accesibil pentru o gamă mai largă de persoane cu dizabilități, inclusiv orbire și tulburări de vedere, surditate și pierderea auzului, dificultăți de învățare, limitări cognitive, mișcare limitată, dizabilități de vorbire sau fotosensibilitate. Pentru a vă asigura că deserviți fiecare utilizator care vă vizitează site-ul web, evitați aceste opt greșeli de design accesibile.

1. Capcane pentru tastatură

Unii oameni care folosesc tehnologia de asistență se bazează pe acțiuni vizibile pe ecran. Un design bun, prin urmare, asigură că tot conținutul legat de navigare este vizibil. Asigurați-vă că comandați articolele în mod logic (sus din stânga la dreapta jos) pentru a ajuta utilizatorii să înțeleagă conținutul și să facă alegeri informate cu privire la navigare.

Sfaturi:

• Conținut principal: Luați în considerare oferirea unei modalități pentru ca utilizatorii să omite cu ușurință navigarea de nivel superior pentru a accesa conținutul principal.
• Modele UI: Urmați semantica modelelor comune, cum ar fi Toggle, Tabs, Tables, Modal Windows și atribute ARIA.
• Utilizarea trecerii cu mouse-ul: nu ascundeți textul sau acțiunile din spatele stării de trecere cu mouse-ul. Dacă un utilizator numai cu tastatură nu poate vedea că există un conținut/butoane, nu poate naviga prin pagină.

Bine săriți link-uri Exemplul #1

Exemplu 2 de linkuri bune pentru omitere

2. Contrast de culoare insuficient

Contrastul insuficient de culoare afectează capacitatea oamenilor de a primi informații vizual. Asigurați-vă că există suficient contrast între text și fundal pentru a vă asigura că textul este lizibil. Raportul de contrast dintre text și fundalul textului ar trebui să fie de minim 4,5 la 1. Cu toate acestea, dacă textul dvs. are cel puțin 24 de pixeli sau 19 pixeli aldine, minimul scade la 3 la 1.

Sfaturi:

• Palete de culori: fiți conștienți de culorile primare. În plus, țineți cont de cerințele de contrast de culoare atunci când alegeți culorile.
• Nu vă bazați doar pe culoare: utilizați combinații de formă, culoare și text (nu doar unul singur) pentru a transmite sens și fiți consecvenți. Furnizați cel puțin doi indicatori, astfel încât persoanele care nu pot distinge cu ușurință culorile să vă poată înțelege în continuare conținutul.
• Excepții: text, imagini cu text, imagini și logo-uri care nu sunt necesare pentru a înțelege semnificația conținutului sau sunt pură „decorare”.

Exemplu de contrast insuficient

3. Text în imagini

Evitați să utilizați imagini de text care sunt destinate a fi citite. Utilizați textul real care este stilat cu CSS mai degrabă decât cu o prezentare de text bazată pe imagini. În situațiile în care trebuie folosite imagini de text, textul alternativ trebuie să conțină același text prezentat în imagine.

Sfaturi:

• Diagrame, diagrame, tabele: Utilizați text real în vizualizările de date. Dacă textul real nu este posibil, o reprezentare textuală a informațiilor esențiale transmise de imagine este esențială. Ex: descriere lungă sau vizualizare listă.
• Excepții: sigle, elemente de branding și elemente grafice care au alternative bune de text descriptiv.

Exemplu de text bun în imagine

4. State de focalizare ascunsă

Stările de focalizare îi ajută pe utilizatori să navigheze și să înțeleagă unde se află. Nu le ascunde niciodată. Stările de focalizare sunt importante pentru utilizatorii de tastatură. Îi ajută să înțeleagă unde se află pe o pagină. Pentru a vă testa site-ul, încercați să parcurgeți pagina și să vă concentrați.

Sfaturi:

• Stări de focalizare: dacă eliminați stările de focalizare implicite, asigurați-vă că le înlocuiți cu ceva care funcționează mai bine decât ceea ce oferă browserul dvs.
• Stări de intrare: luați în considerare ce se întâmplă cu etichetele atunci când vă concentrați în interiorul unei intrări.
• Acțiuni în pagină: definiți clar efectele secundare ale acțiunilor.

State de focalizare ascunsă

State bune de focalizare

5. Structura ierarhică confuză

Creați relații clare între conținutul care este perceptibil și cel care poate fi determinat programatic. Proiectați pagini care au sens din punct de vedere semantic, astfel încât dezvoltatorii să le poată traduce din design în cod, iar un cititor de ecran poate determina secvența corectă de citire.

Sfaturi:

• Semantică: includeți câmpurile și etichetele obligatorii pe formulare. Proiectați tabele cu titluri de coloane.
• Grupări logice: grupați elementele asociate cu spațiu amplu sau culori de fundal. Prezentați informații secvențial, cum ar fi diagrame de proces sau instrucțiuni pas cu pas.
• Dezvăluire progresivă: proiectare pentru manipulare directă. Prezintă lucrurile potrivite la momentul potrivit. Exercitați dezvăluirea progresivă.
• Căutare: creați indicii consecvenți pentru navigare. Utilizați titluri pentru a crea repere clare în cadrul paginii.
• Consecvență: Prezenți lucruri care sunt la fel în același mod.
• Diferențiere: diferențiază diferite tipuri de conținut.

Ierarhie proastă

Ierarhie bună

6. Încărcare cognitivă excesivă

Comunicați clar informații care sunt ușor de înțeles. Proiectați informații într-un mod care să le facă ușor de consumat pentru cei care trăiesc cu tulburare de hiperactivitate cu deficit de atenție (ADHD) și autism sau tulburări din spectrul autismului.

Sfaturi:

• Fii concis: folosește propoziții scurte și indicii vizuale pentru a separa informațiile. Ex: enumerați grupuri folosind numere sau marcatori.
• Minimizați încărcarea cognitivă: creați o narațiune care prezintă informații în locul potrivit, la momentul potrivit. Evitați să prezentați paragrafe dense de informații care pot fi fragmentate. Evitați măsurile lungi.

7. Hyperlinkuri nediferențiate

Linkurile sunt unul dintre cele mai comune elemente de pe web și sunt adesea vitale pentru a naviga pe site-uri web. Link-urile ar trebui să arate ca link-uri și nimic altceva nu ar trebui. Utilizatorii pot fi frustrați dacă încearcă să facă clic pe fraze textuale sau grafice care arată ca link-uri, dar nu sunt. Legăturile ar trebui să aibă sens în afara contextului.

Sfaturi:

• Fii specific: folosește cuvinte descriptive pentru butoane în loc de terminologie vagă, astfel încât rezultatul să fie previzibil.
• Linkuri nesubliniate: textul linkului trebuie să aibă un raport de contrast de 3:1 față de textul din jur.
• Nu vă bazați doar pe culoare: linkul trebuie să prezinte un „desemnator non-color” atât la trecerea mouse-ului, cât și la focalizarea tastaturii. De exemplu: umbre, scară, tranziții/transformări, modificări de culoare sau subliniere.

Hyperlinkuri proaste

Hiperlinkuri bune

8. Tipografie ilizibilă

Majoritatea informațiilor de pe site-uri web sunt comunicate prin text, astfel încât tipul trebuie să fie lizibil și lizibil. Acest lucru îi ajută pe oamenii cu vedere scăzută să distingă cu ușurință personajele. Poate reduce tensiunea de a citi pentru cineva cu dizabilități de învățare. Utilizați o tipografie curată, simplă, cu spațiere bună. Aplicați kerning și orientare confortabile pentru a vă asigura că textul este ușor de citit.

sfaturi

• Oferiți control utilizatorilor: nu împiedicați utilizatorii să își adapteze propria experiență de lectură schimbând dimensiunea copiei corporale la o dimensiune mai mică a fontului. Puteți face acest lucru setând dimensiunea fontului la 100% și utilizați dimensiuni relative pentru a stabili ierarhia între titluri. Textul ar trebui să fie în continuare lizibil la 200%.
• Reduceți sublinierea, cursurile și majusculele: aceste forme de litere sunt mai greu de recunoscut și de citit.
• Aliniați textul în format lung la stânga: faceți machete consistente cu trasee liniare pe care ochiul să le urmărească.

Zoom la 100%

Redimensionați textul. Verificați dacă paginile dvs. sunt accesibile și utilizabile pentru utilizatorii cu deficiențe de vedere și utilizatorii cu vedere scăzută. Redimensionați textul și asigurați-vă că totul de pe pagină funcționează. Repetați până când ajungeți la 200% zoom. Pare simplu? Este.

Pași pentru a vă verifica tipografia:

1. Deschideți browserul și redimensionați textul la 200%. Faceți clic pe Vizualizare, selectați Zoom, apoi faceți clic pe Zoom In (Ctrl/Cmd ++) pentru a mări dimensiunea textului.
2. Aruncă o privire la modul în care a răspuns conținutul de pe ecran. Tot conținutul de pe pagină ar trebui să fie în continuare lizibil și nicio funcționalitate nu ar trebui să se piardă.
3. Verificați dacă interacțiunile funcționează în continuare, dacă textul se suprapune, dacă textul important a fost trunchiat sau dacă textul a fost tăiat.

Zoom la 200%

Sfaturi:

1. Deschideți browserul și redimensionați textul la 200%. Faceți clic pe Vizualizare, selectați Zoom, apoi faceți clic pe Zoom In (Ctrl/Cmd ++) pentru a mări dimensiunea textului.
2. Aruncă o privire la modul în care a răspuns conținutul de pe ecran. Tot conținutul de pe pagină ar trebui să fie în continuare lizibil și nicio funcționalitate nu ar trebui să se piardă.
3. Verificați dacă interacțiunile funcționează în continuare, dacă textul se suprapune, dacă textul important a fost trunchiat sau dacă textul a fost tăiat.

Resurse

Aproximativ una din opt persoane din Statele Unite are o dizabilitate. Dacă definiția este extinsă pentru a include cei cu deficiențe moderate, acest număr crește la aproape unul din cinci.

Eșecul de a găzdui un public atât de mare limitează impactul pozitiv pe care un site web îl poate avea asupra afacerii tale – ca să nu mai vorbim de capacitatea brandului tău de a rezona cu oamenii și de a inspira credință. Construirea unui site web accesibil, care să fie utilizabil în cât mai multe browsere și de cât mai mulți oameni posibil, vă poate ajuta afacerea – dar este, de asemenea, pur și simplu ceea ce trebuie făcut. Așa că am adunat alte câteva resurse pe această temă.

• Aflați de ce este important ca companiile să ia în considerare accesibilitatea web (și să evite un proces corporativ).
• Conectați-vă la Podcastul Solving for B° despre importanța accesibilității web.

Contrast de culoare

• Verificator de contrast Web AIM
• Verificator de contrast colorat

Structura

• Headings Map Chrome Extensie
• Biblioteca de modele de proiect A11Y

credite

• Proiectul A11Y
• w3.org- WCAG 2.0
• w3.org- Standarde și prezentare generală
• Usability.org
• Cercetare de accesibilitate la IBM
• Muzeele Carnegie din PittsburghDisney.com ierarhie bună