Kryterium, które za tym stoi
4.1.2 Nazwa, rola, wartość
Każda kontrolka musi ujawniać, czym jest, jak się nazywa i w jakim jest stanie.
Poziom A · EN 301 549 § 9.4.1.2
Po co jest to sprawdzenie
To kryterium, na którym wykładają się własne komponenty. `div` ostylowany na pole wyboru nie mówi technologiom asystującym nic o tym, czy jest zaznaczony.
Co zwykle je wywołuje
- błądPrzełącznik z `<div>` bez `role="switch"` i bez `aria-checked`.
- błądPrzycisk z ikoną bez dostępnej nazwy.
- błądAkordeon, którego nagłówek nigdy nie aktualizuje `aria-expanded`.
- błądWłasny `<select>` bez `role="combobox"` i bez `aria-activedescendant`.
Jak to naprawić
- róbUżywaj natywnego elementu wszędzie tam, gdzie taki istnieje. `<button>`, `<input type="checkbox">` i `<select>` dają to wszystko za darmo.
- róbPrzy naprawdę własnym komponencie trzymaj się odpowiedniego wzorca z ARIA Authoring Practices, razem z obsługą klawiatury.
- róbTrzymaj atrybuty stanu w zgodzie z tym, co jest na ekranie.
Jak to jest raportowane
A11ySignal zgłasza to z wagą poważny. Każdy błędny element ma swój selektor CSS i kod, który zawiódł, więc trafisz prosto do właściwej linii, zamiast jej szukać. Deque publikuje szczegóły na poziomie silnika:
https://dequeuniversity.com/rules/axe/4.13/frame-title-unique ↗
Sprawdzenie zaimplementowane w axe-core 4.13.0, © Deque Systems, MPL-2.0.
Inne sprawdzenia dla 4.1.2
krytycznyarea-altElementy aktywne <area> muszą mieć tekst alternatywny.
krytycznyaria-allowed-attrElementy mogą używać tylko dozwolonych atrybutów ARIA.
krytycznyaria-hidden-bodyElement body nie może mieć atrybutu aria-hidden='true'.
krytycznyaria-required-attrWymagane atrybuty ARIA muszą istnieć.
krytycznyaria-rolesStosowane role ARIA muszą mieć poprawne wartości.
krytycznyaria-valid-attrAtrybuty ARIA muszą mieć poprawne nazwy.
krytycznyaria-valid-attr-valueAtrybuty ARIA muszą mieć poprawne wartości.
krytycznybutton-namePrzyciski muszą mieć odróżniający je tekst nazwy.
krytycznyduplicate-id-ariaIdentyfikatory stosowane w ARIA i etykietach muszą być unikalne.
krytycznyinput-button-namePrzyciski input type=button muszą mieć odróżniający je tekst.
krytycznyinput-image-altPrzyciski graficzne muszą mieć tekst alternatywny.
krytycznylabelElement formularza musi mieć etykietę.
krytycznyselect-nameElement select musi mieć dostępną nazwę.
poważnyaria-braille-equivalentAtrybuty aria-braille muszą mieć odpowiednik niebrajlowski.
poważnyaria-command-namePrzyciski, łącza, pozycje menu ARIA muszą mieć dostępną nazwę.
poważnyaria-conditional-attrAtrybuty ARIA muszą być używane w sposób określony dla roli elementu
poważnyaria-hidden-focusUkryty element ARIA nie może zawierać elementów przyjmujących fokus.
poważnyaria-input-field-namePola ARIA do wprowadzania danych muszą mieć dostępną nazwę.
poważnyaria-prohibited-attrElementy mogą używać tylko dozwolonych atrybutów ARIA.
poważnyaria-roledescriptionUżyj aria-roledescription w elementach o roli semantycznej.
poważnyaria-tab-nameARIA tab nodes must have an accessible name
poważnyaria-toggle-field-namePrzełączniki ARIA (toggle) muszą mieć dostępną nazwę.
poważnyaria-tooltip-namePodpowiedzi ARIA (tooltip) muszą mieć dostępną nazwę.
poważnyframe-titleRamki muszą mieć niepusty atrybut title.
poważnylink-nameŁącza muszą mieć odróżniający je tekst.
poważnynested-interactiveKontrolki interaktywne nie mogą być zagnieżdżone
poważnysummary-nameSummary elements must have discernible text
drobnyaria-deprecated-rolePrzestarzałe role ARIA nie mogą być używane.