Co mówi norma
Dla wszystkich komponentów interfejsu użytkownika (włączając w to elementy formularzy, linki oraz komponenty wygenerowane przez skrypty) nazwa oraz rola mogą być określone programowo; stany, właściwości i wartości, które mogą być ustawione przez użytkownika, mogą być również ustawione programowo; a powiadomienie o zmianach w tych elementach jest dostępne dla klientów użytkownika, w tym technologii wspomagających.
Dlaczego to ma znaczenie
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.
Jak wygląda błąd
- 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 sprawdza to A11ySignal
Przy każdym skanowaniu względem tego kryterium uruchamia się 29 automatycznych sprawdzeń.
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żnyframe-title-uniqueRamki muszą mieć unikalny 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.