Disponibilitatea interfeței de testare

1) De ce și ceea ce credem că este „gata”

• Criteriile WCAG 2 îndeplinite. 1/2. 2 niveluri AA pentru platformele țintă;
• interfața este complet trecută de la tastatură;
• lucrul corect cu cititoarele de ecran;
• contrastele respectă normele;
• toate starile/erorile/statusurile sunt disponibile la vedere si fara mouse;
• localizare, RTL, reduce mișcarea și funcțiile mobile sunt luate în considerare.

2) Strategia de testare (piramida A11y)

1. Autoteste/lintere (acoperire rapidă de până la 40-60% din clasele de probleme).
2. Verificarea manuală a modelului (tastatură, focalizare, conținut, logică).
3. Sesiuni Asistive Tech (AT): cititoare de ecran, scalare, filtre de culoare.
4. Teste de teren cu utilizatorii (dacă este posibil).

Scopul: de a prinde defecte sistemice la nivel de componentă/model, astfel încât acestea să nu se multiplice în caracteristici.

3) Lista de verificare a verificărilor de bază (rulare rapidă)

• Tastatură: totul este accesibil prin filă/săgeți; ordinea focalizării este logică; există o capcană truc în modale; ESC/Enter/Space funcționează.
• Indicatorul de focalizare este vizibil în orice subiect/fundal.
• Contrast: text ≥ 4. 5:1 (regulat), ≥ 3:1 (mare), icoane/controale pot fi citite.
• Semantică: etichete corecte ("buton", "a", "etichetă", "ul/li", "th/td'), roluri și" aria "numai dacă este necesar.
• Cititor de ecran: titluri după ierarhie, nume semnificative de butoane/link-uri, alternative pentru pictograme/imagini.
• Formulare: explicit „etichetă”, sugestii/erori sunt legate ('aria-describy'), textele de eroare sunt specifice.
• Dinamică: Toasturile/bannerele/erorile sunt anunțate prin „aria-live” („politicos ”/„ asertiv”).
• Animațiile respectă „preferă mișcarea redusă”; fără a „tremura” interfața.
• Localizare/RTL: ecranele cheie sunt aliniate, numerele/datele/valutele sunt formatate de utilități.
• Mobilitate: atingeți obiectivele ≥ 44 × 44 px, zoom-ul nu este interzis, rotația ecranului nu rupe conținutul.

4) Roluri, responsabilități și artefacte

Sistem de proiectare: cerințe A11y în descrierea fiecărei componente.
Dezvoltatori: verificări automate, teste de unitate/interacțiune cu A11y-asserts.
QA: scripturi manuale + sesiuni AT; raport cu severitate/frecvenţă.
UX/Content: microcopie de erori/stări, lizibilitate cu voce tare.
Artefacte: liste de verificare, scripturi, ecrane AT, lista de defecte cu referințe WCAG, recomandări.

5) Verificări automate

Linters/analizoare: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
În conductă: blocăm PR pentru încălcări critice (capcane de rol/etichetă/contrast/tab).
Instantanee de contrast: teste vizuale ale temelor/stărilor.

6) Testarea manuală: scenarii

6. 1 Tastatură

Du-te prin pagina numai cu tastatura (Tab/Shift + Tab/Enter/Space/săgeți).
Verificați: vizibilitatea focalizării, prioritatea, disponibilitatea tuturor acțiunilor, absența elementelor „capcane” și „moarte”.
Într-un modal: focalizarea în interior, atunci când este închisă, revine la inițiator.

6. 2 Cititoare de ecran (set minim)

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobil: VoiceOver (iOS), TalkBack (Android).
Verificăm: rubricile corecte (ierarhia H), numele butoanelor/link-urilor, tabelele de lectură („th ”/„ scope”), declararea stărilor, erorile de formă ușor de înțeles.

6. 3 Conținut și microcopie

Citim cu voce tare texte critice - fără ambiguitate, fără „eroare 400”.
Eroare = „ce este greșit + cum să remediați + constrângere/format”.

6. 4 Dinamica și regiunile vii

Toastul succesului este 'aria-live =' politicos '', eroarea este 'asertivă'.
Progress/download explicat prin text; scheletul este preferat pentru spinner.

7) Formulare și erori (în profunzime)

Fiecare câmp are o etichetă asociată (nu un înlocuitor).
Erorile sunt asociate cu câmpul: 'aria-invalid =' true '', 'aria-describy =' [error id] '.
Formulele de format (data, numărul de telefon) sunt specificate în prealabil; măștile nu sparg intrarea/inserția.
Banner sumar de erori atunci când trimiteți + auto-defilare și să se concentreze pe prima eroare.
Texte de eroare: specifice, fără jargon tehnic.

8) Tabele, liste, grafice

Tabele: rubricile „th” with „scope =” col/row „”, semnături, CV.
Listele sunt reale „ul/ol/li”, nu dive.
Grafice - tabele/descrieri alternative; legendele sunt disponibile; culori ≠ un singur semnal.

9) Multimedia și animații

Video: subtitrare/transcriere; controlul tastaturii; fără autoplay (sau cu liniște).
GIF/microanimații: dezactivați atunci când „preferă mișcarea redusă”; evitarea focarelor.
Vibrații/sunete - opțional și duplicat vizual/text.

