Dažniausios prieinamumo klaidos el. parduotuvėse ir kaip jas ištaisyti

Trūkstami alt tekstai, mažas spalvų kontrastas, neprieinamos formos — tai klaidos, kurias automatinės patikros dažniausiai aptinka. Apžvalga ir taisymo vadovas.

Paskelbta:

El. parduotuvės pavyzdys su keturiomis paryškintomis prieinamumo klaidomis: trūkstamas alt tekstas, mažas kontrastas, nepažymėtas formos laukas ir trūkstamas fokuso indikatorius

Kodėl automatinės patikros atskleidžia daugiau nei tikimasi

Dauguma el. parduotuvių savininkų mano, kad jų svetainė yra prieinama. Tikrovė dažnai būna kitokia. Automatinė patikra paprastai atskleidžia dešimtis iki šimtų radinių net ir iš pažiūros normaliai atrodančioje el. parduotuvėje.

Automatizavimas apima maždaug 30–50 % WCAG 2.1 AA taisyklių. Kokie yra dažniausi problemos?

Trūkstami alt tekstai

Labiausiai paplitęs radinys. Paveikslėliai be tekstinio aprašymo (alt atributas) yra visiškai neprieinami ekrano skaitytuvais besinaudojantiems vartotojams.

Kaip ištaisyti:

  • Funkciniai paveikslėliai (produktai, iliustracijos, logotipai): prasminga to, ką paveikslėlis rodo arba ką mygtukas daro, aprašas
  • Dekoratyviniai paveikslėliai (fonai, puošybiniai elementai): tuščias alt atributas, kad ekrano skaitytuvai juos teisingai praleistų
  • Paveikslėliai su tekstu: tekstas turi būti pateiktas alt atribute

Mažas spalvų kontrastas

Antra dažniausia problema. WCAG 2.1 AA reikalauja ne mažesnio kaip 4,5:1 kontrasto santykio įprastiniam tekstui ir 3:1 dideliam tekstui (18 pt arba 14 pt paryškintas). Silpnas kontrastas kenkia silpnaregiams.

Tipiškai problemiški elementai: šviesus mygtukas 'Į krepšelį' baltame fone, pilkas aprašomasis tekstas, klaidos pranešimai blyškia spalva, tekstas ant vaizdo reklamjuosčių.

Kaip ištaisyti: tokios priemonės kaip Colour Contrast Analyser arba automatinis nuskaitymas iš karto parodys, kurios vietos neatitinka standarto.

Neprieinamos formos

Formos yra kritinis kiekvienos el. parduotuvės taškas. Dažniausios problemos:

  • Trūkstamas lauko label: el. pašto laukas be programiškai priskirto label yra neatpažįstamas ekrano skaitytuvui
  • Klaidos pranešimai neanuonsijami per ARIA: ekrano skaitytuvą naudojantis vartotojas nemato, kad įvyko klaida
  • Privalomi laukai be žymėjimo: žvaigždelė (*) be tekstinio paaiškinimo nepakanka
  • Mygtukai be prasmingo teksto: 'Patvirtinti' yra geriau nei vien ikonika be aprašo

Klaviatūros naršymo problemos

Jūsų šalies įstatymas, perkeliantis EAA, reikalauja, kad visa el. parduotuvė būtų valdoma be pelės. Dažniausios problemos:

  • Trūkstamas matomas focus ring: kai vartotojas naršo puslapy Tab klavišu, visada turi matyti, kur yra
  • Keyboard trap: vartotojas įstringa modaliniame lange ar meniu ir negali iš jo išeiti klaviatūra
  • Blogas fokuso eilės tvarka: Tab šoka per puslapį nenatūraliai

Neprieinami interaktyvūs elementai

Mygtukai ir nuorodos turi turėti prieinamą pavadinimą, kad pagalbinės technologijos teisingai jas skelbtų. Problemiški modeliai:

  • Mygtukas tik su piktograma be teksto ar aria-label
  • Nuoroda 'Spustelėkite čia' arba 'Daugiau' be konteksto
  • Interaktyvus div arba span be role='button' ir klaviatūros palaikymo

Kaip pradėti taisyti

Rekomenduojamas metodas:

  1. Paleiskite automatinį nuskaitymą — greitai ir nemokamai nustatykite labiausiai poveikio turinčias problemas
  2. Nustatykite prioritetus pagal rimtumą: pirmiausia spręskite kritines (critical) ir rimtas (serious) problemas
  3. Ištaisykite technines klaidas: alt tekstai, kontrastas ir formų label yra palyginti paprastos pataisos
  4. Užsakykite rankinį auditą: likusios taisyklės (suprantamumas, elgesys su ekrano skaitytuvais) reikalauja žmogaus sprendimo

Prisiminkite: automatinės patikros aptinka maždaug 30–50 % WCAG taisyklių. Automatiškai aptiktų klaidų taisymas yra būtinas, bet nepakankamas žingsnis siekiant atitikti jūsų šalies įstatymą, perkeliantį EAA.

Automatinis prieinamumo patikrinimas (kaip šis Inkluzo) apima apie 30–50 % WCAG 2.1 AA taisyklių. Tikrinamos automatiškai aptinkamos klaidos — alternatyvūs tekstai, kontrastas, antraščių ir formų struktūra, ARIA atributai. Likusių 50–70 % kriterijų reikia rankinio vertinimo: tekstų suprantamumas, loginė fokuso tvarka, alternatyvių tekstų prasmingumas, realus valdymas klaviatūra.

Kiti vadovo straipsniai

Dažnai užduodami klausimai

Kiek klaidų yra normalu?
Daugelyje el. parduotuvių yra dešimtys iki šimtų automatiškai aptinkamų radinių. Svarbiau nei skaičius yra rimtumas — pirmiausia taisykite kritines ir rimtas klaidas.
Kaip žinoti, ką taisyti pirmiausia?
Sutelkite dėmesį į radinius, pažymėtus kaip kritiniai (critical) ir rimti (serious) — jie daro didžiausią poveikį neįgaliems vartotojams.
Ar pakanka ištaisyti automatiškai aptiktas klaidas?
Ne. Automatizavimas aptinka maždaug 30–50 % WCAG 2.1 AA taisyklių. Norint susidaryti išsamų vaizdą — ir atitikti jūsų šalies įstatymą, perkeliantį EAA — reikalingas rankinis auditas.

Norite patikrinti savo svetainės prieinamumą dabar?

Pradėti prieinamumo patikrinimą