Elementy <dl> mogą bezpośrednio zawierać tylko odpowiednio uporządkowane grupy <dt> i <dd> oraz elementy <script>, <template> lub <div>. — sprawdzenie „definition-list”

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/definition-list ↗

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ż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.