Salt la conținut
Pandus
ro Schimbați limba
Meniu

Exemplu

Raport-model: ce primește clientul dumneavoastră

Acesta este un raport automat complet despre Linden & Loom, un magazin online fictiv, pregătit sub brandul Kestrel & Pine, un studio web fictiv. Ambele nume sunt inventate pentru acest model; problemele sunt rezultate reale ale scanerului nostru pe paginile demo ale magazinului.

Deschideți PDF-ul model Vedeți prețurile

Raportul-model

Kestrel & Pine

Exemplu cu nume fictive

Raport de accesibilitate

lindenloom.example

Verificat la 12 octombrie 2026 · Pregătit de Kestrel & Pine

Probleme găsite: 36

Tipuri de probleme: 9 · pagini verificate: 3

Critic
6
Grav
27
Moderat
3
Minor
0

Probleme critice: 6. Pot împiedica o parte dintre vizitatori să cumpere sau să vă contacteze.

Ce trebuie remediat mai întâi

  1. 1 Unele butoane nu au nume ×4
  2. 2 Câmpurile din formulare nu au etichetă ×1
  3. 3 O listă derulantă nu are etichetă ×1
Primul ecran al lindenloom.example, așa cum l-a văzut scanerul nostru.
Primul ecran al paginii. Numerele marchează problemele din lista de mai jos.

Toate problemele

1
Critic 4 elemente

Unele butoane nu au nume

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Ce înseamnă pentru vizitatorii dumneavoastră

Utilizatorii de cititoare de ecran și de control vocal nu își pot da seama care buton adaugă în coș, deschide meniul sau pornește căutarea. Acest lucru îi poate împiedica să cumpere.

Pe cine afectează

  • clienții nevăzători
  • utilizatorii de cititoare de ecran
  • utilizatorii de control vocal

Cum se remediază

Dați un nume fiecărui buton: text vizibil, aria-label sau aria-labelledby care indică un text vizibil. Butoanele doar cu pictogramă au nevoie de un aria-label, de exemplu "Adaugă în coș" sau "Închide". Nu vă bazați pe atributul title sau pe pictograme realizate doar din CSS.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Pagini unde apare

  • /×2
  • /product.html×2

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Unele butoane nu au nume

    Element: button[type="button"]:nth-child(1)

    Cod pentru dezvoltator 
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>
  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Unele butoane nu au nume

    Element: .icons > button:nth-child(1)

    Cod pentru dezvoltator 
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

  • Element: .cart

    Cod pentru dezvoltator 
    <button type="button" class="cart"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><path d="M5 7h14l-1.5 12h-11z"></path><path d="M9 7a3 3 0 0 1 6 0"></path></svg></button>

Alte elemente cu aceeași problemă: 1.

2
Critic 1 element

Câmpurile din formulare nu au etichetă

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Ce înseamnă pentru vizitatorii dumneavoastră

Utilizatorii de cititoare de ecran aud doar „câmp de editare” și nu știu dacă trebuie să introducă un nume, un telefon sau un cod poștal. La finalizarea comenzii, acest lucru duce direct la comenzi abandonate. Câmpurile care au doar placeholder îi derutează și pe clienții mai în vârstă după ce încep să tasteze.

Pe cine afectează

  • clienții nevăzători
  • utilizatorii de cititoare de ecran
  • clienții mai în vârstă
  • persoanele cu dizabilități cognitive
  • utilizatorii de control vocal

Cum se remediază

Asociați fiecărui câmp un <label for> vizibil sau includeți câmpul în interiorul etichetei. Folosiți aria-label doar când o etichetă vizibilă chiar nu este posibilă. Un placeholder nu este o etichetă. Verificați câmpurile de căutare, newsletter, cantitate și checkout.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Câmpurile din formulare nu au etichetă

    Element: input

    Cod pentru dezvoltator 
    <input type="number" value="1" min="1">
3
Critic 1 element

O listă derulantă nu are etichetă

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Ce înseamnă pentru vizitatorii dumneavoastră

Utilizatorii de cititoare de ecran aud doar „casetă combinată” și nu știu dacă alege mărimea, culoarea, cantitatea sau țara. Acest lucru poate bloca alegerea unei variante de produs sau finalizarea comenzii.

