Materiały

Każde sprawdzenie, które wykonujemy, i co robić, gdy zawiedzie

75 sprawdzeń odpowiada kryterium sukcesu WCAG. Kolejne 30 to dobre praktyki, których nie wymaga żadne kryterium — zgłaszamy je osobno, żeby rozmowa o zgodności pozostała rozmową o zgodności.

Napędzane przez axe-core 4.13.0 · © Deque Systems, MPL-2.0

ARIA

krytycznyaria-allowed-attrElementy mogą używać tylko dozwolonych atrybutów ARIA.4.1.2

krytycznyaria-hidden-bodyElement body nie może mieć atrybutu aria-hidden='true'.1.3.1, 4.1.2

krytycznyaria-required-attrWymagane atrybuty ARIA muszą istnieć.4.1.2

krytycznyaria-required-childrenNiektóre role ARIA muszą obejmować określone dzieci.1.3.1

krytycznyaria-required-parentElementy z niektórymi atrybutami role ARIA muszą znajdować się wewnątrz nadrzędnego elementu rodzica z wymaganym atrybutem role.1.3.1

krytycznyaria-rolesStosowane role ARIA muszą mieć poprawne wartości.4.1.2

krytycznyaria-valid-attrAtrybuty ARIA muszą mieć poprawne nazwy.4.1.2

krytycznyaria-valid-attr-valueAtrybuty ARIA muszą mieć poprawne wartości.4.1.2

poważnyaria-braille-equivalentAtrybuty aria-braille muszą mieć odpowiednik niebrajlowski.4.1.2

poważnyaria-command-namePrzyciski, łącza, pozycje menu ARIA muszą mieć dostępną nazwę.4.1.2

poważnyaria-conditional-attrAtrybuty ARIA muszą być używane w sposób określony dla roli elementu4.1.2

poważnyaria-input-field-namePola ARIA do wprowadzania danych muszą mieć dostępną nazwę.4.1.2

poważnyaria-meter-nameLiczniki ARIA (meter) muszą mieć dostępne nazwy.1.1.1

poważnyaria-progressbar-namePaski postępu ARIA (progressbar) muszą mieć dostępne nazwy.1.1.1

poważnyaria-prohibited-attrElementy mogą używać tylko dozwolonych atrybutów ARIA.4.1.2

poważnyaria-roledescriptionUżyj aria-roledescription w elementach o roli semantycznej.4.1.2

poważnyaria-tab-nameARIA tab nodes must have an accessible name4.1.2

poważnyaria-toggle-field-namePrzełączniki ARIA (toggle) muszą mieć dostępną nazwę.4.1.2

poważnyaria-tooltip-namePodpowiedzi ARIA (tooltip) muszą mieć dostępną nazwę.4.1.2

drobnyaria-deprecated-rolePrzestarzałe role ARIA nie mogą być używane.4.1.2

Kolor

poważnycolor-contrastElementy muszą mieć wystarczający kontrast kolorów.1.4.3

poważnycolor-contrast-enhancedElementy muszą spełniać wyższe progi współczynnika kontrastu kolorów1.4.6

poważnylink-in-text-blockŁącza muszą być odróżnialne od sąsiadującego tekstu w sposób, który nie opiera się na kolorze.1.4.1

Formularze

krytycznylabelElement formularza musi mieć etykietę.4.1.2

krytycznyselect-nameElement select musi mieć dostępną nazwę.4.1.2

poważnyautocomplete-validAtrybut autocomplete musi być użyty poprawnie.1.3.5

umiarkowanyform-field-multiple-labelsPole formularza nie może mieć wielu elementów label.3.3.2

Klawiatura

poważnybypassStrona musi mieć środki do ominięcia powtarzających bloków treści.2.4.1

poważnyframe-focusable-contentRamki z treścią przyjmującą fokus nie mogą mieć tabindex=-1.2.1.1

poważnynested-interactiveKontrolki interaktywne nie mogą być zagnieżdżone4.1.2

poważnyscrollable-region-focusableObszary przewijane muszą być osiągalne z klawiatury.2.1.1, 2.1.3

Język

poważnyhtml-has-langElement <html> musi mieć atrybut lang.3.1.1

poważnyhtml-lang-validElement <html> musi mieć poprawną wartość atrybutu lang.3.1.1

poważnyvalid-langAtrybuty lang muszą mieć poprawną wartość.3.1.2

umiarkowanyhtml-xml-lang-mismatchElement HTML z lang i xml:lang musi mieć ten sam język podstawowy.3.1.1

Nazwa, rola, wartość

krytycznybutton-namePrzyciski muszą mieć odróżniający je tekst nazwy.4.1.2

krytycznyinput-button-namePrzyciski input type=button muszą mieć odróżniający je tekst.4.1.2

poważnyaria-hidden-focusUkryty element ARIA nie może zawierać elementów przyjmujących fokus.4.1.2

poważnylink-nameŁącza muszą mieć odróżniający je tekst.2.4.4, 4.1.2

poważnysummary-nameSummary elements must have discernible text4.1.2

Poprawność kodu

krytycznyduplicate-id-ariaIdentyfikatory stosowane w ARIA i etykietach muszą być unikalne.4.1.2

poważnyduplicate-id-activeID aktywnych elementów, które otrzymują fokus, muszą być unikalne.4.1.1

poważnymarqueeElementy <marquee> są przestarzałe i nie mogą być używane.2.2.2

