Förmedla information, struktur och relationer i koden

Om riktlinjen

Innehåller lagkrav
EN 9.1.3.1
WCAG 1.3.1 (A)

Område

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?

Information, struktur och relationer som presenteras visuellt, exempelvis med formgivning, ska antingen vara maskinläsbara eller finnas beskrivna i text.

Semantiskt korrekt kod

Det finns flera sätt att skapa semantisk mening i html. Ett sätt är att använda så kallade semantiska html-element. Ett semantiskt html-element beskriver tydligt meningen med html-elementet. Exempelvis används det semantiska html-elementet <h1> för att skapa en rubrik på nivå 1.

Det går även att använda tekniken WAI-ARIA för att ge både semantiska och osemantiska html-element en annan mening. Exempelvis kan ett osemantiskt <div>-element, som i sig själv inte är något annat än en ”behållare”, bli en rubrik genom att rollen rubrik läggs till elementet. Detta görs genom html-attributet ”role”, exempelvis <div role=”heading”> För att rubriken även ska få rätt nivå behöver man även lägga till ”aria-level”, i detta fall <div role=”heading” aria-level=”1”> för att rubriken ska bli en rubrik på nivå 1.

Rubriker

Rubriker behöver märkas upp som sådana på ett maskinläsbart sätt. I html kan detta göras med h-element; <h1>…<h6>. Den maskinläsbara rubrikstrukturen behöver motsvara den som förmedlas visuellt, och inga mellannivåer ska utelämnas.

Det ska alltid finnas en rubrik på nivå h1. Det är inget krav att en rubrik på nivå h1 måste vara den första rubriken på sidan. Exempelvis kan det finnas rubriker i ett sidhuvud innan huvudrubriken.

Formulär

I formulär behöver information, struktur och relationer förmedlas maskinläsbart.

Koppla ledtexter till sina formulärfält. Detta kan göras med hjälp av html-elementet <label>, som sedan kopplas ihop med fältet genom for-attributet. Detta har flera fördelar. Dels kopplas ledtexten maskinläsbart till fältet. Dels går det att klicka på etiketten för att fokus ska sättas på inmatningsfältet och därmed blir den klickbara ytan större.

Exempel på hur <label> elementet kan användas:
<label for=”search”>Sök på webbplatsen</label>
<input type=”text” id=”search” placeholder=”Sök”>

Märk även upp obligatoriska fält i formulär. Det kan göras på olika sätt, både i koden och i text.

Listor

Information i form av listor behöver vara uppmärkt som det. Följande html-element kan användas för att märka upp listor:

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

Exempel på korrekt kodad lista:

<ul>

<li>Listpunkt 1</li>

<li>Listpunkt 2</li>

<li>Listpunkt 3</li>

</ul>

Om att man kopierar in listat innehåll från en annan källa, till exempel ett mejl eller ett Word-dokument, kan det hända att listan inte ”översätts” till korrekt html när man klistrar in texten i gränssnittet för redigering av webbsidan. Då får man en lista som inte är semantiskt korrekt kodad och som därför inte går att tolka som listinformation trots att den kan ”se rätt ut” visuellt.

Exempel på felaktigt kodad lista:

<ul>

<p>• Listpunkt 1</p>

<p>• Listpunkt 2</p>

<p>• Listpunkt 3</p>

</ul>

Här har listelementen bytts ut mot paragrafelement, vilket gör att listan inte är semantiskt korrekt. Listpunkterna utgörs av så kallade ASCII-tecken vilket gör att listan visuellt kommer ha listpunkter, men semantiskt kommer den inte att tolkas korrekt som en lista av hjälpmedel.

Tabeller

Tabellers struktur behöver framgå på ett maskinläsbart sätt. Följande html-element kan användas för att märka upp tabeller:

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

Komplexa tabeller

I en komplex tabell med exempelvis flera kolumnrubriker och radrubriker behöver kopplingarna mellan rubrikceller och dataceller märkas upp.

Attributet scope används på th-element för att ange vilka dataceller rubrikcellen gäller. Tillåtna värden är row, col, rowgroup och colgroup. Elementet colgroup märker upp kolumngrupper, medan rowgroup märker upp radgrupper. Man behöver även identifiera vilka kolumner eller rader som hör till vilken grupp.

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.

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

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.

Flera rubriker på nivå 1

Det är möjligt att använda flera h1:or på en sida så länge som det görs korrekt utifrån övriga riktlinjer för rubriker. Det är dock ett vedertaget designmönster att endast ha en h1:a per sida och det är därför att rekommendera.

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.

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.