Reguły dostępności, które sprawdzamy

Poziom, na którym opierają się EN 301 549, EAA, BFSG i ADA. Każdy taki problem liczy się w raporcie.

• Poważne WCAG 2.4.4 A

  Klikalne obszary obrazka nie mają opisu

  Strona używa mapy obrazka (jednej grafiki podzielonej na kilka klikalnych obszarów), a niektóre obszary nie mają tekstu mówiącego, dokąd prowadzą.

  area-alt

• Umiarkowane WCAG 4.1.2 A

  Atrybuty dostępności użyte w niewłaściwych elementach

  Niektóre elementy strony mają atrybuty dostępności, które nie są dozwolone dla danego typu elementu.

  aria-allowed-attr

• Umiarkowane WCAG 4.1.2 A

  Niektóre elementy mają etykietę dla brajla, ale nie mają zwykłej nazwy

  Niektóre elementy mają etykietę przeznaczoną tylko dla monitorów brajlowskich (aria-braillelabel lub aria-brailleroledescription), ale brakuje zwykłej etykiety lub opisu, który powinna uzupełniać.

  aria-braille-equivalent

• Krytyczne WCAG 4.1.2 A

  Niestandardowe przyciski nie mają nazwy

  Niektóre elementy działające jak przyciski, linki lub pozycje menu zostały zbudowane od podstaw i nie mają czytelnej nazwy.

  aria-command-name

• Umiarkowane WCAG 4.1.2 A

  Atrybuty dostępności użyto w niewłaściwej sytuacji

  Niektóre elementy mają atrybuty dostępności, które dla ich typu są dozwolone tylko w określonych warunkach, np. aria-checked na prawdziwym polu wyboru lub atrybuty tabeli drzewiastej na zwykłym wierszu tabeli.

  aria-conditional-attr

• Drobne WCAG 4.1.2 A

  Niektóre elementy używają przestarzałych ról dostępności

  Niektóre elementy mają role, które standard dostępności WAI-ARIA uznał za przestarzałe, np. role="directory".

  aria-deprecated-role

• Krytyczne WCAG 1.3.1 A

  Cała strona jest ukryta przed czytnikami ekranu

  Element <body> strony ma aria-hidden="true", co nakazuje czytnikom ekranu pominąć całą jego zawartość.

  aria-hidden-body

• Poważne WCAG 4.1.2 A

  Ukryte elementy nadal są dostępne z klawiatury

  Niektóre części strony są ukryte przed czytnikami ekranu, ale nadal można na nie przejść klawiaturą.

  aria-hidden-focus

• Krytyczne WCAG 4.1.2 A

  Niestandardowe pola formularza nie mają etykiety

  Niektóre pola zbudowane od podstaw, np. wyszukiwarka lub wybór kraju, nie mają nazwy, którą mogą odczytać technologie wspomagające.

  aria-input-field-name

• Umiarkowane WCAG 1.1.1 A

  Niektóre wskaźniki poziomu nie mają nazwy

  Niektóre elementy oznaczone jako wskaźnik poziomu (meter, np. siła hasła, stan magazynowy lub ocena) nie mają tekstu mówiącego, co mierzą.

  aria-meter-name

• Umiarkowane WCAG 1.1.1 A

  Niektóre paski postępu nie mają nazwy

  Niektóre elementy oznaczone jako pasek postępu nie mają tekstu mówiącego, co pokazują, np. „brakuje 80 zł do darmowej dostawy”, kroki zamówienia lub wskaźnik ładowania.

  aria-progressbar-name

• Umiarkowane WCAG 4.1.2 A

  Niektóre etykiety są tam, gdzie czytniki ekranu je pomijają

  Niektóre elementy mają atrybuty dostępności niedozwolone dla ich typu, najczęściej aria-label na zwykłym <div> lub <span> bez roli.

  aria-prohibited-attr

• Poważne WCAG 4.1.2 A

  Niestandardowym kontrolkom brakuje wymaganych informacji

  Niektóre niestandardowe kontrolki mają przypisaną rolę, ale brakuje im informacji, której ta rola wymaga, np. czy lista rozwijana jest otwarta.

  aria-required-attr

