Förmedla information, struktur och relationer i koden

När du använder rätt html-element för exempelvis rubriker, listor och länkar, hjälper det personer som använder skärmläsare att uppfatta information och struktur. Personer med synnedsättning eller de som använder skärmläsare av annan anledning får lättare att navigera på din webbplats.

Digg utreder WCAG 1.3.1 och nedanstående text bör därför läsas som ett utkast.

Därför ska du märka upp innehåll med korrekt kod

Digital information har fördelen att den kan presenteras på många olika sätt, beroende på personens behov, utrustning och preferenser. Exempelvis kan information läsas upp eller förstoras eller presenteras med annan layout.

Du som avsändare behöver se till att ingen viktig information går förlorad när presentationen förändras. Det kan du göra genom att märka upp sidans innehåll på rätt sätt i koden. Genom att använda html-elementen på rätt sätt ökar du chansen att din information presenteras korrekt oavsett mottagarens verktyg.

Vad kräver lagen?

Semantiskt korrekt kod

Sidan ska vara semantiskt korrekt kodad. Utnyttja html-språkets olika element så som de är tänkta, och komplettera med WAI-ARIA och att uttryckligen beskriva med text sådant som inte redan framgår av koden.

Rubriker

Skapa rubriker med h-element; <h1>…<h6> där inga mellannivåer utelämnas. En korrekt och semantiskt utformad rubrikstruktur underlättar för användare med hjälpmedel.

Vid behov så går det bra att ha flera rubriker i h1-nivån om följande villkor är uppfyllda: Alla rubriker på sidan är h1-rubriker eller att varje h1-rubrik har en efterföljande rubrik i nivå h1 eller h2.

Formulär

  • Namnge formulärfält med kopplade label-element.
  • Märk upp obligatoriska fält i formulär.

Listor

Använd rätt html-element för listor:

  • <ol> för ordnad lista,
  • <ul> för oordnad lista,
  • <li> för elementen i listan.

Tabeller

Använd rätt html-element för tabeller:

  • <table> för tabell,
  • <tr> för tabellrader,
  • <th> för rubrikcell,
  • <td> för datacell.

Koppla ihop fältetikett och inmatningsfält

För de flesta webbläsare kan du koppla ihop fältetiketten och inmatningsfältet så att etiketten blir klickbar. Då räcker det att personen klickar på etiketten för att fokus ska hamna på inmatningsfältet. För textfält innebär det att markören hamnar i skrivfältet.
Därmed blir den klickbara ytan för fältet större, vilket underlättar för personerna som ska klicka. Dessutom blir det möjligt för hjälpmedel, till exempel skärmläsare, att koppla rätt etikett till respektive fält.

Label- och for-attribut

Det vanligaste är att använda label-element för att skriva fältetiketter. Koppla etiketten till rätt inmatningsfält genom att i for-attributet för label-elementet ange id för fältet den ska kopplas till.

Using label elements to associate text labels with form controls (w3.org) Länk till annan webbplats.

Legend och fieldset

Ibland kan det istället vara bättre att ange en gemensam etikett (legend) för en grupp av inmatningsfält (fieldset). Då kan det vara nödvändigt att komplettera denna med individuella etiketter för varje enskilt fält.

Rekommendationer utöver lagkrav

Utöver det lagen kräver finns ett antal rekommendationer för hur du kan arbeta med semantik och html-element för att förbättra digital tillgänglighet:

Semantiska html-element

Element

Betydelse

<a>

Länk.

<abbr>

Förkortning.

<area>

Klickbar yta i en bildkarta.

<address>

Kontaktinformation för den som ansvarar för innehållet.

<audio>

Ljudklipp.

<b>

Visuellt avvikande, men inte betonad, text som läses utan ändring av röst: nyckelord, framhävda produktnamn, etc.

<br>

Radbrytning som är en faktisk del av innehållet, till exempel i en postadress eller en dikt.

<blockquote>

Fristående citat.

<canvas>

Rityta som används av skript.

<cite>

Hänvisning i form av namn eller titel på ett kreativt verk.

<code>

Datorkodfragment.

<data>

Maskinläsbart värde

<del>

Borttaget innehåll.

<details>

Utfällbart avsnitt.

<dfn>

Definierande instans av en term.

<dialog>

Dialogruta eller liknande.

<em>

Semantisk emfas (betoning).

<embed>

Inbäddat externt innehåll.

<figure>

Fristående innehåll som kan hänvisas till som en enhet; till exempel bild, ekvation, tabell.

<hr>

Tematiskt avbrott på styckenivå.

