Information och relationer

Vad det kräver

Allt du kan se med en blick — att den här fetstilta texten är en rubrik, att dessa rader bildar en datatabell, att den här gruppen av fält är “faktureringsadress”, att den här asterisken betyder obligatorisk — måste också finnas i den underliggande koden. Skärmläsare, röststyrningsprogram och reflödesmoduler ser bara uppmärkningen. Om en relation enbart är visuell (ett större typsnitt, en tjockare ram, ett indrag) ser hjälpmedelsteknik ingenting.

Hur du uppfyller det

• Använd riktiga rubrikelement (<h1> till <h6>) i logisk hierarkisk ordning — aldrig ett stilsatt <div> för att simulera en rubrik.
• Märk upp listor med <ul>, <ol> och <li> — inte stycken separerade med radbrytningar eller punkttecken.
• Använd <table> med <th scope="col"> / <th scope="row"> för datatabeller, med <caption> som beskriver tabellens syfte.
• Varje formulärelement behöver en programmatisk etikett: <label for="...">, aria-labelledby eller aria-label. Platshållartext är ingen etikett.
• Gruppera relaterade formulärfält i <fieldset> med <legend>, eller använd role="group" med aria-labelledby för anpassade widgetar.
• För figurer och bildtexter, använd <figure> och <figcaption>. För definitionspar, använd <dl> / <dt> / <dd>.
• Ange obligatoriska fält både visuellt (asterisk) och programmatiskt (aria-required="true" eller attributet required).

Vanliga fel

• <div class="heading-1"> i stället för <h1> — ser rätt ut, annonseras som ingenting.
• Layouttabeller för visuella kolumner, eller datatabeller byggda av <div>-grids utan <th>-celler.
• Formulärfält med enbart platshållaretiketter — etiketten försvinner vid fokus och skärmläsare kanske inte läser upp den.
• Punkter skapade med <p>•&nbsp;Objekt</p> i stället för riktig listuppmärkning.
• Obligatoriska asterisker visade i röd CSS utan aria-required eller required-attribut.
• Visuellt grupperade radioknappar utan <fieldset> / <legend>, vilket lämnar skärmläsaranvändare med flytande alternativ utan tillhörande fråga.
• Datatabeller där rubrikraden är fetstilad men använder <td>, inte <th>.

Varför det spelar roll

1.3.1 är det mest citerade framgångskriteriet i WCAG-granskningar efter 1.1.1 och 1.4.3. Varje CMS-genererad sida, varje marknadsföringslandning, varje anpassad formulärwidget brukar misslyckas med minst en del av det. Lösningen är nästan alltid semantisk HTML, inte ARIA — när du tar till role="heading" för att laga ett <div> som borde ha varit <h2> har du redan förlorat.