10) Accesibilitate mobilă

Interactiv ≥ 44 × 44 px, intervale suficiente.
Nu interzice scalarea (meta viewport fără 'user-scalable = nu').
Formular/tastatură: tipuri corecte ('tel', 'email', 'număr'), nu ascundeți capacitățile sistemului.
Check-in temă întunecată și cu fonturi de sistem „mai mult”.

11) Localizare, numere și RTL

Șiruri prin tastele i18n cu context; limbile lungi (DE/TR) nu sparg aspectul.
Data/formate valutare - utilități, nu siruri de caractere.
Modul RTL: oglindiți pictogramele de navigație, verificați ordinea focalizării și a transportului, intrarea bidirecțională.

12) Specificitatea fluxului critic (iGaming)

Plăți/Concluzii

Instrucțiuni clare, limite/termene/comisioane - în text.
Erorile furnizorului sunt declarate explicit, fără coduri; există o alternativă la acțiune.
Confirmarea operațiunii: concentrați-vă pe CTA logic, anulare.

CCM/verificare

Sfaturi pas cu pas pentru fotografii/documente; progresul și ETA.
Erori neclare/strălucire/trunchiate - cu exemple de corecție.
Ton neutru, fără umor.

13) Evaluarea severității defectului

Blocker: Sarcina cheie (tastatură/cititor de ecran) nu poate fi finalizată.
Critic: funcţionalitatea critică funcţionează, dar cu bariere serioase.
Maior: devine în drum, există o soluție.
Minor: cosmetice/nerespectarea ghidurilor fără a afecta sarcina.

Fiecare defect este o referire la criteriul WCAG și scriptul reprodus.

14) Definiția Done (A11y)

Trecerea script-ul tastatură fără un mouse este de 100%.
topor/Far: fără încălcări critice/ridicate.
AA contrast între toate temele/statele.
Ecran cititor-a alerga de căi cheie (navbar, matrite, modale, pâine prăjită).
documentație A11y pentru noi componente/caracteristici (model, arie, focus, exemple).
Regresia testelor A11y verzi în CI.

15) Procese și automatizare

Înainte de dezvoltare: A11y-criteria în sarcini, machete cu stări de focalizare/eroare.
În dezvoltare: lintere/ahe în timpul adunării locale; instantanee vizuale de contrast/focalizare.
În CI: pa11y/axe-scan de pagini critice; construi picătură sub Blocker/critică.
După lansare: audituri trimestriale, monitorizarea reclamațiilor utilizatorilor de către A11y-tag.

16) Anti-modele

Înlocuitor în loc de etichetă.
"instead of" buton "/" a ".
Inele de focalizare cu handicap „de dragul frumuseții”.
Culoare ca singurul purtător de stare.
Modalități fără focalizare capcană/ESC.
Fără scalare pe mobil.
„Eroare 400/500” fără explicații umane.

17) Șabloane script de testare

Scenariul 1 - Navigare la tastatură (pagina formularului)

1. Tab la primul câmp, introduceți datele.
2. Shift + Tab înapoi - Verificați ordinea corectă.
3. Validarea apelurilor (trimitere) - focalizarea se mută la prima eroare.
4. Închideți modulatorul cu cheia ESC, focalizarea a revenit la inițiator.

Scenariul 2 - Cititor de ecran (Pagina de plată)

1. Mergeți la antetul paginii (h1), ascultați secțiunile.
2. Deschideți selecția metodei - se aude declarația de roluri/stări.
3. Faceți în mod deliberat o eroare de sumă - mesajul este citit și asociat cu câmpul.
4. Pâine prăjită cu succes declarată „politicoasă”.

Scenariul 3 - Dinamica

1. Începeți operațiunea cu o așteptare de> 3 secunde - există text despre proces/ETA.
2. În cazul unei erori de rețea - bannerul „asertiv”, accesibil de la tastatură, există o cale „repetare/ajutor”.

18) Micro-șabloane utile

Roluri/arie pentru pâine prăjită

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

Eroare de legătură în câmp

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka (atribute semantice)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) Planul de implementare rapidă a practicilor A11y

1. Auditul componentelor/modelelor curente (contrast/focus/semantica rolului).
2. Design System Edits: Adăugați o partiție A11y la fiecare componentă.
3. Instrumente: Setați up/axe/pa11y/Lighthouse lintere la nivel local și în CI.
4. Training: ghiduri scurte pentru designeri/dezvoltatori/copywriteri.
5. Pilot: fixați 3-5 dintre cele mai frecvente defecte (modale, forme, pâine prăjită).
6. Regulament: DoD cu criterii A11y; audit trimestrial.

Foaie de trișat finală

Verificați tastatura, focalizarea, contrastele, cititorul de ecran, dinamica.
Anuntati statusurile prin aria-live; erori - legate de câmpuri.
Respectul reduce mișcarea, nu interzice scalarea.
Gândiți-vă la semantică (etichete/roluri), nu la „cum arată”.
Automatizați verificările, dar întotdeauna completați cu cele manuale.
Remediați defectele cu referire la WCAG, severitatea și scriptul de redare.