<i>

Visuellt avvikande, men inte betonad, text som läses med annan röst: fraser på annat språk, taxonomi, tekniska termer, etc.

<iframe>

Inbäddat externt innehåll.

<ins>

Infogat innehåll.

<img>

Bild.

<kbd>

Användarinmatning (via tangentbord, menyval, röststyrning, etc.).

<map>

Bildkarta; mappar klickbara ytor i en bild till länkar.

<mark>

Markerad text med releavans i annan kontext.

<math>

Matematiska uttryck (MathML).

<noscript>

Innehåll som ska visas om webbläsaren inte stödjer eller tillåter JavaScript.

<object>

Inbäddat externt innehåll.

<p>

Textstycke, strof i en dikt, del av ett formulär.

<picture>

Behållare för att visa bilder baserat på komplexa villkor.

<pre>

För-formaterad text, till exempel programkod.

<q>

Inbäddat citat.

<s>

Innehåll som inte längre är korrekt eller relevant.

<samp>

Exempel på eller återgivning av utmatning från ett program eller datorsystem.

<script>

JavaScript-kod.

<small>

Finstil, tlll exempel juridisk text, friskrivning(disclaimer)eller tillskrivning(attribution).

<source>

Källa, till exempel bild, ljudklipp eller video.

<strong>

Viktigt, allvarligt eller brådskande innehåll.

<sub>

Subskript (nedsänkt text).

<summary>

Sammanfattning i utfällbart avsnitt.

<sup>

Superskript (upphöjd text).

<svg>

Vektorgrafik.

<template>

Mallkod som används av skript.

<time>

Datum och/eller klockslag.

<track>

”Spår” till ljudklipp eller video, till exempel undertexter.

<u>

Indikerar annotering, till exempel felstavadde ord.

<var>

Variabel, platshållare.

<video>

Videofilm.

<wbr>

Lämplig plats för radbrytning.

Rubriknivåer

En webbsida ska innehålla rubriknivåer <h1> till och med <h6>. Rekommendationen är därför att sidan inleds med en rubrik på h1-nivån och att övriga rubriker är på nivån h2 eller lägre.

Det går även bra att inleda en sida med en rubriknivå annan än h1 om det till exempel finns navigering på sidan som behöver en egen rubriksättning.

I undantagsfall går det bra att ha flera rubriker i h1-nivå, om minst ett av följande villkor är uppfyllda:

  • Alla rubriker på sidan är h1-rubriker.
  • Varje h1-rubrik har en efterföljande rubrik i nivå h1 eller h2.

Betona med <em>

Betona innehåll med html-elementet em och inte bara kursivering, eftersom det inte går att kursivera skärmläsarens tal.

Förkorta långa rad- och kolumnrubriker med <abbr>

Sträva alltid efter att ha korta rad- och kolumnrubriker i tabeller.

När en skärmläsare läser upp en tabell, kan den läsa upp tillhörande rad- och kolumnrubriker före innehållet i varje datacell. Om rubrikerna är långa tar det tid att höra dem upprepas om och om igen. Om det inte är möjligt eller lämpligt att göra en kort rubrik, så använd abbr-attributet för att ange en förkortad version av långa rad- och kolumnrubriker, som skärmläsare kan använda.

Exempel på användning av <abbr>

<th abbr="pris">Nettopris exklusive moms</th>

Koppla ihop dataceller med rubrikceller

En explicit koppling mellan rubrikceller och dataceller gör att skärmläsare kan läsa upp den tillhörande rubriken före innehållet i varje datacell.

På så sätt slipper personen memorera tabellstrukturen. Detta är särskilt bra för tabeller med många kolumner, eller med flera rubriknivåer.

Attributet scope

Attributet scope på ett th-element anger för vilka dataceller rubriken gäller.

Tillåtna värden är row, col, rowgroup och colgroup. Elementet colgroup märker upp kolumngrupper, medan tbody märker upp radgrupper.

Ett alternativt sätt att uttrycka relationer mellan celler är att använda attributet id på th-elementen och attributet headers på td-elementen. Headers kan innehålla en eller flera identiteter för rubrikceller. Om du sätter flera så skilj dem åt med mellanslag.

Så testar du semantiken

Många brister kopplade till detta kriterium går att identifiera genom att testa hur ditt innehåll tolkas av skärmläsare eller röststyrning. Det går även att se i html-koden att element är korrekt uppmärkta.

Utdrag ur WCAG

WCAG 1.3.1 (A) Information och relationer

Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text.

Därför länkar vi till WCAG på svenska och engelska

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: