WCAG 1.3.1 Information och relationer

Struktur som syns på skärmen ska också finnas i koden. Rubriker ska vara rubriker, listor listor och fält ska vara kopplade till sina etiketter. Annars försvinner strukturen för den som använder skärmläsare, och i en webbutik märks det mest i kassan, i storlekstabeller och i produktsidornas rubriker.

• Rubriker som bara är fet eller stor text, så att skärmläsaren inte kan hoppa mellan avsnitten på produktsidan.
• Fält i kassan där etiketten står bredvid fältet men inte är kopplad till det med label.
• Storlekstabeller byggda med div-element i stället för table, så att rader och kolumner inte hänger ihop.
• Grupper av val, som fraktsätt och betalsätt, utan fieldset och legend.
• Rubriknivåer som hoppar, till exempel från h1 direkt till h4, för att nivån har valts efter storlek.

Använd HTML-elementen till det de är gjorda för: h1 till h6 för rubriker, ul för listor, table med th för tabeller och label för etiketter. Styr utseendet med CSS.

<fieldset>
  <legend>Fraktsätt</legend>
  <input type="radio" id="ombud" name="frakt" value="ombud">
  <label for="ombud">Hämta hos ombud</label>
  <input type="radio" id="hem" name="frakt" value="hem">
  <label for="hem">Hemleverans</label>
</fieldset>

Gratistestet

Gratistestet letar efter det här i källkoden:

• Formulärfält saknar etikett. Den som använder skärmläsare får inte veta vad som ska fyllas i.
• Formulärfältet har bara en platshållartext. Den försvinner när man börjar skriva och räknas inte som etikett.
• Sidan saknar en huvudrubrik (h1).
• Rubriknivåer hoppar över ett steg (till exempel från h2 direkt till h4).

Att tabeller, listor och grupper av val är rätt uppmärkta, och att rubrikerna speglar sidans innehåll, behöver kontrolleras för hand.

• Understanding 1.3.1 hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Den auktoriserade svenska översättningen gäller WCAG 2.0. Kravet 1.3.1 har samma lydelse i WCAG 2.1.