• Poważne WCAG 1.3.1 A

  Niestandardowe menu lub listy są zbudowane nieprawidłowo

  Niektóre niestandardowe komponenty, np. menu, zakładki lub listy wyboru, nie zawierają elementów, które powinny się w nich znajdować.

  aria-required-children

• Umiarkowane WCAG 1.3.1 A

  Niestandardowe pozycje menu lub zakładki są poza swoją grupą

  Niektóre niestandardowe elementy, np. pozycje menu, zakładki lub opcje, nie znajdują się w grupie, do której należą.

  aria-required-parent

• Poważne WCAG 4.1.2 A

  Niektóre elementy mają rolę, która nie istnieje

  Niektóre elementy mają atrybut role z literówką, wymyśloną lub abstrakcyjną wartością, więc technologie wspomagające nie rozpoznają, czym są.

  aria-roles

• Poważne WCAG 4.1.2 A

  Niektóre przełączniki i pola wyboru nie mają nazwy

  Niektóre własne przełączniki (pola wyboru, przełączniki, przyciski opcji lub opcje menu zbudowane z rolami ARIA) nie mają czytelnej etykiety.

  aria-toggle-field-name

• Umiarkowane WCAG 4.1.2 A

  Niektóre podpowiedzi są puste

  Niektóre elementy oznaczone jako podpowiedzi (role="tooltip") nie zawierają czytelnego tekstu.

  aria-tooltip-name

• Poważne WCAG 4.1.2 A

  Atrybuty dostępności zawierają literówki

  Niektóre atrybuty zaczynają się od „aria-”, ale nie są prawdziwymi atrybutami ARIA, zwykle z powodu literówki.

  aria-valid-attr

• Poważne WCAG 4.1.2 A

  Atrybuty dostępności mają nieprawidłowe wartości

  Niektóre atrybuty dostępności w kodzie mają niedozwolone wartości albo wskazują na elementy, których nie ma na stronie.

  aria-valid-attr-value

• Umiarkowane WCAG 1.3.5 AA

  Pola w kasie nie wypełniają się automatycznie

  Niektóre pola formularzy mają nieprawidłowe lub niepasujące wartości autouzupełniania, więc przeglądarka nie może ich wypełnić.

  autocomplete-valid

• Umiarkowane WCAG 1.4.12 AA

  Odstępów w tekście nie da się zmienić

  W części tekstu interlinia, odstępy między literami lub słowami są zablokowane przez !important w atrybucie style, więc czytelnicy nie mogą ich zmienić własnymi ustawieniami.

  avoid-inline-spacing

• Drobne WCAG 2.2.2 A

  Strona zawiera przestarzały kod migającego tekstu

  Na stronie jest stary element <blink>, który miał sprawiać, że tekst miga.

  blink

• Krytyczne WCAG 4.1.2 A

  Niektóre przyciski nie mają nazwy

  Niektóre przyciski nie mają czytelnej etykiety, np. przycisk „dodaj do koszyka”, wyszukiwania lub menu w postaci samej ikony.

  button-name

• Poważne WCAG 2.4.1 A

  Brakuje szybkiego przejścia do głównej treści

  Na stronie nie ma linku pomijającego, nagłówka ani obszaru main, które pozwoliłyby osobom korzystającym z klawiatury i czytników ekranu przeskoczyć nagłówek i menu.

  bypass

• Poważne WCAG 1.4.3 AA

  Tekst jest trudny do odczytania z powodu niskiego kontrastu

  Część tekstu jest zbyt jasna w stosunku do tła, np. szary tekst na białym tle lub biały tekst na bladym przycisku.

  color-contrast

• Poważne WCAG 1.3.4 AA

  Strona działa tylko w jednej orientacji ekranu

  Style strony wymuszają tylko orientację pionową albo poziomą, więc gdy telefon lub tablet jest trzymany inaczej, treść się obraca, zostaje ucięta lub znika.

  css-orientation-lock

• Drobne WCAG 1.3.1 A

  Lista nazw i wartości jest zbudowana nieprawidłowo

  Lista opisowa (<dl>), często używana do parametrów produktu lub wybranych opcji, zawiera elementy w złym miejscu lub w złej kolejności.

  definition-list