Pe cine afectează

  • clienții nevăzători
  • utilizatorii de cititoare de ecran
  • utilizatorii de control vocal
  • persoanele cu dizabilități cognitive

Cum se remediază

Asociați fiecărui <select> un <label for> vizibil sau folosiți aria-labelledby care indică un text vizibil. Folosiți aria-label doar când nu este posibilă o etichetă vizibilă. Verificați selectoarele de variante, de sortare și de țară.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: O listă derulantă nu are etichetă

    Element: select

    Cod pentru dezvoltator 
    <select>
                <option>135 × 200 cm</option>
                <option>155 × 220 cm</option>
                <option>200 × 220 cm</option>
            </select>
4
Grav 19 elemente

Textul este greu de citit din cauza contrastului scăzut

WCAG 2.2 1.4.3 (AA) Contrast (Minimum) · EN 301 549 9.1.4.3

Ce înseamnă pentru vizitatorii dumneavoastră

Cumpărătorii cu vedere slabă, clienții mai în vârstă și oricine folosește telefonul afară pot rata prețuri, condiții de livrare sau etichetele butoanelor. Textul greu de citit duce la ezitare și la coșuri abandonate.

Pe cine afectează

  • persoanele cu vedere slabă
  • clienții mai în vârstă
  • persoanele cu deficiențe de percepție a culorilor
  • persoanele care folosesc telefonul în lumină puternică

Cum se remediază

Asigurați un raport de contrast de cel puțin 4.5:1 pentru textul normal și 3:1 pentru textul mare (24px sau 18.66px bold). Verificați placeholder-ele, stările care par dezactivate, textul pe imagini și etichetele de reducere. Corectați culorile în design tokens sau în CSS, nu element cu element.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Pagini unde apare

  • /×13
  • /product.html×4
  • /contact.html×2

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Textul este greu de citit din cauza contrastului scăzut
    Contrast 3,93 : 1, necesar cel puțin 4,5 : 1 text #8c8178 pe #2b2622, 9.8pt (13px)

    Element: .bar > span

    Cod pentru dezvoltator 
    <span>· Returns within 30 days</span>
  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Textul este greu de citit din cauza contrastului scăzut
    Contrast 3,93 : 1, necesar cel puțin 4,5 : 1 text #8c8178 pe #2b2622, 9.8pt (13px)

    Element: .bar > span

    Cod pentru dezvoltator 
    <span>· Returns within 30 days</span>
  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Textul este greu de citit din cauza contrastului scăzut
    Contrast 2,88 : 1, necesar cel puțin 4,5 : 1 text #ffffff pe #c98a5b, 11.3pt (15px)

    Element: button

    Cod pentru dezvoltator 
    <button type="submit" class="btn">Send</button>

Alte elemente cu aceeași problemă: 16.

5
Grav 5 elemente

Imaginile nu au descriere text

WCAG 2.2 1.1.1 (A) Non-text Content · EN 301 549 9.1.1.1

Ce înseamnă pentru vizitatorii dumneavoastră

Utilizatorii de cititoare de ecran nu aud nimic sau aud un nume de fișier precum „IMG_2041.jpg” în loc de produs, culoare sau ofertă. Pot rata detalii esențiale și pot pleca spre un magazin care își descrie produsele.

Pe cine afectează

  • clienții nevăzători
  • utilizatorii de cititoare de ecran
  • persoanele cu imaginile dezactivate sau cu conexiune lentă

Cum se remediază

Adăugați un atribut alt fiecărui <img>. Descrieți într-o frază scurtă ce contează pentru cumpărare (produsul, culoarea, un detaliu cheie). Folosiți alt="" pentru imaginile pur decorative, ca să fie omise. Nu repetați „imagine cu” și nu înghesuiți cuvinte cheie.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Imaginile nu au descriere text

    Element: img[src$="hero.svg"]

    Cod pentru dezvoltator 
    <img src="/hero.svg" width="800" height="600">
  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Imaginile nu au descriere text

    Element: img[src$="duvet.svg"]

    Cod pentru dezvoltator 
    <img src="/duvet.svg">
  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Imaginile nu au descriere text

    Element: img[src$="towel.svg"]

    Cod pentru dezvoltator 
    <img src="/towel.svg">

