Lighthouse Accessibility: interpretează și corectează problemele de contrast

Lighthouse încarcă pagina într-un mediu controlat de browser, evaluează un set de audituri automate de accesibilitate și calculează un scor ponderat. Auditurile sunt pass sau fail; o pagină nu primește punctaj parțial în cadrul unui audit dacă numai unele elemente trec verificarea.

Raportul se concentrează pe auditul desktop pentru contrast redus și include scorul, numărul elementelor afectate, selectorii sau path-urile, fragmentele HTML și explicația Lighthouse. Rezultatul este o observație asupra paginii randate la un moment dat, nu o proprietate permanentă a site-ului.

• Scor Un rezumat al rulării auditate. Folosește-l pentru regresii, nu pentru a ascunde erorile individuale.
• Număr de probleme Elementele identificate de auditul de contrast în starea randată respectivă.
• Selector și snippet Puncte de pornire pentru localizarea elementului în DevTools și identificarea declarației CSS active.

Criteriul 1.4.3 din WCAG 2.2 solicită minimum 4.5:1 pentru text normal și 3:1 pentru text de dimensiuni mari la nivelul AA, cu excepții definite pentru logouri și text incidental. Un heading nu este automat text mare; dimensiunea și greutatea stabilesc pragul aplicabil.

Componentele de interfață non-text și obiectele grafice necesare înțelegerii conținutului solicită, în general, minimum 3:1 față de culorile adiacente conform criteriului 1.4.11. Vizibilitatea focusului și folosirea culorii adaugă cerințe pe care un audit exclusiv de contrast al textului nu le poate evalua complet.

Deschide URL-ul final în Chrome la un viewport desktop și localizează selectorul din raport. Analizează panoul Computed, nu doar regula scrisă: culoarea moștenită, proprietățile custom, opacitatea, blend modes, filtrele și pseudo-elementele pot modifica rezultatul randat.

Verifică dacă elementul apare numai după JavaScript, într-un banner de cookies, modal, carusel, stare de eroare sau widget terț. Dacă selectorul este generat, folosește snippet-ul HTML și componenta părinte pentru a găsi o regulă sursă stabilă.

• Foreground Identifică valoarea finală pentru text, icon, border sau indicatorul de focus.
• Background Găsește culoarea adiacentă randată, inclusiv transparența și fundalurile suprapuse.
• Stare Reproduce exact starea hover, focus, disabled, open sau consent care a generat problema.
• Responsabilitate Corectează tokenul de design sau regula componentei când aceeași pereche slabă apare în mai multe locuri.

Preferă modificarea tokenurilor semantice comune, precum text secundar pe o suprafață deschisă, în locul unui override punctual. Astfel reduci problemele repetate și păstrezi componentele viitoare în același buget de contrast.

Păstrează ierarhia vizuală dorită ajustând ambele culori când este necesar. Nu e obligatoriu doar să închizi textul; poți deschide sau simplifica fundalul, elimina opacitatea, crește greutatea fontului ori adăuga un indiciu care nu depinde exclusiv de culoare.

:root {
  --surface-subtle: #f7f7f4;
  --text-muted: #5f5f59;
}

.help-text {
  color: var(--text-muted);
  background: var(--surface-subtle);
}

.help-link {
  color: #a83200;
  text-decoration: underline;
}

Documentația Chrome prezintă auditurile Lighthouse eșuate drept indicii pentru îmbunătățire. Instrumentele automate nu pot evalua sigur toate etichetele, ordinea de citire, fluxurile cu tastatura, focusul, anunțurile, textele alternative sau rezultatul unei sarcini.

După remedierea erorilor automate, navighează pagina cu tastatura, testează focusul vizibil și zoom/reflow, verifică numele și rolurile accesibile și folosește un screen reader pe fluxurile critice. Include utilizatori cu dizabilități atunci când produsul și nivelul de risc o cer.