• Drobne WCAG 1.3.1 A

  Nazwa lub wartość znajduje się poza swoją listą

  Element <dt> lub <dd> (nazwa lub wartość, często w parametrach produktu) nie znajduje się w liście opisowej <dl>.

  dlitem

• Umiarkowane WCAG 2.4.2 A

  Strona nie ma tytułu

  Strona nie ma tytułu w kodzie, więc karty przeglądarki, zakładki i czytniki ekranu nie pokazują nic przydatnego.

  document-title

• Poważne WCAG 4.1.2 A

  Niektóre etykiety wskazują niewłaściwy element

  Kilka elementów ma ten sam id, a ten id służy do powiązania etykiety, opisu lub komunikatu o błędzie z polem albo kontrolką.

  duplicate-id-aria

• Umiarkowane WCAG 3.3.2 A

  Niektóre pola formularzy mają kilka etykiet

  Pole formularza, np. e-mail, ilość lub adres, jest powiązane z dwoma lub więcej elementami <label>.

  form-field-multiple-labels

• Poważne WCAG 2.1.1 A

  Użytkownicy klawiatury nie mogą dotrzeć do osadzonej treści

  Osadzona ramka (iframe) zawiera linki, przyciski lub pola formularza, ale sama ramka ma ustawione tabindex="-1", co wyłącza ją z kolejności nawigacji klawiaturą.

  frame-focusable-content

• Umiarkowane WCAG 4.1.2 A

  Osadzona treść nie ma nazwy

  Osadzona ramka, np. film, mapa, czat lub widżet płatności, nie ma tytułu opisującego jej zawartość.

  frame-title

• Umiarkowane WCAG 4.1.2 A

  Kilka osadzonych ramek ma tę samą nazwę

  Dwie lub więcej osadzonych ramek (iframe) na stronie ma ten sam title, choć pokazują różne treści, np. kilka filmów produktowych o nazwie „YouTube video player”.

  frame-title-unique

• Poważne WCAG 3.1.1 A

  Strona nie określa, w jakim jest języku

  Strona nie deklaruje swojego języka, więc technologie wspomagające muszą zgadywać, jak wymawiać tekst.

  html-has-lang

• Poważne WCAG 3.1.1 A

  Ustawienie języka strony jest nieprawidłowe

  Strona deklaruje kod języka, który nie istnieje, np. z literówką lub wymyśloną wartością.

  html-lang-valid

• Umiarkowane WCAG 3.1.1 A

  Strona deklaruje dwa różne języki

  Znacznik <html> strony ma zarówno atrybut lang, jak i xml:lang, a wskazują one różne języki, np. lang="de" i xml:lang="en".

  html-xml-lang-mismatch

• Poważne WCAG 1.1.1 A

  Zdjęcia nie mają opisu tekstowego

  Niektóre obrazy nie mają tekstu alternatywnego, więc osoby, które ich nie widzą, nie dowiadują się, co przedstawiają.

  image-alt

• Krytyczne WCAG 4.1.2 A

  Niektóre przyciski formularzy nie mają nazwy

  Niektóre przyciski utworzone przez <input type="button">, "submit" lub "reset" nie mają czytelnego tekstu, np. przycisk wyszukiwania lub zapisu do newslettera z samą ikoną albo pustym value.

  input-button-name

• Krytyczne WCAG 1.1.1 A

  Przycisk graficzny nie ma opisu tekstowego

  Przycisk w postaci obrazka nie ma tekstu alternatywnego, więc nie wiadomo, do czego służy.

  input-image-alt

• Krytyczne WCAG 4.1.2 A

  Pola formularza nie mają etykiet

  Niektóre pola formularza nie mają etykiety, którą mogą odczytać technologie wspomagające, więc nie wiadomo, co należy w nie wpisać.

  label

• Umiarkowane WCAG 2.5.3 A

  Ukryta nazwa przycisków różni się od widocznego tekstu

  Niektóre przyciski lub linki pokazują na ekranie jeden tekst, ale mają inną ukrytą nazwę (aria-label), która nie zawiera widocznych słów, np. przycisk „Kup teraz” o nazwie „Wyślij”.

  label-content-name-mismatch

