Practicile CSS care pot afecta accesibilitatea

CSS a devenit un limbaj atotputernic. Ceea ce a început ca un mijloc de a adăuga un stil de bază textului și altor elemente de design este acum capabil de mult mai mult.

Îl putem folosi pentru a crea aproape orice aspect imaginabil. Efectele speciale și interactivitatea care înainte necesitau JavaScript sau pluginuri de browser sunt acum acceptate nativ. Limbajul a trecut de la un instrument de bază la una dintre tehnologiile de bază din spatele fiecărui site web.

Dar, ca orice instrument puternic, CSS poate avea și efecte secundare nedorite. Accesibilitatea este printre cele mai mari domenii de îngrijorare. Unele implementări pot face într-adevăr mai mult rău decât bine.

Având în vedere acest lucru, să ne uităm la câteva practici CSS care pot afecta accesibilitatea. Acestea includ caracteristici comune care necesită o analiză atentă înainte de a începe să scrieți cod. Să începem!

Afișarea textului important folosind proprietatea content

Proprietatea de content CSS oferă o modalitate inteligentă de a adăuga îmbunătățiri vizuale unui element. De exemplu, l-ați putea folosi în combinație cu un pseudo-element pentru a adăuga o pictogramă înaintea unui pasaj de text sau element de listă. De asemenea, poate afișa imagini sau șiruri de text.

Dar acesta din urmă poate fi deosebit de supărător. Textul adăugat prin proprietatea content nu este inclus în modelul obiect document (DOM). Aceasta înseamnă că este posibil ca tehnologia de asistență, cum ar fi cititoarele de ecran, să nu o recunoască.

Acest lucru este bine pentru articole pur decorative. Cu toate acestea, ar putea duce la probleme de accesibilitate dacă textul oferă context vital unei pagini. Utilizatorii pot pierde informații importante.

Prin urmare, cel mai bine este să evitați utilizarea proprietății content pentru afișarea textului. Asta cu excepția cazului în care sunteți sigur că nu va interfera cu capacitatea unui utilizator de a înțelege pagina.

Crearea de secvențe animate intermitente intense

Animația este un domeniu în care CSS a cunoscut o evoluție majoră. Efectele care au fost cândva teritoriul bibliotecilor terțe pot fi acum create cu relativă ușurință. Și, deoarece sunt acceptate nativ, pot profita de funcții precum accelerarea hardware pentru a crește performanța.

Tranzițiile și transformările de bază pot face minuni pentru a crea o stare de spirit și a atrage atenția unui utilizator. Și este, de asemenea, posibil să construiți efecte incredibil de realiste cu ajutorul JavaScript.

Dar anumite stiluri de animație pot avea efecte negative. Pentru unii utilizatori, prea multă mișcare poate fi dezorientare – sau mult mai rău. Efectele intermitente intense sau stroboscopice pot duce la convulsii. Acest lucru este posibil pe web - la fel ca în filme, programe de televiziune și jocuri video.

WCAG 2.0 oferă câteva îndrumări susținute de cercetare pentru crearea de animații care nu vor declanșa convulsii sau alte reacții adverse. De exemplu, se recomandă ca o prezentare să fie setată să clipească de cel mult trei ori pe secundă, împreună cu păstrarea dimensiunilor mici și evitarea culorii roșii.

Din fericire, acest lucru nu limitează capacitatea noastră de a impresiona utilizatorii prin mișcare. Există încă o mulțime de oportunități de a ne îmbunătăți munca. Dar tipurile de animație utilizate și impactul lor potențial trebuie analizate cu atenție.

Neintuitiv :hover sau :focus States pe elemente interactive

CSS este expert în stilarea elementelor interactive. Luați în considerare ce este posibil cu elementele de zi cu zi, cum ar fi hyperlinkurile și câmpurile de formular. Ele pot fi personalizate până la punctul de a fi de nerecunoscut în comparație cu aspectul lor implicit.

Asta e bine și bine. Dar este, de asemenea, important să ne gândim la ce se întâmplă atunci când un utilizator interacționează cu un element. Imaginați-vă că faceți clic pe un buton care nu oferă niciun indiciu vizual pentru a confirma ceea ce s-a întâmplat. Sau folosind o tastatură pentru a parcurge un meniu care nu evidențiază legătura curentă.

Ele pot fi simple, dar aceste micro-interacțiuni ajută la furnizarea contextului utilizatorilor. Confirmarea unui clic pe buton sau înțelegerea articolului de meniu pe care se concentrează cursorul sunt doar două exemple. Și fiecare aduce un sentiment de încredere în timp ce un vizitator navighează pe un site web.

Stilul inițial al unui element interactiv este doar jumătate din luptă. Oferirea de stiluri intuitive pentru :hover și :focus completează experiența utilizatorului.

Este demn de remarcat faptul că aceste stiluri ar trebui să fie ușor perceptibile. În practică, asta înseamnă utilizarea mai mult decât doar culoarea ca indicator. Adăugarea de animații, contururi sau pictograme vă poate ajuta să vă asigurați că nimeni nu este lăsat deoparte.

Luând de la sine bazele designului accesibil

Cu toții am fost acolo. Un termen limită pentru proiect se apropie rapid și trebuie să duci la bun sfârșit lucrurile. În cursa pentru lansare, unele articole legate de accesibilitate s-ar putea strecura prin fisuri.

Destul de des, elementele de bază ale designului accesibil sunt lăsate în urmă. Acele practici CSS pe care designerii le-ar putea lua de bune și le-ar putea presupune că sunt deja la standarde.

Exemplele principale includ elemente fundamentale, cum ar fi tipografie lizibilă și rapoarte acceptabile de contrast de culoare. Fără a lua în considerare și a testa aceste elemente, un site web s-ar putea să nu fie atât de accesibil pe cât crezi.

De aceea, merită să acordați ceva timp suplimentar pentru a revizui aspectele mai ample ale stilurilor site-ului dvs. Chiar dacă un articol trece inspecția „globul ocular”, faceți eforturi suplimentare pentru a efectua un audit. S-ar putea să fii surprins de câte oportunități de îmbunătățire subtilă vei găsi.

Este vorba despre utilizarea CSS în mod responsabil

Deoarece CSS este atât de puternic, este ușor să fii tentat de posibilitățile pe care le oferă. De ce să te mulțumești cu o animație de bază când poți crea ceva cinematografic? Și cum am putea să nu ne placă comoditatea de a-l folosi pentru a genera conținut?

Totul se rezumă la empatie și responsabilitate. Ca orice instrument, CSS este capabil de lucruri grozave. Dar doar pentru că putem implementa o caracteristică specifică nu înseamnă că este potrivită pentru accesibilitate. Trăim într-o lume în care oameni din toate categoriile sociale vor consuma ceea ce construim. Și este datoria noastră să ne asigurăm că pot face acest lucru fără obstacole.

Partea bună este că evitarea practicilor de mai sus este la îndemâna tuturor. În cea mai mare parte, este o chestiune de a ne gândi la impactul potențial al ceea ce facem. De acolo, testarea ne oferă datele de care avem nevoie pentru a rafina lucrurile în continuare.

CSS este acolo pentru a face accesibilitatea mai ușoară. Totul depinde de modul în care alegem să-l folosim.