Co mówi norma
Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane programowo lub są dostępne w postaci tekstu.
Dlaczego to ma znaczenie
Osoby korzystające z czytnika ekranu nawigują po nagłówkach i obszarach. Jeśli twoje nagłówki to ostylowane `div`-y, tej nawigacji nie ma, a strona staje się jednym długim akapitem.
Jak wygląda błąd
- błąd`<div class="h2">` zamiast `<h2>`.
- błądTabela układu bez `<th>` albo tabela danych bez komórek nagłówkowych.
- błądPowiązane przyciski radiowe bez `<fieldset>` z `<legend>`.
- błądWizualna lista zbudowana ze znaczników `<br>`.
Jak to naprawić
- róbUżyj elementu, który znaczy to, co masz na myśli, a potem go ostyluj. Najpierw semantyka, potem CSS.
- róbDaj tabelom danych `<th scope="col">` albo `scope="row"`.
- róbZgrupuj powiązane pola w `<fieldset>` i nazwij grupę w `<legend>`.
- róbDodaj obszary: `<main>`, `<nav>`, `<header>`, `<footer>`.
Jak sprawdza to A11ySignal
Przy każdym skanowaniu względem tego kryterium uruchamia się 12 automatycznych sprawdzeń.
krytycznyaria-hidden-bodyElement body nie może mieć atrybutu aria-hidden='true'.
krytycznyaria-required-childrenNiektóre role ARIA muszą obejmować określone dzieci.
krytycznyaria-required-parentElementy z niektórymi atrybutami role ARIA muszą znajdować się wewnątrz nadrzędnego elementu rodzica z wymaganym atrybutem role.
krytycznytd-has-headerKażdy niepusty element <td> w dużej tabeli musi mieć powiązany nagłówek tabeli
poważnydefinition-listElementy <dl> mogą bezpośrednio zawierać tylko odpowiednio uporządkowane grupy <dt> i <dd> oraz elementy <script>, <template> lub <div>.
poważnydlitemElementy <dt> i <dd> są wewnątrz elementu <dl>.
poważnylistElementy <ul> i <ol> mogą bezpośrednio zawierać tylko elementy <li>, <script> lub <template>.
poważnylistitem Elementy <li> muszą być zawarte bezpośrednio w <ul> lub <ol>.
poważnyp-as-headingStylizowane elementy <p> nie mogą być używane jako nagłówki.
poważnytable-fake-captionKomórki danych i nagłówkowe w tabeli danych nie są używane do umieszczania podpisu tabeli.
poważnytd-headers-attrWszystkie komórki z atrybutem headers odnoszą się tylko do innych komórek tej samej tabeli.
poważnyth-has-data-cellsKażdy nagłówek tabeli w tabeli danych musi odnosić się do komórek danych.
Czego narzędzie ci nie powie
Automat wyłapie brakujące nagłówki tabel i puste nagłówki. Czy poziomy nagłówków opisują rzeczywisty konspekt, i tak trzeba przeczytać.