• Umiarkowane WCAG 1.4.1 A

  Linki w tekście wyglądają jak zwykły tekst

  Niektóre linki w akapitach wyróżnia tylko zmiana koloru, bez podkreślenia ani innego widocznego oznaczenia.

  link-in-text-block

• Poważne WCAG 2.4.4 A

  Niektóre linki nie mówią, dokąd prowadzą

  Niektóre linki nie mają czytelnego tekstu, często są to ikony, np. koszyk, serce lub logo bez opisu.

  link-name

• Drobne WCAG 1.3.1 A

  Lista jest zbudowana nieprawidłowo

  Lista punktowana lub numerowana zawiera elementy, które nie powinny znajdować się bezpośrednio w liście.

  list

• Drobne WCAG 1.3.1 A

  Element listy znajduje się poza listą

  Element oznaczony jako pozycja listy nie znajduje się w liście, więc jego struktura zostaje utracona.

  listitem

• Umiarkowane WCAG 2.2.2 A

  Część tekstu przewija się i nie da się jej zatrzymać

  Strona używa przestarzałego elementu <marquee>, zwykle przewijanego paska typu „Darmowa dostawa od 200 zł” lub zapowiedzi wyprzedaży.

  marquee

• Poważne WCAG 2.2.1 A

  Strona sama się odświeża lub przekierowuje

  Strona używa <meta http-equiv="refresh"> z opóźnieniem, więc po kilku sekundach lub minutach sama się przeładowuje albo przechodzi pod inny adres bez działania klienta.

  meta-refresh

• Poważne WCAG 1.4.4 AA

  Na telefonie nie można powiększyć strony

  Strona nakazuje przeglądarkom mobilnym blokować lub ograniczać powiększanie gestem.

  meta-viewport

• Poważne WCAG 4.1.2 A

  Klikalne elementy są zagnieżdżone jeden w drugim

  Niektóre klikalne elementy znajdują się wewnątrz innych klikalnych elementów, np. przycisk listy życzeń w klikalnej karcie produktu.

  nested-interactive

• Umiarkowane WCAG 1.4.2 A

  Niektóre filmy lub dźwięki włączają się same z dźwiękiem

  Element wideo lub audio zaczyna się odtwarzać samoczynnie i z dźwiękiem, np. film w banerze głównym, film produktowy lub muzyka w tle, a jego zatrzymanie może być trudne.

  no-autoplay-audio

• Umiarkowane WCAG 1.1.1 A

  Niektóre osadzone pliki lub multimedia nie mają opisu tekstowego

  Treść osadzona za pomocą znacznika <object>, np. tabela rozmiarów w PDF, katalog, interaktywna przeglądarka lub starsze multimedia, nie ma tekstu, który wyjaśnia, czym jest.

  object-alt

• Umiarkowane WCAG 1.3.1 A

  Niektóre nagłówki to tylko pogrubiony lub duży tekst

  Niektóre akapity wyglądają jak nagłówki, bo są pogrubione, pochylone lub większe, ale w kodzie to zwykły tekst, a nie prawdziwe nagłówki.

  p-as-heading

• Umiarkowane WCAG 1.1.1 A

  Niektóre grafiki nie mają opisu tekstowego

  Niektóre elementy są oznaczone jako obrazy, ale nie mają tekstu alternatywnego, np. gwiazdki ocen lub ikony.

  role-img-alt

• Poważne WCAG 2.1.1 A

  Niektórych przewijanych obszarów nie da się obsłużyć klawiaturą

  Niektóre ramki na stronie są przewijane, ale osoby korzystające z klawiatury nie mogą do nich przejść, aby je przewinąć.

  scrollable-region-focusable

• Krytyczne WCAG 4.1.2 A

  Lista rozwijana nie ma etykiety

  Lista rozwijana nie ma etykiety, którą mogą odczytać technologie wspomagające.

  select-name

• Drobne WCAG 2.1.1 A

  Klikalny obraz działa tylko z myszą

  Strona korzysta z mapy obrazu po stronie serwera: obrazu-linku, w którym serwer na podstawie dokładnego miejsca kliknięcia decyduje, co otworzyć, np. stara mapa sklepów stacjonarnych lub klikalna grafika katalogu.

  server-side-image-map

