Instrument gratuit: Accesibilitate

Verificare accesibilitate site

Introduceți adresa, iar noi testăm acea pagină și până la patru pagini-cheie într-un browser real, după regulile WCAG 2.2 de nivel A și AA. Fiecare barieră vine cu elementul, pagina, o captură de ecran și o explicație despre cine este afectat.

Gratuit. Testează până la cinci pagini-cheie în aproximativ un minut.

Ce verifică acest instrument

  • Cinci pagini reprezentative pentru site

    Pagina pe care o introduceți, plus până la patru pagini alese din linkurile ei în funcție de tipul site-ului. La un magazin online, acestea sunt o colecție, un produs, coșul și o pagină de conținut; în alte cazuri, pagini precum prețurile, contactul, un articol sau serviciile. Șabloanele se repetă, așa că o singură pagină de produs arată de obicei problemele tuturor paginilor de produs.

  • Reguli WCAG pe pagina randată

    Fiecare pagină se încarcă în Chromium la 1366 × 900, iar axe-core, motorul open-source de reguli dezvoltat de Deque, rulează regulile sale WCAG 2.0, 2.1 și 2.2 de nivel A și AA după ce au rulat scripturile paginii. Astfel sunt detectate și problemele pe care o temă sau o aplicație le creează abia când pagina este construită în browser.

  • Impact și criterii de succes

    Fiecare regulă nerespectată își arată impactul (critic, grav, moderat sau minor), criteriile de succes WCAG cărora le corespunde și câte elemente și pagini afectează.

  • Elementul cu probleme, evidențiat

    Codul HTML al unui element exemplu și o captură de ecran a paginii pe care acel element este conturat, astfel încât dumneavoastră sau dezvoltatorul să îl găsiți în șablon fără să ghiciți.

  • Elemente asupra cărora trebuie să decidă un om

    Când axe-core găsește ceva ce nu poate stabili, de exemplu text peste o imagine de fundal al cărei contrast nu îl poate măsura, elementul apare ca „de verificat” (needs review). Nu este niciodată numărat ca eroare.

  • Un test de tastatură

    Pe prima pagină apăsăm de 40 de ori tasta Tab și înregistrăm unde ajunge focusul: dacă se mută deloc, dacă rămâne blocat într-o buclă (adesea într-un banner de cookie-uri), dacă prima oprire este un link de salt (skip link) și ce elemente focalizate nu au un indicator de focus vizibil. Această ultimă verificare este o euristică, de aceea apare ca „de verificat” (needs review).

Ce nu poate verifica

  • Nu poate auzi ce anunță un cititor de ecran. Un program poate confirma că un buton are un nume, nu și că acel nume are sens atunci când este citit cu voce tare.
  • Nu poate aprecia subtitrările, transcrierile sau audiodescrierile pentru video și audio.
  • Nu poate evalua criteriile cognitive și de conținut, de exemplu dacă instrucțiunile sunt clare sau dacă mesajele de eroare îi ajută pe oameni să își corecteze greșeala.
  • Nu poate testa pagini aflate în spatele unei autentificări, al unei parole sau al unei protecții antibot și nu poate parcurge procesul de finalizare a comenzii (checkout).
  • Nu vă poate spune dacă site-ul este conform cu WCAG sau dacă respectă vreo lege. Regulile automate găsesc o parte din probleme; pentru rest este nevoie de oameni.

De ce contează

Barierele de accesibilitate sunt adesea mici greșeli de șablon cu efecte mari. Un buton de coș format doar dintr-o pictogramă, fără nume accesibil, este anunțat doar ca „buton”, așa că un utilizator de cititor de ecran nu poate ști ce face. Textul gri pe alb care nu atinge raportul de contrast de 4,5:1 este greu de citit pentru multe persoane cu vedere slabă și pentru oricine folosește telefonul în plin soare.

Pentru că același antet, același card de produs și același subsol apar pe fiecare pagină, o singură corectură într-un șablon poate elimina sute de erori deodată. De aceea rezultatele sunt grupate pe reguli, cu numărul de elemente și de pagini, în loc ca fiecare apariție să fie listată ca o problemă separată.

În multe țări, accesibilitatea are și o latură juridică. O scanare nu vă poate spune dacă o lege se aplică în cazul dumneavoastră sau dacă o respectați. Ce vă oferă este o listă datată cu bariere reale de pe propriile pagini, iar acesta este, oricum, punctul practic de plecare.

Cum să citiți rezultatele