drobnyduplicate-idWartość atrybutu id musi być unikalna.4.1.1

Semantyka

poważnylabel-content-name-mismatchElementy muszą mieć swój widoczny tekst jako część ich dostępnej nazwy.2.5.3

poważnyp-as-headingStylizowane elementy <p> nie mogą być używane jako nagłówki.1.3.1

drobnyidentical-links-same-purposeŁącza o tej samej nazwie mają ten sam cel.2.4.9

Wskazówki zmysłowe i wizualne

krytycznymeta-viewportPowiększanie i skalowanie nie może być wyłączone.1.4.4

poważnytarget-sizeWszystkie cele dotykowe muszą mieć rozmiar 24px lub pozostawiać wystarczającą ilość miejsca wokół.2.5.8

Struktura

poważnyavoid-inline-spacingOdstępy w tekście muszą być regulowane za pomocą własnych arkuszy stylów.1.4.12

poważnycss-orientation-lockZapytania medialne nie są wykorzystywane do blokowania orientacji wyświetlacza.1.3.4

poważnydefinition-listElementy <dl> mogą bezpośrednio zawierać tylko odpowiednio uporządkowane grupy <dt> i <dd> oraz elementy <script>, <template> lub <div>.1.3.1

poważnydlitemElementy <dt> i <dd> są wewnątrz elementu <dl>.1.3.1

poważnylistElementy <ul> i <ol> mogą bezpośrednio zawierać tylko elementy <li>, <script> lub <template>.1.3.1

poważnylistitem Elementy <li> muszą być zawarte bezpośrednio w <ul> lub <ol>.1.3.1

Tabele

krytycznytd-has-headerKażdy niepusty element <td> w dużej tabeli musi mieć powiązany nagłówek tabeli1.3.1

poważnytable-fake-captionKomórki danych i nagłówkowe w tabeli danych nie są używane do umieszczania podpisu tabeli.1.3.1

poważnytd-headers-attrWszystkie komórki z atrybutem headers odnoszą się tylko do innych komórek tej samej tabeli.1.3.1

poważnyth-has-data-cellsKażdy nagłówek tabeli w tabeli danych musi odnosić się do komórek danych.1.3.1

Alternatywy tekstowe

krytycznyarea-altElementy aktywne <area> muszą mieć tekst alternatywny.2.4.4, 4.1.2

krytycznyimage-altObrazy muszą mieć tekst alternatywny.1.1.1

krytycznyinput-image-altPrzyciski graficzne muszą mieć tekst alternatywny.1.1.1, 4.1.2

krytycznyvideo-captionElementy <video> muszą mieć napisy rozszerzone.1.2.2

poważnydocument-titleDokumenty muszą mieć element <title> pomagający w nawigacji.2.4.2

poważnyframe-titleRamki muszą mieć niepusty atrybut title.4.1.2

poważnyframe-title-uniqueRamki muszą mieć unikalny atrybut title.4.1.2

poważnyobject-altElementy <object> muszą mieć alternatywę tekstową.1.1.1

poważnyrole-img-altElementy z [role='img'] muszą mieć tekst alternatywny.1.1.1

poważnysvg-img-altElementy svg z rolą img muszą mieć tekst alternatywny.1.1.1

drobnyserver-side-image-mapNie wolno używać map odnośników po stronie serwera.2.1.1

Czas i multimedia

krytycznyaudio-captionElementy <audio> muszą mieć ścieżkę z napisami.1.2.1

krytycznymeta-refreshOpóźnione odświeżanie poniżej 20 godzin nie może być stosowane.2.2.1

poważnyblinkElementy <blink> są przestarzałe i nie mogą być używane.2.2.2

umiarkowanyno-autoplay-audioElementy <video> lub <audio> nie odtwarzają dźwięku automatycznie.1.4.2

drobnymeta-refresh-no-exceptionsNie wolno stosować opóźnionego odświeżania2.2.4, 3.2.5

Dobra praktyka, nie zgodność

Wyłapują prawdziwe problemy, ale niepowodzenie w nich nie oznacza niezgodności z WCAG. W skanowaniach z harmonogramu są domyślnie wyłączone, żeby twój wynik znaczył to, co mówi.

poważnyaccesskeysWartość atrybutu accessskey musi być unikalna.porada

drobnyaria-allowed-roleRola ARIA musi być odpowiednia dla danego elementu.porada

poważnyaria-dialog-nameOkno dialogowe ARIA i węzły alertdialog muszą mieć dostępną nazwę.porada

poważnyaria-textElement z atrybutem role="text" nie może mieć potomków przyjmujących fokus.porada

poważnyaria-treeitem-nameWęzły drzewa elementów ARIA (treeitem) muszą mieć dostępną nazwę.porada

poważnyempty-headingNagłówki nie mogą być puste.porada

drobnyempty-table-headerTekst nagłówka tabeli nie może być pusty.porada

drobnyfocus-order-semanticsElementy w porządku otrzymywania fokusu muszą mieć rolę odpowiednią dla treści interaktywnych.porada

krytycznyframe-testedRamki muszą być testowane ze skryptem axe-core.porada

umiarkowanyheading-orderPoziomy nagłówków powinny wzrastać tylko o jeden.porada

drobnyhidden-contentUkrytych treści na stronie nie można analizować.porada

drobnyimage-redundant-altTekst alternatywny obrazów nie powinien być powtarzany w tekście.porada