• Poważne WCAG 4.1.2 A

  Niektóre rozwijane sekcje nie mają nazwy

  Klikalny nagłówek rozwijanej sekcji (element <summary>) nie ma czytelnego tekstu, np. akordeon ze szczegółami produktu, grupa filtrów, pytanie w FAQ lub menu otwierane ikoną.

  summary-name

• Umiarkowane WCAG 1.1.1 A

  Niektóre grafiki wektorowe nie mają opisu tekstowego

  Niektóre grafiki SVG, np. logo, ikony lub plakietki, są oznaczone jako obrazy, ale nie mają tekstu alternatywnego.

  svg-img-alt

• Drobne WCAG 1.3.1 A

  Tytuł tabeli jest wpisany w komórkę tabeli

  Tabela danych, np. tabela rozmiarów lub cennik, ma tytuł w scalonym pierwszym wierszu komórek zamiast we właściwym podpisie tabeli.

  table-fake-caption

• Umiarkowane WCAG 2.5.8 AA

  Przyciski i linki są za małe, by wygodnie je dotknąć

  Niektóre przyciski lub linki są mniejsze niż 24 na 24 piksele i znajdują się zbyt blisko sąsiednich elementów.

  target-size

• Umiarkowane WCAG 1.3.1 A

  Duże tabele mają komórki bez nagłówków

  Większa tabela danych (ponad 3 na 3 komórki), np. tabela rozmiarów, specyfikacji lub kosztów dostawy, nie ma komórek nagłówkowych, więc wartości nie są powiązane z tym, co oznaczają.

  td-has-header

• Umiarkowane WCAG 1.3.1 A

  Niektóre komórki tabeli wskazują niewłaściwe nagłówki

  Tabela, np. tabela rozmiarów, specyfikacji lub kosztów dostawy, łączy komórki z nagłówkami za pomocą atrybutu headers, ale część tych powiązań nie wskazuje komórek nagłówkowych tej samej tabeli.

  td-headers-attr

• Umiarkowane WCAG 1.3.1 A

  Niektóre nagłówki tabeli nie opisują żadnych danych

  Tabela zawiera komórki nagłówkowe (<th>), które nie są powiązane z żadnymi komórkami danych, np. pusty wiersz nagłówków w tabeli rozmiarów lub tabela, w której <th> służy tylko do pogrubienia tekstu.

  th-has-data-cells

• Umiarkowane WCAG 3.1.2 AA

  Część tekstu ma błędny kod języka

  Fragment strony, np. przełącznik języków, cytat lub blok tekstu w innym języku, ma kod języka, który nie istnieje, np. „ua” zamiast „uk” albo kod z literówką.

  valid-lang

• Poważne WCAG 1.2.2 A

  Filmy nie mają napisów

  Film na stronie, np. prezentacja produktu, film wizerunkowy marki lub krótki poradnik, nie ma ścieżki napisów.

  video-caption

Najwyższy poziom WCAG. Przepisy go nie wymagają; w raporcie pokazywany jako zalecenia.

• Drobne WCAG 1.4.6 AAA

  Tekst nie osiąga podwyższonego kontrastu (AAA)

  Część tekstu spełnia podstawowy poziom kontrastu, ale nie surowszy: 7:1 dla zwykłego tekstu i 4.5:1 dla dużego. To zalecana praktyka wykraczająca poza WCAG AA, a nie wymóg.

  color-contrast-enhanced

• Drobne WCAG 2.4.9 AAA

  Linki o tym samym tekście prowadzą w różne miejsca

  Kilka linków na stronie ma ten sam tekst, na przykład „Czytaj więcej” lub „Kup teraz”, ale prowadzi do różnych stron. To zalecenie poziomu AAA WCAG, wykraczające poza poziom AA, na którym opiera się prawo.

  identical-links-same-purpose

• Drobne WCAG 2.2.4 AAA

  Strona sama się odświeża po czasie, nawet długim

  Strona używa <meta http-equiv="refresh">, aby po pewnym czasie przeładować się lub przejść pod inny adres. Unikanie każdego odświeżania z opóźnieniem, nawet wielogodzinnym, to zalecenie poziomu AAA WCAG, wykraczające poza poziom AA, na którym opiera się prawo.

  meta-refresh-no-exceptions

