Kryterium, które za tym stoi
1.3.1 Informacje i relacje
Struktura, którą pokazujesz układem — nagłówki, listy, tabele, grupy — musi istnieć także w kodzie.
Poziom A · EN 301 549 § 9.1.3.1
Po co jest to sprawdzenie
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.
Co zwykle je wywołuje
- 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 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/listitem ↗
Sprawdzenie zaimplementowane w axe-core 4.13.0, © Deque Systems, MPL-2.0.
Inne sprawdzenia dla 1.3.1
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ż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.