# Problemy z dostępnością, które testujemy Każda strona omawia jeden problem wykrywany przez nasze testy automatyczne: co oznacza, z którym kryterium WCAG się wiąże, jak go naprawić na dowolnej stronie, w Shopify i w WooCommerce oraz jak sprawdzić poprawkę. ## Problemy z dostępnością - [Ukryty element ARIA nie może zawierać elementów przyjmujących fokus](https://www.fixreports.com/pl/issues/aria-hidden-focus): WCAG 4.1.2 · poziom A. Elementy, które mogą otrzymać fokus, są ukryte przed czytnikami ekranu, ale nadal można do nich dotrzeć klawiaturą. (Atrybuty i role ARIA) - [Atrybut autocomplete musi być użyty poprawnie](https://www.fixreports.com/pl/issues/autocomplete-valid): WCAG 1.3.5 · poziom AA. Pole formularza używa wartości autocomplete, której przeglądarki nie rozpoznają. (Pola formularzy bez etykiet) - [Przyciski muszą mieć odróżniający je tekst nazwy](https://www.fixreports.com/pl/issues/button-name): WCAG 4.1.2 · poziom A. Niektóre przyciski nie mają dostępnej nazwy, więc osoby korzystające z czytników ekranu słyszą tylko „przycisk”. (Linki i przyciski bez nazw) - [Elementy muszą mieć wystarczający kontrast kolorów](https://www.fixreports.com/pl/issues/color-contrast): WCAG 1.4.3 · poziom AA. Część tekstu nie odróżnia się wystarczająco od tła, by mogły go odczytać osoby słabowidzące. (Niski kontrast kolorów) - [Dokumenty muszą mieć element pomagający w nawigacji](https://www.fixreports.com/pl/issues/document-title): WCAG 2.4.2 · poziom A. Strona nie ma tytułu, więc użytkownicy nie wiedzą, na której stronie się znajdują. (Tytuły stron) - [Identyfikatory stosowane w ARIA i etykietach muszą być unikalne](https://www.fixreports.com/pl/issues/duplicate-id-aria): WCAG 4.1.2 · poziom A. Kilka elementów ma ten sam identyfikator (id), który służy do nadania etykiety lub opisu, więc technologie wspomagające mogą odczytać niewłaściwą etykietę. (Atrybuty i role ARIA) - [Ramki muszą mieć niepusty atrybut title](https://www.fixreports.com/pl/issues/frame-title): WCAG 4.1.2 · poziom A. Osadzona ramka (często mapa, film lub widżet aplikacji) nie ma tytułu, więc osoby korzystające z czytników ekranu nie wiedzą, co zawiera. (Struktura strony, nagłówki i punkty orientacyjne) - [Poziomy nagłówków powinny wzrastać tylko o jeden](https://www.fixreports.com/pl/issues/heading-order): Dobra praktyka dostępności. Poziomy nagłówków są pomijane (np. z H2 od razu na H4), przez co struktura strony jest niejasna dla osób korzystających z czytników ekranu. (Struktura strony, nagłówki i punkty orientacyjne) - [Element <html> musi mieć atrybut lang](https://www.fixreports.com/pl/issues/html-has-lang): WCAG 3.1.1 · poziom A. Strona nie deklaruje swojego języka, więc czytniki ekranu mogą odczytywać ją z błędną wymową. (Język strony) - [Element <html> musi mieć poprawną wartość atrybutu lang](https://www.fixreports.com/pl/issues/html-lang-valid): WCAG 3.1.1 · poziom A. Kod języka strony jest nieprawidłowy, więc czytniki ekranu nie mogą wybrać właściwego głosu. (Język strony) - [Obrazy muszą mieć tekst alternatywny](https://www.fixreports.com/pl/issues/image-alt): WCAG 1.1.1 · poziom A. Obrazy nie mają tekstu alternatywnego, więc osoby korzystające z czytników ekranu nie wiedzą, co przedstawiają. (Obrazy bez tekstu alternatywnego) - [Przyciski input type=button muszą mieć odróżniający je tekst](https://www.fixreports.com/pl/issues/input-button-name): WCAG 4.1.2 · poziom A. Przycisk typu input nie ma tekstu, więc czytniki ekranu nie mogą powiedzieć, do czego służy. (Pola formularzy bez etykiet) - [Przyciski graficzne muszą mieć tekst alternatywny](https://www.fixreports.com/pl/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · poziom A. Przycisk graficzny nie ma tekstu alternatywnego, więc czytniki ekranu nie mogą powiedzieć, do czego służy. (Obrazy bez tekstu alternatywnego) - [Element formularza musi mieć etykietę](https://www.fixreports.com/pl/issues/label): WCAG 4.1.2 · poziom A. Niektóre pola formularzy nie mają etykiet, więc osoby korzystające z czytników ekranu nie wiedzą, co wpisać. (Pola formularzy bez etykiet) - [Dokument może mieć tylko jeden obszar kluczowy main](https://www.fixreports.com/pl/issues/landmark-one-main): Dobra praktyka dostępności. Strona nie ma punktu orientacyjnego main, więc osoby korzystające z czytników ekranu nie mogą przejść bezpośrednio do treści. (Struktura strony, nagłówki i punkty orientacyjne) - [Łącza muszą być odróżnialne od sąsiadującego tekstu w sposób, który nie opiera się na kolorze](https://www.fixreports.com/pl/issues/link-in-text-block): WCAG 1.4.1 · poziom A. Linki w akapitach wyróżnia tylko kolor, więc osoby, które nie widzą różnicy kolorów, ich nie zauważają. (Niski kontrast kolorów) - [Łącza muszą mieć odróżniający je tekst](https://www.fixreports.com/pl/issues/link-name): WCAG 2.4.4, 4.1.2 · poziom A. Niektóre linki nie mają tekstu, który mógłby odczytać czytnik ekranu; często są to linki w postaci samych ikon, np. ikon mediów społecznościowych lub ikony koszyka. (Linki i przyciski bez nazw) - [Powiększanie i skalowanie nie może być wyłączone](https://www.fixreports.com/pl/issues/meta-viewport): WCAG 1.4.4 · poziom AA. Strona blokuje powiększanie gestem uszczypnięcia na urządzeniach mobilnych. (Powiększanie i dopasowanie do ekranu) - [Strona musi zawierać nagłówek poziomu 1](https://www.fixreports.com/pl/issues/page-has-heading-one): Dobra praktyka dostępności. Strona nie ma nagłówka najwyższego poziomu. (Struktura strony, nagłówki i punkty orientacyjne) - [Cała treść strony musi być zawarta w obszarach kluczowych](https://www.fixreports.com/pl/issues/region): Dobra praktyka dostępności. Część treści nie znajduje się w żadnym punkcie orientacyjnym strony (header, nav, main lub footer). (Struktura strony, nagłówki i punkty orientacyjne) - [Elementy z [role='img'] muszą mieć tekst alternatywny](https://www.fixreports.com/pl/issues/role-img-alt): WCAG 1.1.1 · poziom A. Element przedstawiony jako obraz nie ma tekstu alternatywnego. (Obrazy bez tekstu alternatywnego) - [Obszary przewijane muszą być osiągalne z klawiatury](https://www.fixreports.com/pl/issues/scrollable-region-focusable): WCAG 2.1.1 · poziom A. Do przewijanego obszaru nie da się dotrzeć klawiaturą, więc osoby korzystające z klawiatury nie mogą go przewinąć. (Dostęp z klawiatury i fokus) - [Element select musi mieć dostępną nazwę](https://www.fixreports.com/pl/issues/select-name): WCAG 4.1.2 · poziom A. Lista rozwijana (często wybór sortowania lub wariantu) nie ma etykiety. (Pola formularzy bez etykiet) - [Elementy svg z rolą img muszą mieć tekst alternatywny](https://www.fixreports.com/pl/issues/svg-img-alt): WCAG 1.1.1 · poziom A. Obraz SVG, który przekazuje informacje, nie ma tekstu alternatywnego. (Obrazy bez tekstu alternatywnego) - [Wszystkie cele dotykowe muszą mieć rozmiar 24px lub pozostawiać wystarczającą ilość miejsca wokół](https://www.fixreports.com/pl/issues/target-size): WCAG 2.5.8 · poziom AA. Niektóre elementy dotykowe są mniejsze niż 24 na 24 piksele i leżą zbyt blisko siebie, przez co trudno w nie trafić na telefonie. (Dostęp z klawiatury i fokus)