To nie wymagania WCAG, ale ułatwiają korzystanie z czytnikiem ekranu lub klawiaturą. Pokazywane jako zalecenia.

• Drobne

  Kilka elementów ma ten sam skrót klawiszowy

  Strona definiuje skróty klawiszowe atrybutem accesskey, a dwa lub więcej elementów ma ten sam klawisz. To zalecana praktyka, a nie wymóg WCAG na poziomie AA.

  accesskeys

• Drobne

  Element ma rolę, która do niego nie pasuje

  Element HTML ma atrybut role niedozwolony dla tego elementu, na przykład <button> oznaczony jako nagłówek albo menu <nav> oznaczone jako przycisk. To zalecana praktyka, a nie samodzielny wymóg WCAG na poziomie AA, ale często wskazuje na inne problemy.

  aria-allowed-role

• Umiarkowane

  Wyskakujące okno nie ma nazwy

  Okno dialogowe, takie jak wysuwany koszyk, baner cookie, pop-up newslettera czy szybki podgląd produktu, ma role="dialog" lub role="alertdialog", ale nie ma dostępnej nazwy. To zalecana praktyka, a nie samodzielny wymóg WCAG na poziomie AA.

  aria-dialog-name

• Umiarkowane

  Blok tekstu ukrywa linki lub przyciski w środku

  Element z role="text" zawiera link, przycisk lub inny element, który może otrzymać fokus. role="text" to niestandardowa rola, która każe niektórym czytnikom ekranu czytać całą zawartość jako zwykły tekst. To zalecana praktyka, a nie wymóg WCAG na poziomie AA.

  aria-text

• Umiarkowane

  Pozycje menu drzewiastego nie mają nazwy

  Niektóre pozycje menu w formie drzewa, na przykład rozwijanego drzewa kategorii, nie mają tekstu, który mogą odczytać technologie wspomagające. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.

  aria-treeitem-name

• Drobne

  Nagłówek na stronie jest pusty

  Strona zawiera nagłówek bez czytelnego tekstu, często pozostałość po pustym tytule sekcji, bloku motywu lub nagłówku złożonym tylko z ikony. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.

  empty-heading

• Drobne

  Komórka nagłówka tabeli jest pusta

  Tabela ma komórkę nagłówka bez tekstu, na przykład lewy górny róg tabeli rozmiarów lub kolumnę z przyciskami akcji. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.

  empty-table-header

• Drobne

  Element dostępny z klawiatury nie informuje, czym jest

  Element, do którego można dojść klawiszem Tab, np. klikalny div lub span, nie ma roli informującej technologie wspomagające, że jest przyciskiem, linkiem lub innym elementem sterującym. axe oznacza tę kontrolę jako eksperymentalną, więc wyniki trzeba sprawdzić ręcznie. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.

  focus-order-semantics

• Umiarkowane

  Poziomy nagłówków przeskakują

  Nagłówki na stronie przeskakują poziomy, np. z <h2> od razu do <h4>, przez co w strukturze strony powstają luki. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.

  heading-order

• Drobne

  Opis obrazu powtarza tekst obok

  Tekst alternatywny obrazu jest taki sam jak widoczny tekst obok, np. zdjęcie produktu z tekstem alternatywnym „Niebieska lniana koszula” w linku, który także brzmi „Niebieska lniana koszula”. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.

  image-redundant-alt

• Poważne

  Pola formularza nie mają widocznej etykiety

  Niektóre pola formularza są opisane tylko podpowiedzią (atrybut title), ukrytym opisem lub ukrytą etykietą, więc na ekranie nie widać żadnej etykiety. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.

  label-title-only

• Drobne

  Nagłówek strony jest umieszczony w innym obszarze strony

  Obszar nagłówka (punkt orientacyjny „banner” z logo, wyszukiwarką i koszykiem) jest zagnieżdżony w innym obszarze, na przykład w treści głównej lub nawigacji, zamiast stać osobno na górze strony. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.

  landmark-banner-is-top-level

• Drobne

  Panel boczny jest umieszczony w innym obszarze strony

  Element <aside> lub obszar uzupełniający („complementary”), na przykład panel filtrów, podobne produkty lub blok promocyjny, jest zagnieżdżony w innym obszarze zamiast stać osobno obok treści głównej. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.

  landmark-complementary-is-top-level