Critic
Bariera îi poate împiedica pe unii oameni să folosească elementul cu totul, de exemplu un câmp de formular fără etichetă sau un buton fără nume. Corectați-le pe acestea mai întâi.
Grav
Bariera îngreunează mult o sarcină pentru unii oameni, de exemplu textul principal care nu respectă raportul de contrast.
Moderat
Bariera creează dificultăți sau confuzie, dar de obicei oamenii o pot ocoli.
Minor
O problemă mică sau o neplăcere. Merită totuși corectată data viitoare când modificați acel șablon.
Criterii de succes WCAG
Numerele de lângă o regulă, cum ar fi 1.1.1 sau 1.4.3, sunt criteriile pe care le testează. O regulă fără niciun criteriu indicat este o bună practică, nu o cerință WCAG.
Elemente și pagini
Câte elemente nu au respectat regula și pe câte dintre paginile testate. O regulă care eșuează pe fiecare pagină se află de obicei într-o parte comună, cum ar fi antetul, meniul sau subsolul.
De verificat
axe-core a găsit ceva ce nu a putut decide. Examinați personal elementul: poate trece sau poate eșua. Aceste elemente nu sunt numărate ca erori.
Capcană de focus
Tasta Tab a trecut mereu prin aceleași câteva elemente. Dacă ele aparțin unui banner de cookie-uri, este posibil ca utilizatorii de tastatură să nu poată ajunge la restul paginii.
Focusul nu se mută (Focus doesn’t move)
Apăsarea tastei Tab nu a focalizat nimic. Linkurile și butoanele pot fi construite din elemente div sau span, sau un script poate intercepta tasta.
Link de salt
Dacă prima oprire a tastei Tab este un link „Salt la conținut” (Skip to content). Fără el, utilizatorii de tastatură trec cu Tab prin tot antetul pe fiecare pagină. Reperele (landmarks) și titlurile pot îndeplini și ele WCAG 2.4.1 Bypass Blocks.
Fără indicator de focus vizibil
Elemente focalizate la care nu am văzut niciun contur (outline), nicio umbră (box shadow) și nicio subliniere. Un alt stil, de exemplu o schimbare de culoare, poate fi totuși vizibil, așa că parcurgeți personal aceste elemente cu tasta Tab pentru a confirma.

Cum remediați cele mai frecvente probleme

  • Text care nu respectă raportul de contrast

    Textul normal are nevoie de cel puțin 4,5:1 față de fundal, iar textul mare (aproximativ 24 px sau aproximativ 18,7 px îngroșat) are nevoie de 3:1. Schimbați culoarea din setările temei sau din design tokens, nu element cu element, apoi verificați din nou textul substituent (placeholder), stările de hover și textul peste imagini.

  • Imagini fără text alternativ

    Dați fiecărei imagini cu semnificație un atribut alt care spune ce arată sau ce face, de exemplu numele și culoarea produsului. Imaginile decorative primesc un alt gol (alt=""), ca să fie sărite de cititoarele de ecran. În Shopify, adăugați textul alternativ din imaginea aflată în secțiunea Media a produsului; în WordPress, în câmpul Text alternativ din Biblioteca media.

  • Câmpuri de formular fără etichete

    Asociați fiecărui câmp o etichetă cu <label for> care corespunde id-ului câmpului sau folosiți aria-label când nu există text vizibil. Nu vă bazați pe textul substituent ca singură etichetă: dispare imediat ce cineva începe să scrie. Formularele de abonare la newsletter și câmpurile de căutare din antet sunt vinovații obișnuiți.

  • Butoane și linkuri fără nume accesibil

    Comenzile cu pictograme pentru coș, căutare, meniu sau profiluri sociale conțin adesea doar un SVG. Adăugați text vizibil sau un aria-label care spune ce face comanda („Deschide coșul”, nu „pictogramă”) și adăugați aria-hidden="true" chiar pe SVG.

  • Un banner de cookie-uri care blochează focusul

    Asigurați-vă că fiecare buton al bannerului poate fi atins cu Tab și folosit cu Enter sau Space, că închiderea bannerului readuce focusul pe pagină și că un banner care nu blochează pagina nu reține deloc focusul. Verificați setările instrumentului de gestionare a consimțământului și actualizați-l dacă scriptul este vechi.

  • Contururi de focus eliminate din CSS

    Căutați în foile de stil outline: none sau outline: 0 aplicate pe linkuri, butoane și :focus. Înlocuiți-le cu un stil vizibil, de exemplu :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Întrebări despre acest instrument

Este gratuită această verificare a accesibilității?

Da. Nu este nevoie de înregistrare; confirmați doar că dețineți sau administrați site-ul. Raportul de remediere a accesibilității, cu plată, adaugă încă până la 20 de pagini din sitemap, un parcurs doar cu tastatura, o verificare de reflow la 320 px, cod înainte și după construit pe baza marcajului dumneavoastră cu erori, prompturi AI, un PDF și 5 retestări.

Cât din WCAG poate testa un instrument automat?

Doar o parte. O regulă poate verifica dacă o imagine are text alternativ, nu și dacă textul descrie imaginea, sau dacă un câmp are o etichetă, nu și dacă eticheta este clară. Tratați rezultatele ca pe o listă de probleme sigure, apoi testați restul cu tastatura și cu un cititor de ecran.

Dacă scanarea nu găsește nimic, site-ul meu este conform cu ADA sau WCAG?

Nu. Niciun test automat nu poate arăta că un site este conform cu WCAG sau că respectă ADA, Actul european privind accesibilitatea sau orice altă lege. Un rezultat fără erori înseamnă că regulile automate nu au găsit erori pe paginile testate.

Pot verifica un site de staging sau pagini aflate în spatele unei autentificări?

Paginile aflate în spatele unei autentificări, al unei parole sau al unei protecții antibot nu pot fi testate. Dacă protecția antibot blochează scanarea, permiteți accesul pentru user agentul FixReportsScanner sau testați o copie de staging publică.

Am corectat o problemă. De ce rezultatul arată la fel?

Rezultatele pentru aceeași adresă pot fi refolosite dintr-o scanare din ultima oră. Așteptați să treacă acea oră și goliți orice cache al paginii sau al CDN-ului înainte de a testa din nou.

Surse

Instrumente similare

Raport de remediere a accesibilității ($174, plată unică) pornește de la scanarea gratuită completă și adaugă mai multe pagini, modificarea de făcut pentru fiecare constatare, un PDF și retestări pentru verificarea remedierilor.

Raport de remediere a accesibilității: detalii