# Problémy s přístupností, které testujeme Každá stránka vysvětluje jeden problém, který naše automatické testy nacházejí: co znamená, ke kterému kritériu WCAG se vztahuje, jak ho opravit na jakémkoli webu, v Shopify a ve WooCommerce a jak opravu ověřit. ## Problémy s přístupností - [Prvek skrytý pomocí ARIA nesmí být fokusovatelný ani obsahovat fokusovatelné prvky](https://www.fixreports.com/cs/issues/aria-hidden-focus): WCAG 4.1.2 · úroveň A. Prvky, na které lze přesunout fokus, jsou skryté před čtečkami obrazovky, ale klávesnicí se k nim lze stále dostat. (Atributy a role ARIA) - [Atribut autocomplete musí být použit správně](https://www.fixreports.com/cs/issues/autocomplete-valid): WCAG 1.3.5 · úroveň AA. Pole formuláře používá hodnotu autocomplete, kterou prohlížeče nerozpoznají. (Pole formuláře bez popisků) - [Tlačítka musí mít rozpoznatelný text](https://www.fixreports.com/cs/issues/button-name): WCAG 4.1.2 · úroveň A. Některá tlačítka nemají přístupný název, takže uživatelé čteček obrazovky slyší jen „tlačítko“. (Odkazy a tlačítka bez názvu) - [Prvky musí splňovat prahové hodnoty minimálního kontrastního poměru barev](https://www.fixreports.com/cs/issues/color-contrast): WCAG 1.4.3 · úroveň AA. Část textu se dostatečně neodlišuje od pozadí, takže ji lidé se slabým zrakem nepřečtou. (Nízký barevný kontrast) - [Dokumenty musí mít prvek , který usnadňuje navigaci](https://www.fixreports.com/cs/issues/document-title): WCAG 2.4.2 · úroveň A. Stránka nemá titulek, takže uživatelé nepoznají, na které stránce jsou. (Titulky stránek) - [ID používaná v ARIA a v popiscích musí být jedinečná](https://www.fixreports.com/cs/issues/duplicate-id-aria): WCAG 4.1.2 · úroveň A. Několik prvků sdílí stejné id, které něco pojmenovává nebo popisuje, takže asistivní technologie může přečíst nesprávný popisek. (Atributy a role ARIA) - [Rámce musí mít přístupný název](https://www.fixreports.com/cs/issues/frame-title): WCAG 4.1.2 · úroveň A. Vložený rámec (často mapa, video nebo widget aplikace) nemá titulek, takže uživatelé čteček obrazovky nevědí, co obsahuje. (Struktura stránky, nadpisy a orientační oblasti) - [Úrovně nadpisů by se měly zvyšovat jen o jednu](https://www.fixreports.com/cs/issues/heading-order): Osvědčený postup přístupnosti. Úrovně nadpisů přeskakují (například z H2 na H4), takže struktura stránky je pro uživatele čteček obrazovky matoucí. (Struktura stránky, nadpisy a orientační oblasti) - [Prvek <html> musí mít atribut lang](https://www.fixreports.com/cs/issues/html-has-lang): WCAG 3.1.1 · úroveň A. Stránka neuvádí svůj jazyk, takže ji čtečky obrazovky mohou číst se špatnou výslovností. (Jazyk stránky) - [Prvek <html> musí mít platnou hodnotu atributu lang](https://www.fixreports.com/cs/issues/html-lang-valid): WCAG 3.1.1 · úroveň A. Kód jazyka stránky není platný, takže čtečky obrazovky nedokážou zvolit správný hlas. (Jazyk stránky) - [Obrázky musí mít alternativní text](https://www.fixreports.com/cs/issues/image-alt): WCAG 1.1.1 · úroveň A. Obrázkům chybí textová alternativa, takže uživatelé čteček obrazovky nevědí, co zobrazují. (Obrázky bez textové alternativy) - [Vstupní tlačítka musí mít rozpoznatelný text](https://www.fixreports.com/cs/issues/input-button-name): WCAG 4.1.2 · úroveň A. Tlačítko input nemá text, takže čtečky obrazovky nedokážou říct, co dělá. (Pole formuláře bez popisků) - [Obrázková tlačítka musí mít alternativní text](https://www.fixreports.com/cs/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · úroveň A. Obrázkové tlačítko nemá alternativní text, takže čtečky obrazovky nedokážou říct, co dělá. (Obrázky bez textové alternativy) - [Prvky formuláře musí mít popisky](https://www.fixreports.com/cs/issues/label): WCAG 4.1.2 · úroveň A. Některá pole formuláře nemají popisek, takže uživatelé čteček obrazovky nevědí, co mají zadat. (Pole formuláře bez popisků) - [Dokument by měl mít jednu orientační oblast main](https://www.fixreports.com/cs/issues/landmark-one-main): Osvědčený postup přístupnosti. Stránka nemá orientační oblast main, takže uživatelé čteček obrazovky nemohou přeskočit rovnou na obsah. (Struktura stránky, nadpisy a orientační oblasti) - [Odkazy musí být rozpoznatelné bez spoléhání na barvu](https://www.fixreports.com/cs/issues/link-in-text-block): WCAG 1.4.1 · úroveň A. Odkazy v odstavcích se odlišují jen barvou, takže je lidé, kteří rozdíl v barvě nevidí, přehlédnou. (Nízký barevný kontrast) - [Odkazy musí mít rozpoznatelný text](https://www.fixreports.com/cs/issues/link-name): WCAG 2.4.4, 4.1.2 · úroveň A. Některé odkazy nemají text, který by čtečka obrazovky mohla oznámit; často jde o odkazy tvořené jen ikonou, například ikony sociálních sítí nebo ikona košíku. (Odkazy a tlačítka bez názvu) - [Přibližování a zvětšování nesmí být vypnuté](https://www.fixreports.com/cs/issues/meta-viewport): WCAG 1.4.4 · úroveň AA. Stránka na mobilu blokuje přiblížení dvěma prsty. (Zvětšení a přeformátování) - [Stránka by měla obsahovat nadpis první úrovně](https://www.fixreports.com/cs/issues/page-has-heading-one): Osvědčený postup přístupnosti. Stránka nemá nadpis nejvyšší úrovně. (Struktura stránky, nadpisy a orientační oblasti) - [Veškerý obsah stránky by měl být uvnitř orientačních oblastí](https://www.fixreports.com/cs/issues/region): Osvědčený postup přístupnosti. Část obsahu není uvnitř žádné orientační oblasti stránky (header, nav, main nebo footer). (Struktura stránky, nadpisy a orientační oblasti) - [Prvky [role="img"] a [role="image"] musí mít alternativní text](https://www.fixreports.com/cs/issues/role-img-alt): WCAG 1.1.1 · úroveň A. Prvek prezentovaný jako obrázek nemá textovou alternativu. (Obrázky bez textové alternativy) - [Posuvná oblast musí být přístupná klávesnicí](https://www.fixreports.com/cs/issues/scrollable-region-focusable): WCAG 2.1.1 · úroveň A. K posuvné oblasti se nelze dostat klávesnicí, takže ji uživatelé klávesnice nemohou posouvat. (Ovládání klávesnicí a fokus) - [Prvek select musí mít přístupný název](https://www.fixreports.com/cs/issues/select-name): WCAG 4.1.2 · úroveň A. Rozbalovací seznam (často řazení nebo výběr varianty) nemá popisek. (Pole formuláře bez popisků) - [Prvky <svg> s rolí img nebo image musí mít alternativní text](https://www.fixreports.com/cs/issues/svg-img-alt): WCAG 1.1.1 · úroveň A. Obrázek SVG, který nese informaci, nemá textovou alternativu. (Obrázky bez textové alternativy) - [Všechny dotykové cíle musí mít velikost 24 px, nebo kolem sebe dostatek prostoru](https://www.fixreports.com/cs/issues/target-size): WCAG 2.5.8 · úroveň AA. Některé cíle pro klepnutí jsou menší než 24 × 24 pixelů a jsou příliš blízko sebe, takže se do nich na telefonu těžko trefuje. (Ovládání klávesnicí a fokus)