• Drobne

  Stopka strony jest umieszczona w innym obszarze strony

  Obszar stopki (punkt orientacyjny „contentinfo” z kontaktem, linkami prawnymi i informacjami o płatnościach) jest zagnieżdżony w innym obszarze, na przykład w treści głównej, zamiast stać osobno na dole strony. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.

  landmark-contentinfo-is-top-level

• Umiarkowane

  Treść główna jest umieszczona w innym obszarze strony

  Element <main> lub obszar z role="main", który oznacza początek właściwej treści strony, jest zagnieżdżony w innym obszarze, na przykład w nagłówku, nawigacji lub panelu bocznym. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.

  landmark-main-is-top-level

• Umiarkowane

  Strona ma więcej niż jeden nagłówek serwisu

  Strona zawiera dwa lub więcej obszarów nagłówka („banner”), na przykład zwykły nagłówek oraz osobną kopię przyklejaną lub mobilną albo pasek promocyjny oznaczony jako banner. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.

  landmark-no-duplicate-banner

• Drobne

  Strona ma więcej niż jedną główną stopkę

  Strona oznacza kilka obszarów jako stopkę serwisu, na przykład stopkę sklepu i drugą stopkę w wyskakującym oknie lub widżecie. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.

  landmark-no-duplicate-contentinfo

• Umiarkowane

  Strona ma więcej niż jeden obszar głównej treści

  Dwie lub więcej części strony oznaczono jako główną treść. Taki obszar powinien być tylko jeden. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.

  landmark-no-duplicate-main

• Umiarkowane

  Na stronie nie oznaczono głównej treści

  Żadna część strony nie jest oznaczona jako główna treść, więc technologie wspomagające nie wiedzą, gdzie zaczyna się to, co najważniejsze. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.

  landmark-one-main

• Drobne

  Dwa obszary strony brzmią dla czytnika ekranu tak samo

  Strona ma kilka obszarów tego samego typu, na przykład dwa menu lub dwa panele boczne, bez etykiety, która je rozróżnia. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.

  landmark-unique

• Drobne

  Powiększanie na urządzeniach mobilnych jest mocno ograniczone

  Strona pozwala powiększać widok na telefonie, ale zatrzymuje odwiedzającego, zanim powiększy go pięciokrotnie. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.

  meta-viewport-large

• Umiarkowane

  Strona nie ma głównego nagłówka

  Strona nie ma nagłówka najwyższego poziomu (H1), który nazywa jej temat, na przykład nazwy produktu lub kategorii. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.

  page-has-heading-one

• Drobne

  Element dekoracyjny i tak jest odczytywany przez czytniki ekranu

  Element oznaczony jako dekoracyjny (role="presentation" lub role="none") ma też atrybuty ARIA albo może otrzymać fokus z klawiatury, więc jedne czytniki ekranu go pomijają, a inne nie. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

  presentation-role-conflict

• Drobne

  Część treści znajduje się poza głównymi obszarami strony

  Niektóre fragmenty strony nie są umieszczone w punktach orientacyjnych (landmarks), takich jak nagłówek, nawigacja, treść główna czy stopka. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

  region

• Drobne

  Nagłówki tabeli niepoprawnie używają atrybutu scope

  Tabela używa atrybutu scope w niewłaściwy sposób, np. na zwykłej komórce z danymi albo z wartością inną niż row, col, rowgroup lub colgroup. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

  scope-attr-valid

• Umiarkowane

  Link „Przejdź do treści” nie działa

  Strona ma link pomijający, ale miejsce, do którego prowadzi, nie istnieje albo nie może otrzymać fokusu. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

  skip-link

• Poważne

  Kolejność poruszania się klawiaturą jest wymuszona i nieoczekiwana

  Niektóre elementy mają tabindex o wartości większej niż 0, przez co otrzymują fokus przed wszystkimi innymi, gdy ktoś porusza się po stronie klawiszem Tab. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

  tabindex

• Drobne

  Podpis i streszczenie tabeli powtarzają ten sam tekst

  Tabela ma ten sam tekst w elemencie <caption> i w atrybucie summary, więc czytniki ekranu mogą odczytać go dwa razy. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.

  table-duplicate-name