Componente UI accesibile pentru web

Pentru a fi accesibile, componentele UI trebuie să lucreze pe mai multe dispozitive cu diferite dimensiuni de ecran și diferite tipuri de intrare. Mai mult, componentele ar trebui să fie utilizate de cel mai larg grup de utilizatori, inclusiv de cei cu dizabilități.

Când proiectăm accesibilitatea, există patru domenii cheie ale dizabilității care trebuie luate în considerare: vizual, auditiv, mobilitate și cogniție.

Problemele vizuale pot varia de la incapacitatea de a distinge culorile până la nicio viziune.

  • Asigurați-vă că este atins un prag de raport de contrast minim pentru conținutul textului.
  • Evitați comunicarea informațiilor folosind exclusiv culoarea și asigurați-vă că toate textele pot fi redimensionate.
  • Asigurați-vă că toate componentele interfeței cu utilizatorul pot fi utilizate cu tehnologii de asistență, cum ar fi cititoarele de ecran, lupele și afișoarele braille. Aceasta presupune asigurarea că componentele UI sunt marcate astfel încât API-urile de accesibilitate să poată determina programatic rolul, starea, valoarea și titlul oricărui element.

Probleme cu auzul înseamnă că un utilizator poate avea probleme de auzire a sunetului de pe o pagină.

  • Faceți conținutul înțelegător folosind alternative de text pentru tot conținutul care nu este strict text.
  • Asigurați-vă că testați dacă componentele dvs. de utilizator sunt încă funcționale fără sunet.

Problemele de mobilitate pot include incapacitatea de a opera un mouse, o tastatură sau un ecran tactil.

  • Faceți că conținutul componentelor dvs. de utilizator este accesibil funcțional de la o tastatură pentru orice acțiuni, pentru care altfel s-ar folosi un mouse.
  • Asigurați-vă că componentele UI sunt marcate corect pentru tehnologiile de asistență; acești utilizatori pot utiliza tehnologii precum software de control vocal și comutatoare fizice, care tind să utilizeze aceleași API-uri ca alte tehnologii de asistență, cum ar fi cititoarele de ecran.

Problemele cognitive înseamnă că un utilizator poate necesita tehnologii de asistență care să îi ajute la citirea textului, de aceea este important să vă asigurați că există alternative de text.

  • Evitați o prezentare vizuală care este repetitivă sau intermitentă, deoarece acest lucru poate cauza probleme unor utilizatori.
  • Evitați interacțiunile bazate pe calendar.

Aceasta poate părea o mulțime de baze de acoperit, dar vom parcurge procesul de evaluare și îmbunătățire a accesibilității componentei dvs. de utilizator.

Este accesibilă componenta dvs. de utilizator?

Rezumat (tl; dr)

Când verificați accesul la cererea dvs., întrebați-vă:

  • Puteți utiliza componenta dvs. de utilizator doar cu tastatura? Reușește să se concentreze și să evite capcanele de focalizare? Poate răspunde la evenimentele corespunzătoare de la tastatură?
  • Puteți utiliza componenta dvs. de utilizator cu un cititor de ecran? Ați furnizat alternative de text pentru informații care sunt prezentate vizual? Ați adăugat informații semantice folosind ARIA?
  • Componenta dvs. UI poate funcționa fără sunet? Opriți difuzoarele și parcurgeți cazurile de utilizare.
  • Poate funcționa fără culoare? Asigurați-vă că componenta dvs. de utilizator poate fi utilizată de cineva care nu poate vedea culorile. Un instrument util pentru simularea orbirii color este o extensie Chrome numită SEE (încercați toate cele patru forme de simulare ale orbirii color disponibile). Ați putea fi, de asemenea, interesat de extensia Daltonize, care este la fel de utilă.
  • Componenta dvs. de utilizator poate funcționa cu modul de contrast mare activat? Toate sistemele de operare moderne acceptă un mod de contrast ridicat. High Contrast este o extensie Chrome disponibilă care vă poate ajuta aici.

Controalele native (cum ar fi