Alte elemente cu aceeași problemă: 2.

6
Grav 3 elemente

Unele linkuri nu spun unde duc

WCAG 2.2 2.4.4 (A) Link Purpose (In Context) · WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.2.4.4, 9.4.1.2

Ce înseamnă pentru vizitatorii dumneavoastră

Utilizatorii de cititoare de ecran aud doar „link” și nu știu dacă deschide coșul, contul sau Instagramul. Pierd timp sau renunță să mai caute coșul ori pagina de contact.

Pe cine afectează

  • clienții nevăzători
  • utilizatorii de cititoare de ecran
  • utilizatorii de control vocal

Cum se remediază

Dați fiecărui link un nume text: text vizibil, text alternativ pe o imagine din interiorul linkului sau aria-label pe linkurile doar cu pictogramă. Numele trebuie să descrie destinația, de exemplu "Coș, 2 produse". Ascundeți pictogramele decorative cu aria-hidden="true".

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Unele linkuri nu spun unde duc

    Element: .icons > a[href$="contact.html"]

    Cod pentru dezvoltator 
    <a href="/contact.html"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></a>
  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Unele linkuri nu spun unde duc

    Element: a[href$="contact.html"]:nth-child(1)

    Cod pentru dezvoltator 
    <a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a4e2d"></circle></svg></a>

  • Element: .social > a[href$="contact.html"]:nth-child(2)

    Cod pentru dezvoltator 
    <a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#7a4e2d"></rect></svg></a>
7
Moderat 1 element

Linkurile din text arată ca textul obișnuit

WCAG 2.2 1.4.1 (A) Use of Color · EN 301 549 9.1.4.1

Ce înseamnă pentru vizitatorii dumneavoastră

Persoanele cu deficiențe de percepție a culorilor sau cu vedere slabă pot să nu observe linkurile către condițiile de livrare, ghidul de mărimi sau politica de retur și ratează informații de care au nevoie.

Pe cine afectează

  • persoanele cu deficiențe de percepție a culorilor
  • persoanele cu vedere slabă
  • clienții mai în vârstă

Cum se remediază

Subliniați linkurile din textul principal sau oferiți-le un alt indiciu vizual în afară de culoare. Dacă vă bazați doar pe culoare, linkul are nevoie de un contrast de cel puțin 3:1 față de textul din jur, plus o schimbare vizibilă la hover și la focus.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Linkurile din text arată ca textul obișnuit

    Element: .desc > a[href$="contact.html"]

    Cod pentru dezvoltator 
    <a href="/contact.html">care guide</a>
8
Moderat 1 element

Unele titluri sunt doar text îngroșat sau mare

WCAG 2.2 1.3.1 (A) Info and Relationships · EN 301 549 9.1.3.1

Ce înseamnă pentru vizitatorii dumneavoastră

Clienții nevăzători sar adesea de la un titlu la altul pentru a găsi secțiuni precum „Descriere”, „Livrare” sau „Recenzii”. Titlurile false sunt invizibile pentru această navigare, așa că trebuie să asculte toată pagina și pot rata informații importante.

Pe cine afectează

  • clienți nevăzători
  • utilizatori de cititoare de ecran
  • persoane care navighează cu scurtături de tastatură

Cum se remediază

Transformați textul care servește drept titlu de secțiune într-un titlu real (<h2>, <h3> etc.) într-o ordine logică și stabiliți aspectul prin CSS. În editoare, alegeți „Titlu 2” sau „Titlu 3” din meniul de formatare în loc să îngroșați sau să măriți textul. Dacă textul nu este un titlu, lăsați-l paragraf: axe marchează această verificare ca experimentală și uneori semnalează propoziții introductive îngroșate.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Unele titluri sunt doar text îngroșat sau mare

    Element: .price

    Cod pentru dezvoltator 
    <p class="price">€129</p>
9
Moderat 1 element

Câmpurile din formulare nu se completează automat

WCAG 2.2 1.3.5 (AA) Identify Input Purpose · EN 301 549 9.1.3.5

Ce înseamnă pentru vizitatorii dumneavoastră

Cumpărătorii trebuie să tasteze manual adrese, numere de telefon și adrese de email. Cei mai afectați sunt oamenii cu dificultăți motorii sau de memorie, iar o finalizare lentă a comenzii înseamnă comenzi pierdute pentru toți.

Pe cine afectează

  • persoanele cu dizabilități motorii
  • persoanele cu dizabilități cognitive
  • cumpărătorii de pe mobil
  • toți clienții aflați la finalizarea comenzii

Cum se remediază

Folosiți valori autocomplete valide din specificația HTML, potrivite cu câmpul, de exemplu "email", "given-name", "postal-code", "tel". Corectați greșelile de scriere și valorile inventate; folosiți "off" doar acolo unde completarea automată ar fi greșită.

O parte din explicație este traducere automată, încă neverificată de un vorbitor nativ.

Exemple pe site-ul dumneavoastră

  • Captură a elementului de pe pagina dumneavoastră, încadrat cu roșu: Câmpurile din formulare nu se completează automat

    Element: input[type="email"]

    Cod pentru dezvoltator 
    <input type="email" placeholder="E-mail" autocomplete="e-mail-address">

Recomandări peste WCAG 2.2 AA

Peste nivelul WCAG 2.2 AA pe care se bazează legile. Nu se numără ca probleme; remedierea lor face site-ul mai ușor de folosit.

  • O parte din conținut se află în afara zonelor principale ale paginii Elemente: 2

    Unele părți ale paginii nu se află în repere (landmarks) precum antetul, navigarea, conținutul principal sau subsolul. Aceasta este o practică recomandată, dincolo de nivelul WCAG 2.2 AA.

    Plasați tot conținutul vizibil în elemente de reper: <header>, <nav>, <main>, <aside> și <footer> (sau rolurile ARIA corespunzătoare). Mutați blocurile rătăcite, precum barele de anunțuri, bannerele și formularele de newsletter, în reperul potrivit și asigurați-vă că fiecare pagină are exact un <main>. Ferestrele pop-up și bannerele de cookie-uri pot fi marcate ca dialog sau ca regiune cu nume.

  • Textul nu atinge nivelul de contrast ridicat (AAA) Elemente: 1 WCAG AAA

    Unele texte îndeplinesc nivelul de bază al contrastului, dar nu pe cel mai strict: 7:1 pentru text normal și 4.5:1 pentru text mare. Este o practică recomandată dincolo de WCAG AA, nu o cerință obligatorie.

    Acolo unde este practic, ridicați contrastul la 7:1 pentru text normal și 4.5:1 pentru text mare (24px sau 18.66px îngroșat), începând cu textul principal, prețurile și finalizarea comenzii. Închideți culorile textului sau deschideți fundalurile în tokenurile de design sau în CSS. Rezolvați mai întâi problemele de bază de contrast 4.5:1 (regula color-contrast); această verificare este doar o sugestie suplimentară.

Comparativ cu verificarea anterioară

Verificarea din 5 octombrie 2026: probleme — 40

Nou
19
Rezolvate
22
Rămase
17

Rezolvate de la verificarea anterioară

  • ✓ Textul este greu de citit din cauza contrastului scăzut×7
  • ✓ Imaginile nu au descriere text×4
  • ✓ Pagina nu indică în ce limbă este scrisă×3
  • ✓ Unele butoane nu au nume×2
  • ✓ Unele linkuri nu spun unde duc×2
  • ✓ Câmpurile din formulare nu au etichetă×1
  • ✓ Linkurile din text arată ca textul obișnuit×1
  • ✓ Unele titluri sunt doar text îngroșat sau mare×1
  • ✓ O listă derulantă nu are etichetă×1

Probleme pe verificări

Probleme pe verificări
DataProbleme găsite
12 octombrie 202636
5 octombrie 202640

Pagini verificate

PaginaProbleme
Linden & Loom – Linen and cotton for your homehttps://lindenloom.example/ 23
Washed linen duvet cover – Linden & Loomhttps://lindenloom.example/product.html 10
Contact – Linden & Loomhttps://lindenloom.example/contact.html 3

Același raport în PDF, pentru arhivă sau pentru dezvoltator.

Deschideți PDF-ul model

Verificare automată, nu un audit complet. Nu reprezintă consultanță juridică. Instrumentele automate găsesc doar o parte din problemele de accesibilitate; testarea cu tastatura și cu un cititor de ecran rămâne necesară.