DIGG – Myndigheten för digital förvaltning

Manual för tillsyn enligt lagen om tillgänglighet till digital offentlig service

Granska webbsida

Inledning

Verktyg

Använd senaste versionen av någon av webbläsarna Mozilla Firefox eller Google Chrome med följande tillägg:

Dessa webbläsare har en användbar ”inspektör” som kan underlätta granskningen. Du aktiverar inspektören genom att trycka Ctrl+Skift+i eller F12, eller genom att högerklicka på ett element på webbsidan och välja Inspektera element (Firefox) eller Inspektera (Chrome).

Innan du börjar granska en webbplats

  1. Skapa filstrukturen för tillsynsärendet.

  2. Spara stickprovtagning (webb) i granskningsmappen och döp det enligt stickprovtagning-tjänst-ååååmmdd.xslx, där tjänst är webbplatsens namn, följt av dagens datum.

  3. Gör stickprovsurvalet för webbplatsen enligt rutinen för att fylla i urvalsdokumentet.

  4. Spara granskningsprotokoll (webb) granskningsmappen och döp det enligt granskningsprotokoll-tjänst-ååååmmdd.xlsx, där tjänst är webbplatsens namn, följt av dagens datum.

  5. Fyll i försättsbladet i protokollet.

Hur du granskar en webbsida

  1. Sätt sidans status till Pågår i urvalsdokumentet.

  2. Spara en skärmavbildning av sidan som titel.png under Skärmbilder i granskningsmappen (se sparade skärmbilder).

  3. Spara den kompletta sidan som titel.html under Webbsidor i granskningsmappen (se sparade webbsidor).

  4. Granska sidan enligt metodiken på denna sida och notera varje underkänt krav på bladet Anmärkningar i protokollet; se Anmärkningar.

Spara tillgänglighetsredogörelsen till sist.

Avsnittslänkar öppnas i en separat vy.

Störande

Börja med en okulärbesiktning av sidan för att säkerställa att det inte finns något innehåll som riskerar att distrahera eller störa användare.

Ljudkontroll

Avsnitt
9.1.4.2 A
Förutsättningar
Ljud spelas upp automatiskt när sidan laddas, och varar i mer än 3 sekunder.
Kontroll

Minst ett av följande är sant:

  • ljudet går att pausa eller stoppa
  • ljudvolymen går att sänka utan att ändra systemets ljudvolym.

Rörligt innehåll

Avsnitt
9.2.2.2 A
Förutsättningar
Det finns innehåll som rör sig, blinkar, skrollar eller uppdateras automatiskt och pågår under minst 5 sekunder.
Kontroll
Blinkande, skrollning, rörelser och automatisk uppdatering går att pausa, stoppa eller dölja.
Undantag
Förloppsindikator, indikator på att sidan fortfarande laddas.

Flimmer

Avsnitt
9.2.3.1 A
Förutsättningar
Det finns innehåll som flimrar eller blinkar.
Kontroll
Inget innehåll flimrar mer än 3 gånger under en sekund.

Detta är särskilt viktigt för ytor med mättad röd färg.

Innehåll

Sidtitel

Avsnitt
9.2.4.2 A
Kontroll
Sidan har en titel som beskriver dess innehåll eller syfte.
Metod
Håll muspekaren över tabbfliken i webbläsaren. Titeln visas som ett tooltip.
Hela titeln visas i ett tooltip när du håller muspekaren över tabbfliken
Håll muspekaren över en tabbflik för att se hela titeln

Använd WAVE för att utföra kontrollerna nedan.

Automatisk omladdning

Avsnitt
9.2.2.1 A
Kontroll
Sidan laddar inte om automatiskt eller dirigeras om efter en viss tid.
Metod
Kontrollera att WAVE inte rapporterar ”Page refreshes or redirects” under fliken Details (eller ikonen Röd fyrkant med vit cirkelpil längst upp på sidan).

Sidans språk

Avsnitt
9.3.1.1 A
Kontroll
Sidans huvudsakliga språk är maskinläsbart.
Metod
Kontrollera i WAVE att sidans språk är angivet (ikonen Grön fyrkant med jordglob längst upp på sidan). Ett annat sätt är att visa källkoden (Ctrl+u) och kontrollera att <html>-taggen har ett lang-attribut med rätt värde.
Exempel
För en sida på svenska ska värdet vara sv eller swe, eventuellt med tillägget -SE.

Språkändringar

Avsnitt
9.3.1.2 A
Förutsättningar
Sidan innehåller ord, fraser eller andra innehållsdelar som har ett annat språk än omgivande text.
Kontroll
Språkförändringar är maskinläsbart angivna.
Metod
Kontrollera i WAVE att språkändringen är angiven (ikonen Grön fyrkant med jordglob).
Undantag
Egennamn, tekniska termer, ord på obestämt språk samt lånord och fraser som tagits upp i den omgivande textens språk.

Landmärken

Ett landmärke är en viktig del av en sida. Skärmläsare har ofta funktioner för att navigera mellan landmärken, för att snabbt och enkelt hitta rätt på sidan.

Landmärken i HTML 5 och ARIA-roller
HTML 5 ARIA role Landmärke
<header> banner Sidhuvud.
<nav> navigation Navigering.
<main> main Huvudinnehåll.
<aside> complementary Relaterad information.
<footer> contentinfo Sidfot.

HTML-elementen har automatiskt den angivna rollen. För <header> och <footer> gäller det bara om de hör till <body>, inte om de är underordnade andra ”sektionerande” element som <article>, <section>, etc.

Avsnitt
9.1.3.1 A
Förutsättningar
Sidan använder HTML 5, eller en dokumenttyp med stöd för ARIA, och minst ett landmärke är uppmärkt som sådant.
Kontroll
Alla landmärken på sidan är uppmärkta med motsvarande HTML-elementtyper eller ARIA-attribut.
Metod
Kontrollera i WAVE, under fliken Structure.
Fliken Structure visar strukturella element
Tillägget WAVE ger en bra överblick över strukturella element

Tabeller

Avsnitt
9.1.3.1 A
Förutsättningar
Sidan innehåller tabellinformation.
Kontroll
Tabeller är uppmärkta med <table>, rader med <tr> och celler med <th> (rubrikcell) eller <td> (datacell).
Kontroll
Det finns inga tomma <th>-element.
Metod
Ta hjälp av WAVE, Web developer toolbar och inspektören.

Listor

Avsnitt
9.1.3.1 A
Förutsättningar
Sidan innehåller listinformation.
Kontroll
Listor är uppmärkta med <ol> eller <ul> och elementen med <li>.
Kontroll
Listor med parvisa element är uppmärkta som <dl>, där varje element består av minst ett <dt> följt av minst ett <dd>.
Metod
Ta hjälp av WAVE, Web developer toolbar och inspektören.

Rubriker

Avsnitt
9.1.3.1 A
Förutsättningar
Sidan innehåller rubriker.
Kontroll
Rubriker är uppmärkta med <h1><h6> och inga mellannivåer har utelämnats.
Kontroll
Rubriker med nivå 2 eller högre är innehållsmässigt underordnade närmaste rubrik med lägre nivå. (Till exempel att en <h3> i en sidospalt faktiskt är avsedd att vara underordnad sista <h2> i huvudinnehållet.)
Metod
Ta hjälp av WAVE, Web developer toolbar och inspektören.

Det är inget krav att <h1> måste vara den första rubriken på sidan, till exempel om huvudrubriken ligger efter ett sidhuvud med så pass komplext innehåll att det innehåller rubriker.

Avsnitt
9.2.4.6 AA
Förutsättningar
Sidan innehåller rubriker.
Kontroll
Alla rubriker beskriver ämnet eller syftet med det avsnitt som följer.
Välj View Document Outline under Information-fliken Utelämnad rubriknivå visas som "(Missing heading)" i Web developer toolbar
Hur du kan granska rubrikstruktur med Web developer toolbar

Nu kan du stänga WAVE.

Semantik

Avsnitt
9.1.3.1 A
Kontroll
HTML används för att märka upp betydelse (semantik). CSS används för att styra presentationen.
Exempel
Semantiska HTML-element används inte för att åstadkomma visuell formgivning (<strong> för att simulera en rubrik, <table> för layout).
Exempel
Innehåll för vilket det finns en semantisk HTML-elementtyp är uppmärkt med den (citat är märkta som <blockquote> eller <q>, viktig eller brådskande information är märkt som <strong>).
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 felstavdde ord.
<var> Variabel, platshållare.
<video> Videofilm.
<wbr> Lämplig plats för radbrytning.

Sensoriska kännetecken

Avsnitt
9.1.3.3 AA
Förutsättningar
Det finns instruktioner på sidan som behövs för att förstå eller hantera innehållet.
Kontroll
Instruktioner till användaren hänvisar inte enbart till komponenters sensoriska kännetecken såsom färg, storlek, placering, orientering eller ljud.
Exempel
Otillåtna hänvisningar: ”den runda knappen”, ”den gröna rutan”, ”det bredaste fältet”, ”menyn till vänster”…
Tre knappar i olika färger med simulering av deuteranopi
En röd, en gul och en grön knapp; till höger sedda genom ett filter som simulerar deuteranopi (röd/grön färgblindhet)

Bilder

För personer utan synförmåga är det absolut nödvändigt att all information som inte är text också finns som text.

Använd Web Developer Toolbar för att hitta och visa textalternativ.

Textalternativ för bilder

Avsnitt
9.1.1.1 A
Förutsättningar
Sidan innehåller förgrundsbilder.
Kontroll
Innehållsbärande bilder har ett textalternativ som förmedlar samma information som bilden i det aktuella sammanhanget.
Kontroll
Dekorativa förgrundsbilder har ett tomt textalternativ (alt="").
Metod
Använd Web developer toolbar för att visa textalternativ för alla förgrundsbilder.
Välj Display Alt Attributes under Images-fliken
Web developer toolbar kan visa alt-attributet för alla förgrundsbilder

Om bildens syfte är att bekräfta att användaren är en människa och inte en maskin (CAPTCHA) ska textalternativet bestämma och beskriva syftet och det ska finnas alternativa typer av CAPTCHA som går att uppfatta med andra typer av sensorisk uppfattning än synförmåga.

Alt-texter av typen ”Bild på…” eller ”…logotyp” bör vi anmärka på, men inte underkänna, eftersom det i slutändan är författaren som avgör vilken information bilden är avsedd att förmedla.

Kontrast för textalternativ

Avsnitt
9.1.4.3 AA
Förutsättningar
Sidan innehåller informationsbärande bilder.
Kontroll
Alternativtext för bilder har ett kontrastförhållande på minst 4,5:1 mot bakgrunden. Om textstorleken är minst 18 punkter (24px) eller 14 punkter (19px) fetstil är kravet 3:1.
Metod
Använd Web Developer Toolbar och välj Replace Images With Alt Attributes i fliken Images. Mät värdet för texter med misstänkt låg kontrast.

Funktionen View Color Information på fliken Information i Web Developer Toolbar kan vara användbar för att hitta de färgkoder som används på sidan.

Kontrast i grafik

Avsnitt
9.1.4.11 AA
Förutsättningar
Sidan innehåller diagram, grafer eller annan informationsbärande grafik.
Kontroll
Delar av grafiska objekt som behövs för att förstå innehållet har ett kontrastförhållande på minst 3:1 mot intilliggande färger.
Undantag
En specifik presentation är en förutsättning för den information som förmedlas.

Bilder av text

Avsnitt
9.1.4.5 AA
Kontroll
Text, inte bilder av text, används för att förmedla information.
Metod
Ett enkelt sätt att testa detta är att markera innehåll med musen. Text markeras vanligen på ett tydligt sätt, till skillnad från bilder. Web developer toolbar har också användbara funktioner, till exempel att dölja alla bilder eller markera dem med en ram.
Undantag
Det specifika utseendet är en förutsättning för den förmedlade informationen – till exempel logotyper.

Tangentbord

För personer med nedsatt rörlighet eller finmotorik är det viktigt att alla funktioner går att hantera via tangentbord eller motsvarande hjälpmedel (switchar, sug/blås-gränssnitt, ögonstyrning, röststyrning).

I de flesta webbläsare (inklusive Firefox och Chrome) kan du navigera mellan sidans interaktiva element med Tabb och Skift+Tabb. För att navigera mellan alternativen i en radiogrupp använder du piltangenterna.

Du kan aktivera länkar och knappar med Enter. För att växla markeringen i en kryssruta, använd Mellanslag. Du kan vanligen fälla ned en rullgardinslista med Mellanslag, navigera mellan alternativen med piltangenter och välja ett alternativ med Enter.

Skipplänkar

Avsnitt
9.2.4.1 A
Förutsättningar
Det finns innehåll före huvudinnehållet, till exempel ett sidhuvud, som åtefinns på flera sidor på webbplatsen.
Kontroll
Det första interaktiva elementet på sidan är en länk till huvudinnehållet.
Metod
  1. Sätt fokus till webbläsarens adressfält (Ctrl+L).
  2. Tryck Tabb tills första elementet på sidan får fokus.
Exempel
Innehåll som ska gå att hoppa över är bland annat logotyper, länkar, information om kakor, sökfunktion.

Se tillämpningsanvisning för 2.4.1.

Logisk fokusordning

Avsnitt
9.2.4.3 A
Förutsättningar
Sidan innehåller element som det går att navigera till med tangentbordet och navigationssekvensen påverkar betydelsen eller handhavandet.
Kontroll
Fokusordningen avviker inte från den visuella ordningen på ett sätt som gör innehållet svårt att förstå eller använda.
Metod
Navigera genom alla element på sidan med Tabb.

Om fokusmarkeringarna på sidan är svåra att uppfatta kan du använda tillägget Force focus för att lättare se vilket element som har fokus.

Synlig fokusmarkering

Avsnitt
9.2.4.7 AA
Förutsättningar
Sidan innehåller element som det går att navigera till med tangentbordet.
Kontroll
Alla fokuserbara element har en synlig fokusmarkering.
Metod
Navigera genom alla element på sidan med Tabb och säkerställ att det hela tiden går att se vilket element som har fokus. Om den inte syns tydligt, kontrollera CSS-koden för att se att man inte dolt fokusmarkeringen.
Exempel
En fokusmarkering kan vara en synlig textmarkör i ett inmatningsfält, eller en ram omkring en länk eller en knapp.

Använd inspektören och kryssa i :focus under :hov. Titta sedan efter selektorer som innehåller :focus och kontrollera att man inte satt outline:0, outline:none eller liknande. (Leta vid behov efter regeln för webbläsarens inbyggda fokusmarkering, ifall den inte använder outline utan någon annan CSS-egenskap.)

Avsnitt
9.1.4.11 AA
Förutsättningar
Sidan innehåller element som det går att navigera till med tangentbordet.
Kontroll
Fokusmarkeringen har ett kontrastförhållande på minst 3:1 mot intilliggande färger.

Länkar

Avsnitt
9.2.4.4 A
Förutsättningar
Sidan innehåller länkar.
Kontroll
Syftet med varje länk framgår utan omgivande sammanhang, eller åtminstone tillsammans med texten som föregår länken (i samma stycke, lista, tabellcell eller liknande).
Undantag
Syftet med länken är oklart även för personer utan funktionsnedsättning.

Om en länk innehåller en bild, kontrollera dess textalternativ (se Textalternativ) för att se att den förmedlar länkens syfte.

Navigera med Tabb för att inte missa någon länk.

Avsnitt
9.1.4.3 AA
Förutsättningar
Sidan innehåller länkar.
Kontroll
Länktext har ett kontrastförhållande på minst 4,5:1 mot bakgrunden. Om textstorleken är minst 18 punkter (24px) eller 14 punkter (19px) fetstil är kravet 3:1.
Kontroll
Om länkfärgen är den enda visuella indikeringen ska den ha ett kontrastförhållande på minst 3:1 mot intilliggande icke-länkad text.

Funktionen View Color Information på fliken Information i Web Developer Toolbar kan vara användbar för att hitta de färgkoder som används på sidan.

Avsnitt
9.1.4.1 A
Förutsättningar
Sidan innehåller länkar.
Kontroll
Färg används inte som det enda visuella sättet att indikera länkar bland icke-länkad text.
Exempel
Länkar i brödtext är understrukna eller visas med fet eller kursiv stil, har en ikon som visar att de är klickbara, eller har en kontrast på minst 3:1 mot omgivande icke-länkad text.
Avsnitt
9.1.3.3 A
Förutsättningar
Det finns länkar som använder enbart bilder (ikoner) för att förmedla relevant information.
Kontroll
Länkar som bara förmedlar information via bilder eller symboler som kräver synförmåga för att uppfatta går även att uppfatta utan synförmåga.
Exempel
En länk som använder en ikonfont i stället för en bild för att visa en ikon har också maskinläsbar information som beskriver syftet, till exempel aria-label="syfte".

Oväntat beteende vid fokus

Avsnitt
9.3.2.1 A
Förutsättningar
Sidan innehåller fokuserbara element.
Kontroll
Ingenting oväntat inträffar till följd av att ett element får fokus.
Exempel

Några exempel på oväntade händelser:

  • ett formulär skickas in när en komponent får fokus
  • ett nytt fönster eller en ny tabbflik öppnas när en komponent får fokus
  • fokus flyttas automatiskt till en annan komponent.

Uppdykande innehåll vid fokus

Avsnitt
9.1.4.13 AA
Förutsättningar
Det finns innehåll som bara visas när ett element får fokus.
Kontroll
Det går att dölja innehåll som visas vid fokus, utan att flytta fokus, såvida inte innehållet visar ett meddelande om felaktig inmatning eller inte skymmer annat innehåll.
Kontroll
Innehåll som visas vid fokus förblir synligt till dess användaren flyttar fokus, väljer att dölja det, eller tills den visade informationen inte längre är relevant.
Undantag
Innehåll som visas helt under webbläsarens kontroll, till exempel tooltips via HTML-attributet title.

Hanterbart med tangentbord

Avsnitt
9.2.1.1 A
Förutsättningar
Sidan innehåller länkar, knappar, formulärfält eller andra interaktiva komponenter.
Kontroll
Alla funktioner i innehållet går att fokusera och hantera via tangentbordet, utan några tidsgränser för varje tangenttryckning.
Undantag
Funktioner där det har betydelse vilken bana användaren flyttar en pekare, inte bara ändpunkterna där operationen inleds och avslutas.

Ingen tangentbordsfälla

Avsnitt
9.2.1.2 A
Förutsättningar
Sidan innehåller element som det går att navigera till med tangentbordet.
Kontroll
Det går att navigera ifrån varje fokuserbart element med tangentbordet.

Layout

Det är av stor vikt att användaren kan anpassa textstorlek, textavstånd och formgivning så mycket som möjligt för att tillgodose varierande behov.

Kontrast för text

Avsnitt
9.1.4.3 AA
Kontroll
Text och bilder av text har ett kontrastförhållande på minst 4,5:1.
Kontroll
Stor text och bilder av stor text har ett kontrastförhållande på minst 3:1.
Undantag
Inaktiva (”utgråade”) komponenter, dekorativa element, logotyper, text i bilder med annat signifikat visuellt innehåll.

Med stor text menas minst 18 punkter (24px) eller 14 punkter fetstil (19px).

Tillägget WAVE ger god hjälp med att kontrollera kontraster, men för bilder av text eller text ovanpå en bakgrundsbild krävs vanligen manuella kontroller.

Inspektören i Chrome kan också visa kontraster på ett enkelt sätt. Klicka på ikonen för att välja element, eller tryck Ctrl+Skift+c, och för sedan muspekaren över det element du vill granska. Chrome visar då en informationsruta som bland annat visar textens konstrast mot bakgrunden och huruvida den är godkänd på nivå A eller AA. (Det är nivå AA som gäller för lagens krav.)

Ikonen för att välja element ligger längst till vänster
Informationsrutan visar färg och kontrast
Ikonen för att välja element och informationsrutan som visas när man håller muspekaren över ett element.

Flexibel layout

Spara en skärmavbildning av sidan om du underkänner det här kravet.

Avsnitt
9.1.4.10 AA
Förutsättningar
Webbsidan är byggd för vertikal skrollning.
Kontroll
Ingen information eller funktion går förlorad och det krävs inte skrollning i två ledder vid displaybredden 320 pixlar.
Metod 1
Använd funktionen Resize i Web Developer Toolbar och sätt bredden till 1280. Zooma sedan sidan till 400 %. Minska zoomgraden stegvis ned till 100 % och kontrollera att inga layoutfel uppstår.
Metod 2
Använd mobilsimulatorn i Firefox (Ctrl+Skift+m) eller motsvarande funktion i Chromes inspektör. Ställ in läget Följsamt/Responsive och bredden 320. Gör vyn gradvis bredare genom att dra i kantlinjen och kontrollera att inga layoutfel uppstår.
Undantag
Sidoskroll kan vara acceptabelt för innehåll som kräver tvådimensionell layout, såsom bilder, kartor, diagram, video, spel, datatabeller, och liknande.
Avsnitt
9.1.4.10 AA
Förutsättningar
Webbsidan är byggd för horisontell skrollning.
Kontroll
Ingen information eller funktion går förlorad och det krävs inte skrollning i två ledder vid displayhöjden 256 pixlar.
Metod 1
Använd funktionen Resize i Web Developer Toolbar och sätt höjden till 1024. Zooma sedan sidan till 400 %. Minska zoomgraden stegvis ned till 100 % och kontrollera att inga layoutfel uppstår.
Metod 2
Använd mobilsimulatorn i Firefox (Ctrl+Skift+m) eller motsvarande funktion i Chromes inspektör. Ställ in läget Följsamt/Responsive och höjden 256. Gör vyn gradvis bredare genom att dra i kantlinjen och kontrollera att inga layoutfel uppstår.
Undantag
Höjdskroll kan vara acceptabelt för innehåll som kräver tvådimensionell layout, såsom bilder, kartor, diagram, video, spel, datatabeller, och liknande.

Om du använder metoden att zooma till 400 % i Firefox, se till att Zooma endast texten i menyn inte är ikryssat.

I Firefox mobilsimulator kan du ställa in bredd och höjd för skärmen
Mobilsimulatorn i Firefox

Att ”ingen information eller funktion går förlorad” betyder att innehåll inte ska bli oåtkomligt på grund av oflexibel design. Att visst innehåll avsiktligt döljs med följsam formgivning är ett medvetet beslut och ska inte leda till underkännande.

Förstoring av text

Avsnitt
9.1.4.4 AA
Förutsättningar
Webbsidan har ingen egen funktion för att ändra textstorleken.
Kontroll
Det går att förstora texten till 200 procent utan att information eller funktion går förlorad.
Metod
  1. Använd funktionen Resize i Web Developer Toolbar och sätt storleken till 1280×1024.
  2. Duplicera tabbfliken.
  3. Zooma den ena fliken till 400 %.
  4. Jämför innehållet i de två flikarna och titta efter text som inte ser ut att vara större i den zoomade fliken. I misstänkta fall, använd inspektören och jämför de beräknade värden för egenskapen font-size.
  5. Minska stegivs zoomgraden ned till 100 %. För varje följsam vy (när andra förändringar än bara förstoringsgraden inträffar), repetera kontrollen i steg 4.
Undantag
Det kan vara acceptabelt att text som är minst dubbelt så stor som standardbrödtext (alltså 32px eller mer) inte förstoras.
Avsnitt
9.1.4.4 AA
Förutsättningar
Webbsidan har en egen funktion för att ändra textstorleken.
Kontroll
Det går att förstora texten till 200 procent utan att information eller funktion går förlorad.
Metod
Använd sidns funktion och öka textstorleken till minst två gånger ursprungsvärdet.

Repetera kontrollen av Uppdykande innehåll vid fokus och Uppdykande innehåll vid hover med förstorad text.

Utökade textavstånd

Spara en skärmavbildning av sidan om du underkänner det här kravet.

Avsnitt
9.1.4.12 AA
Kontroll

Ingen information eller funktion går förlorad vid utökade textavstånd enligt följande:

  • radavstånd (kägel) till minst 1,5 gånger graden
  • styckemellanrum till minst 2 gånger graden
  • teckenavstånd (spärrning) till minst 0,12 gånger graden
  • ordmellanrum till minst 0,16 gånger graden.
Metod
Aktivera tillägget Text spacing.

Ladda om sidan (F5 eller Ctrl+r) för att återställa textavstånden.

Formulär och användargränssnitt

Om sidan inte innehåller formulär eller komplexa interaktiva komponenter kan du gå vidare till avsnittet Ljud och video.

Uppdykande innehåll vid hover

Avsnitt
9.1.4.13 AA
Förutsättningar
Det finns innehåll som bara visas när pekaren befinner sig över ett element.
Kontroll
Det går att dölja innehåll som visas vid hover, utan att flytta pekaren, såvida inte innehållet visar ett meddelande om felaktig inmatning eller inte skymmer annat innehåll.
Kontroll
Det går att föra pekaren över innehåll som visas vid hover, utan att det försvinner.
Kontroll
Innehåll som visas vid hover förblir synligt till dess användaren flyttar pekaren, väljer att dölja det, eller tills den visade informationen inte längre är relevant.
Undantag
Innehåll som visas helt under webbläsarens kontroll, till exempel tooltips via HTML-attributet title.

Ledtexter, instruktioner

Avsnitt
9.3.3.2 A
Förutsättningar
Sidan innehåller fält eller komponenter där användaren förväntas göra val eller mata in information.
Kontroll
Det finns synliga ledtexter eller ifyllnadsanvisningar för alla inmatningsfält eller interaktiva komponenter.
Undantag
Om syftet med fältet är uppenbart för seende krävs ingen synlig ledtext, exempelvis för ett enstaka fält i anslutning till en beskrivande knapp. Då kan det räcka det med en dold ledtext eller exempelvis aria-label som förmedlar informationen till hjälpmedel.

Det är inte tillräckligt att bara använda ett placeholder-attribut. Se tillämpningsanvisning för 3.3.2.

Avsnitt
9.3.3.2 A
Förutsättningar
Sidan innehåller formulär med både obligatoriska och frivilliga fält.
Kontroll
Det framgår av ledtexter eller instruktioner vilka fält som är obligatorisk och/eller frivilliga.

Funktionen Outline Form Fields Without Labels på fliken Forms i Web Developer Toolbar kan vara användbar för att hitta fält som saknar ledtext.

Avsnitt
9.1.3.1 A
Förutsättningar
Sidan innehåller ledtexter.
Kontroll
Ledtexter är uppmärkta med <label> och är kopplade till det fält de tillhör.
Metod
Klicka på ledtexten och kontrollera att fältet får fokus (eller blir markerat, om det är en kryssruta eller radioknapp).
Exempel
<label for="name">Namn</label>
<input id="name">
Exempel
<label><input> Namn</label>
Avsnitt
9.2.4.6 AA
Förutsättningar
Sidan innehåller ledtexter till inmatningsfält eller etiketter (<legend>) för fältgrupper.
Kontroll
Ledtexter och etiketter beskriver syftet med tillhörande fält eller fältgrupp.

Kopplade element

Avsnitt
9.1.3.1 A
Förutsättningar
Sidan innehåller kopplade element, till exempel förslagslista till sökfält eller dialoger till knappar.
Kontroll
Information, struktur och relationer som förmedlas med presentation är också maskinläsbara, eller förmedlas i text.
Metod
Använd inspektören för att kontrollera att ARIA-attribut används korrekt.
Metod
Använd en skärmläsare för att verifiera att kopplingen förmedlas korrekt till uppläsande hjälpmedel.
Exempel
<label for="name">Namn</label>
<input id="name">
Exempel
<label><input> Namn</label>

Namn, roll, värde

Avsnitt
9.4.1.2 A
Förutsättningar
Sidan innehåller användargränssnittskomponenter.
Kontroll
Alla komponenter i användargränssnittet har en roll och ett maskinläsbart namn. Om komponenten har värden är även dessa maskinläsbara.
Metod
Använd inspektören i Chrome för detta, där det finns bra verktyg för att inspektera tillgänglighetsegenskaper. Firefox har ett liknande verktyg som dock är lite svårare att tolka.

Se till att det interaktiva elementet är markerat i kodpanelen; inte något underelement eller en textnod!

<div role="button" aria-label="Låtsasknapp">
  Låtsasknapp som komponent
</div>
Fliken Accessibility visar tillgänglighetsegenskaper
Tillgänglighetsegenskaper (i Chrome) för en komponent som ska fungera som en knapp.

Etiketter i namn

Avsnitt
9.2.5.3 A
Förutsättningar
Sidan innehåller användargränssnittskomponenter med synlig text.
Kontroll
Det maskinläsbara namnet på en komponent innehåller den synliga texten i komponenten.
Metod
Se Namn, roll, värde och Figur 10 för information om hur du granskar det maskinläsbara namnet på en komponent.
Undantag
Tecken som används symboliskt och inte bokstavligt, till exempel ett ”X” för ”stäng” eller ”ta bort”.

Detta krav är viktigt för att personer som använder röststyrning ska veta hur de ska hänvisa till komponenten.

Den synliga texten ska helst vara den första delen av namnet.

Sensoriska kännetecken

Avsnitt
9.1.3.3 A
Förutsättningar
Sidan innehåller knappar eller andra interaktiva element som inte har någon läsbar text, till exempel ikoner.
Kontroll
Knappar eller länkar som enbart innehåller bilder eller symboler som kräver synförmåga för att uppfatta går även att uppfatta utan synförmåga.
Exempel
En knapp som använder en ikonfont i stället för en bild för att visa en ikon har också maskinläsbar information som beskriver roll och syfte, till exempel aria-label="syfte".

Kontrast för komponenter

Avsnitt
9.1.4.11 AA
Förutsättningar
Sidan innehåller formulärfält, knappar eller andra interaktiva komponenter.
Kontroll
Aktiva komponenter i användargränssnittet har ett kontrastförhållande på minst 3:1 mot intilliggande färger.
Exempel
Knappar, inmatningsfält, textrutor, kryssrutor, radioknappar, rullgardinslistor, listrutor.

Om en komponents bakgrundsfärg, kantlinje eller droppskugga ger tillräcklig kontrast mot omgivande färger finns inga specifika krav på kontrast mellan bakgrunden och kantlinjen.

En knapp som innehåller text eller en bild behöver inte ha någon synlig avgränsning.

Oväntat beteende vid inmatning

Avsnitt
9.3.2.2 A
Förutsättningar
Sidan innehåller fält eller komponenter där användaren kan mata in information.
Kontroll
Ingenting oväntat händer till följd av att man ändrar värdet i en komponent, exempelvis skriver in text, markerar eller avmarkerar en kryssruta eller väljer en radioknapp eller ett alternativ i en rullgardinslista.
Exempel
  • Att välja ett alternativ i en rullgardinslista medför inte att en ny sida laddas.
  • Fokus flyttas inte till nästa fält när man matat in ett visst antal tecken.
  • Ett sökresultat uppdateras när man väljer ett filter i en rullgardinslista eller en kryssruta.
Exempel
Att vissa element aktiveras/avaktiveras eller visas/döljs kan vara acceptabelt.
Undantag
Användaren informeras om beteendet före användning.

Felmeddelanden

Avsnitt
9.3.3.1 A
Förutsättningar
Sidan innehåller formulär med validering av indata.
Kontroll
Felmeddelanden visas med text och det framgår vilket fält som är felande.
Metod

Framkalla valideringsfel, till exempel genom att:

  • lämna obligatoriska fält tomma
  • fylla i fler eller färre tecken än tillåtet i ett fält
  • fylla i bokstäver i numeriska fält
  • fylla i en formellt oriktig adress (utan ”@”) i ett e-postfält
  • fylla i för låga eller för höga värden i numeriska fält
  • fylla i datum på ett otillåtet format, eller ett ogiltigt datum
  • fylla i ogiltiga värden i fält där det framgår att det krävs ett specifikt indataformat.

Moderna webbplatser använder ofta tekniker från HTML 5 för att låta webbläsaren sköta mycket av valideringen. Du känner igen sådan validering på att felmeddelandet visas i en ”pratbubbla”. Du kan då behöva sätta denna validering ur spel för att kontrollera att felmeddelanden visas korrekt även för äldre webbläsare.

Tillägget Web Developer Toolbar har användbara funktioner i fliken Forms, exempelvis Remove Form Validation.

Om du hellre vill göra det manuellt:

  1. Öppna inspektören genom att högerklicka på formulärfältet och välja Inspektera element (Firefox) eller Inspektera (Chrome).
  2. Dubbelklicka i fältets källkod för att redigera den och ta bort alla valideringsattribut, såsom min, max, step, minlength, maxlength, pattern, required och attributet type med andra värden än "text" (ändra då till "text").
  3. Stäng inspektören och testa att skriva in ett ogiltigt värde (eller lämna tomt för att testa obligatoriska fält).
  4. Repetera vid behov för att testa olika typer av validering.
Webbläsarens valideringsfel visas i en ”pratbubbla”
Exempel på valideringsfel med ”pratbubbla” i Firefox
Avsnitt
9.1.4.1 AA
Förutsättningar
Sidan visar felmeddelanden, till exempel vid validering av inmatning.
Kontroll
Färg används inte som det enda visuella sättet att förmedla instruktion eller särskilja ett visuellt element.
Exempel
Felmeddelanden indikeras med röd textfärg i kombination med en kantlinje eller en varningsikon.
Avsnitt
9.3.3.3 AA
Förutsättningar
Sidan innehåller formulärfält med kända korringeringsförslag för vissa typer av fel.
Kontroll
Korrigeringsförslagen visas för användaren när man fyller i ett felaktigt värde i fältet.
Exempel (bra)
Ett fält accepterar bara heltalsvärden mellan 1 och 10. Om man skriver in andra tecken än siffror visas felmeddelandet ”Fyll i siffror”. Om man fyller i ett numeriskt värde som är mindre än 1 eller större än 10 visas felmeddelandet ”Fyll i ett värde mellan 1 och 10”.
Exempel (dåligt)
Ett fält accepterar bara heltalsvärden mellan 1 och 10. Om man skriver in andra tecken än siffror eller fyller i ett numeriskt värde som är mindre än 1 eller större än 10 visas felmeddelandet ”Ogiltigt värde”.
Undantag
Detta skulle innebära en säkerhetsrisk eller förfela syftet med fältet.

Statusmeddelanden

Avsnitt
9.4.1.3 AA
Förutsättningar
Webbsidan presenterar statusmeddelanden.
Kontroll
Statusmeddelanden går att identifiera via sin roll, så att de kan presenteras för användaren av hjälpmedel utan att behöva få fokus.
Metod
Testa helst med en skärmläsare och verifiera att statusmeddelandet läses upp utan att du behöver flytta fokus till det. Om du inte har tillgång till en skärmläsare, kontrollera att meddelandets behållare har role="status".

Ett statusmeddelande är en förändring av sidinnehållet som inte innebär en kontextförändring och som förmedlar information till användaren om resultatet av en åtgärd, om vänteläge, om förloppet hos en process eller om förekomsten av felmeddelanden.

Specifika typer av inmatningsfält

Avsnitt
9.1.3.5 AA
Förutsättningar
Sidan använder HTML 5 och innehåller inmatningsfält som inhämtar information om användaren.
Kontroll
Inmatningsfält som inhämtar information om användaren har ett maskinläsbart syfte.
Metod
Inspektera fältet och kontrollera att det har ett autocomplete-attribut med rätt typvärde från den utfällbara listan nedan.
Fördefinierade syften för inmatningsfält
Beskrivning Typ
Fullständigt namn name
Titel (”Herr”, ”Fru” etc) honorific-prefix
Förnamn given-name
Mellannamn additional-name
Efternamn family-name
Suffix (”Jr”, ”fil. kand” etc) honorifix-suffix
Smeknamn, alias nickname
Yrkestitel organization-title
Användarnamn username
Nytt lösenord (vid byte) new-password
Nuvarande lösenord current-password
Företag, organisation eller liknande organization
Gatuadress (flera rader) street-address
Gatuadress (en rad per fält, rad 1) address-line1
Gatuadress (en rad per fält, rad 2) address-line2
Gatuadress (en rad per fält, rad 3) address-line3
Mest särskiljande nivån i adresser med fyra administrativa nivåer address-level4
Tredje nivån i adresser med minst tre administrativa nivåer address-level3
Andra nivån i adresser med minst två administrativa nivåer; typiskt postort address-level2
Minst särskiljande nivån i adresser; exempelvis län address-level1
Landskod, exemplvis SE för Sverige country
Land, exemplvis Sverige country-name
Postnummer postal-code
Fullständigt namn så som angivet på betalkort etc cc-name
Förnamn så som angivet på betalkort etc cc-given-name
Mellannamn så som angivet på betalkort etc cc-additional-name
Efternamn så som angivet på betalkort etc cc-family-name
Kortnummer på betalkort etc cc-number
Giltighetstid för betalkort etc cc-exp
Månadskomponent i giltighetstid för betalkort etc cc-exp-month
Årskomponent i giltighetstid för betalkort etc cc-exp-year
Säkerhetskod (CVV) för betalkort etc cc-csc
Typ av betalkort etc cc-type
Önskad valuta för en transaktion transaction-currency
Önskat belopp för en transaktion transaction-amount
Önskat språk language
Födelsedatum bday
Dagkomponent i födelsedatum bday-day
Månadskomponent i födelsedatum bday-month
Årskomponent i födelsedatum bday-year
Könsidentitet sex
Webbadress för företaget, personen etc url
Fotografi, ikon eller annan bild för företaget, personen etc photo
Telefonummer inklusive landskod tel
Landskodskomponent i telefonummer tel-country-code
Telefonnummer utan landskod tel-national
Telefonnummer utan landskod och riktnummer tel-local
Första delen av telefonnummer efter riktnummer, om tvådelat tel-local-prefix
Andra delen av telefonnummer efter riktnummer, om tvådelat tel-local-suffix
Intern anknytning i telefonnummer tel-extension
E-postadress email
URL som representerar en ändpunkt för ett direktmeddelandeprotokoll impp

Sidor som använder HTML 5 har deklarationen <!DOCTYPE html> först i källkoden. Äldre versioner av HTML använder längre och mer komplicerade deklarationer och riktigt gamla sidor har ofta ingen alls.

Tidsgränser

Avsnitt
9.2.2.1 A
Kontroll
Det finns ingen begränsning för hur lång tid användaren kan interagera med sidan.
Metod
Ett sätt att granska detta är att börja fylla i ett formulär och sedan låta sidan vara öppen i webbläsaren en längre stund (upp till 20 timmar) innan du skickar in formuläret.
Undantag
Tidsgränsen är en nödvändig förutsättning för sidans funktion (exempelvis en tävling eller ett prov), eller är nödvändig av säkerhetsskäl.
Förutsättningar
Det finns tidsbegränsningar, som är mindre än 20 timmar, för sidan.
Kontroll
Tidsgränsen går att stänga av, anpassa, eller utöka till minst 10 gånger ursprungsvärdet.

Detta krav omfattar även session timeouts på webbservern. Vanliga inställningar ligger på 10–30 minuter.

Redigeringsverktyg [osannolikt]

Med ”redigeringsverktyg för innehåll” menas verktyg där användaren kan formatera innehåll som visas på webbsidan för andra användare, till exempel en WYSIWYG-editor i en kommentarsfunktion.

Avsnitt
11.8.2 EN
Förutsättningar
Sidan innehåller redigeringsverktyg för innehåll.
Kontroll
Redigeringsverktyg gör det möjligt att och guidar till att redigera innehålla enligt avsnitt 9 i EN 301 349.
Avsnitt
11.8.3 EN
Förutsättningar
Sidan innehåller redigeringsverktyg för innehåll och verktyget erbjuder omvandling som omstrukturerar eller omkodar innehåll till ett annat format.
Kontroll
Redigeringsverktyg med omvandling bevarar tillgängligshetsinformation i det nya formatet om det stödjer likvärdiga mekanismer.
Avsnitt
11.8.4 EN
Förutsättningar
Sidan innehåller redigeringsverktyg för innehåll.
Kontroll
När ett redigeringsverktyg upptäcker innehåll som inte uppfyller kraven i avsnitt 9 i EN 301 549 erbjuder det förslag på hur bristen kan åtgärdas.
Avsnitt
11.8.5 EN
Förutsättningar
Sidan innehåller redigeringsverktyg för innehåll och verktyget är mallbaserat.
Kontroll
Minst en av mallarna för att skapa innehåll uppfyller kraven i avsnitt 9 i EN 301 549 och identifieras som sådan.

Ljud och video

Textalternativ för tidsberoende medier

Avsnitt
9.1.1.1 A
Förutsättningar
Sidan innehåller ljudklipp, animeringar eller filmer.
Kontroll
Varje ljudklipp, animering och film har ett textalternativ som åtminstone ger en beskrivande bestämning av innehållet.
Exempel
Exempel: En film som visar ett föredrag om webbtillgänglighet har textalternativet ”Föredrag av DIGG om webbtillgänglighet”.
Avsnitt
9.1.2.3 A
Förutsättningar
Sidan innehåller film med inslag i handlingen som inte går att uppfatta utan synförmåga.
Kontroll
Varje film med relevanta inslag som inte går att uppfatta utan synförmåga har en transkription eller syntolkning (ljudbeskrivning) som förmedlar samma information.
Metod
Spela filmen och kontrollera att allt relevant visuellt innehåll förmedlas av transkriptionen eller berättarrösten, i rätt ordning.

Alternativ för ljud och animeringar

Avsnitt
9.1.2.1 A
Förutsättningar
Sidan innehåller förinspelade ljudklipp.
Kontroll
Varje ljudklipp har ett textalternativ som förmedlar samma information i samma ordning, till exempel en transkription.
Metod
Lyssna på ljudklippet och läs samtidigt transkriptionen, och kontrollera att de stämmer överens. Om mer än en röst, kontrollera att det framgår vem som säger vad.
Undantag
Ljudklippet är ett mediealternativ till text – en ljudversion av innehåll som redan finns som text på sidan – och är tydligt märkt som sådant.
Avsnitt
9.1.2.1 A
Förutsättningar
Sidan innehåller animeringar eller förinspelad video utan ljud.
Kontroll
Varje animering har ett textalternativ som förmedlar samma information i samma ordning, till exempel en transkription. Alternativt finns ett ljudklipp som ger samma information och är tydligt uppmärkt som ljudalternativ.
Kontroll
Varje ljudlös video har antingen ett textalternativ eller ett ljudspår som förmedlar samma information i samma ordning.
Undantag
Animeringen eller videon är ett mediealternativ till text – en filmversion av innehåll som redan finns som text på sidan – och är tydligt märkt som sådant.

Textning för hörselskadade

Avsnitt
9.1.2.2 A
Förutsättningar
Sidan innehåller film (rörlig bild med synkroniserat ljud).
Kontroll
Ljudinnehållet i en film har textning för hörselskadade.
Metod
Spela filmen (med textningen synlig) och kontrollera att allt relevant ljud återges i textningen, eller som synlig text i själva filmen.
Undantag
Filmen är ett mediealternativ till text och är tydligt märkt som sådant.

Textning för hörselskadade innebär att alla ljud som är relevanta för handlingen finns med i texten; inte bara dialog. Textning kan vara öppen (”inbränd” i filmen) eller sluten (separat textning som kan slås av eller på).

Syntolkning

Avsnitt
9.1.2.5 AA
Förutsättningar
Sidan innehåller film med inslag i handlingen som inte går att uppfatta utan synförmåga.
Kontroll
Varje film med relevanta inslag som inte går att uppfatta utan synförmåga har syntolkning (ljudbeskrivning) som förmedlar samma information.
Metod
Spela filmen och kontrollera att allt relevant visuellt innehåll förmedlas av en berättarröst.
Exempel
Textskyltar, namnskyltar för talare, relevanta visuella händelser.

Syntolkning, eller ljudbeskrivning, innebär att en berättarröst under pauser i dialogen förmedlar inslag i handlingen som inte går att uppfatta utan synförmåga. Ofta innebär detta en alternativ version av hela filmen, då dagens webbläsare och hjälpmedel saknar stöd för alternativa ljudspår eller textbaserad syntolkning (ett <track>-element med kind="descriptions").

Funktioner för syntolkning i videospelare från tredje part använder ofta förkortningen AD (audio description) eller symbolen Ett öga med tre cirkellinjer som symboliserar ljudvågor.

Videospelare: textning

Avsnitt
7.1.1 EN
Förutsättningar
Sidan använder en egen videospelare för filmer.
Kontroll
Det finns ett sätt att visa textning av filmen. Om textningen är separat från filmen (closed captions) går det att välja om textningen ska visas eller inte.
Avsnitt
7.1.2 EN
Förutsättningar
Sidan använder en egen videospelare för filmer och visar textning.
Kontroll
Textningen är synkroniserad med ljudet i filmen.

Se tillämpningsanvisning för 7.1–7.2.

Avsnitt
7.1.3 EN
Förutsättningar
Webbsidan vidaresänder, omvandlar eller spelar in video med synkroniserat ljud.
Kontroll
Textningsinformationen bevaras vid omvandling så att den kan visas enligt avsnitt 7.1.1 och 7.1.2.

Videospelare: syntolkning

Avsnitt
7.2.1 EN
Förutsättningar
Sidan använder en egen videospelare för filmer och det finns syntolkning av film.
Kontroll
Det finns ett sätt att spela upp syntolkning av filmen via standardljudkanalen.

Om videospelaren inte har en specifik separat hantering av syntolkning anses den uppfylla detta krav om den låter användaren välja och spela flera ljudspår.

Avsnitt
7.2.2 EN
Förutsättningar
Sidan använder en egen videospelare för filmer och spelar upp syntolkning av film.
Kontroll
Syntolkningen är synkroniserad med det audiovisuella innehållet.
Avsnitt
7.2.3 EN
Förutsättningar
Webbsidan vidaresänder, omvandlar eller spelar in video med synkroniserat ljud.
Kontroll
Syntolkningsinformationen bevaras vid omvandling så att den kan spelas upp enligt avsnitt 7.2.1 och 7.2.2.

Videospelare: kontroller

Avsnitt
7.3 EN
Förutsättningar
Sidan använder en egen videospelare för filmer.
Kontroll
Kontroller för att aktivera texting och syntolkning finns på samma interaktionsnivå (samma antal klick) som de primära mediekontrollerna.

Udda sidor

Det här avsnittet innehåller kontroller av sådant som sällan återfinns på normala webbsidor. Du bör titta närmare på dessa kontroller om sidan:

Giltig kod

Avsnitt
9.4.1.1 A
Kontroll
Sidans HTML-kod validerar utan fel.
Metod
Enklast är att använda Web developer toolbar och välja Validate Local HTML under Tools-fliken.

Detta skickar sidans källkod till W3C:s validator. Se till att använda anonymiserat data eller dummydata för personuppgifter för att inte riskera att bryta mot dataskyddsförordningen.

Innehållets ordning

Avsnitt
9.1.3.2 A
Förutsättningar
Innehållets ordning har inverkan på sidans betydelse.
Kontroll
Innehållet kommer i en meningsfull logisk ordning.
Metod
Duplicera fliken i webbläsaren och jämför sidan med och utan CSS för att se att betydelsen inte förändras av formgivningen.
Exempel
Innehållet visas i flera spalter. Utan CSS kommer en spalt i taget (”kolumnvis”), inte ”radvis”.

I Firefox kan du stänga av sidans stilmall genom att trycka på Alt för att visa menyn och därefter välja Visa | Sidstil | Ingen. Tillägget Web developer toolbar har också en funktion för att stänga av CSS i såväl Firefox som Chrome.

Välj Visa/Sidstil/Ingen i menyn
Menyalternativ för att stänga av CSS i Firefox

Förhindra allvarliga konsekvenser

Avsnitt
9.3.3.4 AA
Förutsättningar
Sidan medför att användaren ingår rättsliga åtaganden, utför ekonomiska transaktioner, ändrar/raderar lagrade användardata eller liknande.
Kontroll

Minst ett av följande är uppfyllt:

  • åtgärden går att ångra
  • användaren ges möjlighet att rätta upptäckta inmatningsfel
  • användaren får förhandsgranska och bekräfta inmatade uppgifter innan transaktionen slutförs.

Ingen störning av tillgänglighetsfunktioner

Avsnitt
11.6.2 EN
Förutsättningar
Sidan innehåller användargränssnittskomponenter.
Kontroll

Komponenterna stör inte systemets dokumenterade tillgänglighetsfunktioner, till exempel:

  • stavningskontroll
  • tangentbordsnavigering
  • skärmläsare
  • förstoring.
Undantag
Detta sker på användarens uttryckliga begäran.

Användarinställningar

Avsnitt
11.7 EN
Kontroll
Det finns ett sätt att använda webbsidan som tillämpar användarens plattformsinställningar för färger, kontrast, teckensnitt, teckenstorlek och fokusmarkör.

Repeterande tangenter [osannolikt]

Avsnitt
5.7 EN
Förutsättningar
En komponent på sidan har en egen repeterafunktion när man håller ned en tangent, som inte går att stänga av.
Kontroll
Fördröjningen innan repetitionen börjar är, eller går att justera till, minst 2 sekunder.
Kontroll
Repetitionsfrekvensen är, eller går att justera ned till, ett tecken per 2 sekunder.

Detta gäller bara komponenter som har en egen repeterafunktion. Vanliga formulärfält i HTML använder operativsystemets eller webbläsarens inbyggda repetering.

Tolerans för dubbeltryckningar [osannolikt]

Avsnitt
5.8 EN
Förutsättningar
Sidan innehåller ett tangentbord eller en nummersats.
Kontroll
Fördröjningen efter ett tryck på en tangent fram tills tillämpningen reagerar på nästa tangenttryckning är, eller går att justera upp till, minst 0,5 sekunder.

En-knapps snabbtangenter [osannolikt]

Avsnitt
9.2.1.4 A
Förutsättningar
Sidan implementerar snabbtangenter som aktiveras med en ensam tangent (bokstav, siffra, skiljetecken eller symbol, utan Ctrl, Skift, Alt eller andra modifierare).
Kontroll

Minst ett av följande är uppfyllt:

  • det går att stänga av snabbtangenten
  • det går att byta ut snabbtangenten så att den använder en eller flera icke skrivbara tangenter (såsom Ctrl eller Alt)
  • snabbtangenten är bara aktiv när komponenten ifråga har fokus.
Metod
Tryck på alla tangenter med skrivbara tecken, ett och ett.

Urskilja komponenter [osannolikt]

Avsnitt
5.5.2 EN
Förutsättningar
Sidan innehåller interaktiva komponenter.
Kontroll
Det går att urskilja komponenter för att interagera med webbsidan utan krav på synförmåga, och utan att utföra den funktion som är kopplad till komponenten.

Kravet är troligen uppfyllt för webbsidor som uppfyller kraven på Namn, roll, värde.

Status via känsel eller ljud [osannolikt]

Avsnitt
5.6.1 EN
Förutsättningar
Sidan innehåller omkopplare eller motsvarande komponenter som presenteras visuellt.
Kontroll
Status för varje omkopplare går att avläsa med känsel eller hörsel, utan att statusen ändras.
Exempel
En <div> med role="checkbox" som visuellt emulerar en kryssruta har också attributet aria-checked för att indikera status på ett maskinläsbart sätt.

Kravet är troligen uppfyllt för webbsidor som uppfyller kraven på Namn, roll, värde.

Visuell status [osannolikt]

Avsnitt
5.6.2 EN
Förutsättningar
Sidan innehåller omkopplare eller motsvarande komponenter som indikeras taktilt eller med ljud, men inte visuellt.
Kontroll
Status för omkopplare som indikeras taktilt eller audiellt går även att avläsa visuellt.

Flera samtidiga handgrepp [osannolikt]

Avsnitt
5.9 EN
Förutsättningar
Sidan innehåller funktioner som kräver flera samtidiga handgrepp för att utföra.
Kontroll
Det finns ett alternativt sätt att utföra samma funktion, som inte kräver samtidiga handgrepp.
Exempel
Man behöver trycka på två tangenter samtidigt (till exempel Ctrl+p), eller trycka en tangent (Ctrl) och en musknapp samtidigt, eller använda flera fingrar samtidigt på en touchskärm.

Aktivering av tillgänglighetsfunktioner [osannolikt]

Avsnitt
5.2 EN
Förutsättningar
Sidan har dokumenterade tillgänglighetsfunktioner.
Kontroll
Det går att aktivera dokumenterade tillgänglighetsfunktioner för att möta ett specifikt behov utan att det krävs ett handhavande som inte stödjer behovet.

Biometri [osannolikt]

Avsnitt
5.3 EN
Förutsättningar
Sidan använder biometriska kännetecken för att identifiera användaren eller för att ge åtkomst till tjänsten.
Kontroll
Det finns alternativa sätt (biometriska eller icke-biometriska) att identifiera användaren eller för att ge åtkomst till tjänsten, som inte beroende av ett specifikt biometriskt kännetecken.
Exempel
Fingeravtryck, näthinneavläsning, ansiktsigenkänning.

Biometriska metoder som använder skilda biologiska kännetecken ökar chansen att personer med funktionsnedsättning har åtminstone ett av de angivna kännetecknen.

Omvandling [osannolikt]

Avsnitt
5.4 EN
Förutsättningar
Webbplatsen har funktioner som omvandlar information eller kommunikation.
Kontroll
Omvandling av information eller kommunikation bevarar all dokumenterad icke-proprietär information som tillhandahålls för tillgänglighet, i den mån sådan information ryms i och stöds av målformatet.
Exempel
Det finns en funktion på sidan för att spara den som PDF.

Återkommande innehåll

Dessa kontroller testar sådant som vanligen återkommer på många eller alla sidor inom en webbplats. Om du utför kontrollerna på en sida behöver du oftast inte repetera dem på varje sida.

Ett par kontroller handlar om konsekvent innehåll och kräver jämförelser mellan flera sidor.

Giltig kod

Avsnitt
9.4.1.1 A
Kontroll
Sidans HTML-kod validerar utan fel.
Metod
Enklast är att använda Web developer toolbar och välja Validate Local HTML under Tools-fliken.
Välj Validate Local HTML under Tools-fliken
Använd gärna Web developer toolbar för att validera koden.

Detta skickar sidans källkod till W3C:s validator. Se till att använda anonymiserat data eller dummydata för personuppgifter för att inte riskera att bryta mot dataskyddsförordningen.

Konsekvent navigering

Avsnitt
9.3.2.3 AA
Förutsättningar
Det finns navigeringsfunktioner som förekommer på flera av webbplatsens sidor.
Kontroll
Navigeringsfunktioner som förekommer på flera sidor presenteras i samma inbördes ordning på sidorna.
Exempel
Meny, snabblänkar, skipplänkar.

Det behöver inte vara exakt samma länkar på alla sidor, men de länkar som är gemensamma på flera sidor ska ha samma ordning sinsemellan.

Konsekvent benämning

Avsnitt
9.3.2.4 AA
Förutsättningar
Det finns komponenter som förekommer på flera sidor inom webbplatsen och har samma funktion.
Kontroll
Komponenter benämns konsekvent på alla sidor där de förekommer.
Exempel
Ett adressfält med ledtexten Ort i ett formulär har inte ledtexten Postort i ett annat formulär.

Flera sätt att navigera

Avsnitt
9.2.4.5 AA
Kontroll
Det finns mer än ett sätt att hitta sidor på webbplatsen.
Exempel
Länkar, sökfunktion, webbplatskarta, innehållsförteckning, A–Ö.
Undantag
Sidor som utgör steg i en process, eller ett resultat som baseras på användarens inmatade uppgifter – exempelvis i ett formulär.

Avbryta klick

Avsnitt
9.2.5.2 A
Förutsättningar
Sidan har funktioner som utförs med ett finger eller en musknapp.
Kontroll

Minst ett av följade är uppfyllt:

  • ingen del av funktionen utförs när man trycker ned ett finger eller en musknapp
  • funktionen slutförs när man släpper upp fingret eller musknappen och går att avbryta eller ångra
  • att släppa fingret eller musknappen innebär en återställning av den förändring som gjordes vid nedtryckning
  • det är en förutsättning att funktionen utförs vid nedtryckning.

Detta gäller funktioner som tillhandahålls av webbsidan (till exempel med hjälp av JavaScript), inte funktioner som är inbyggda i webbläsaren eller operativsystemet.

En-knapps snabbtangenter [osannolikt]

Avsnitt
9.2.1.4 A
Förutsättningar
Sidan implementerar snabbtangenter som aktiveras med en ensam tangent (bokstav, siffra, skiljetecken eller symbol, utan Ctrl, Skift, Alt eller andra modifierare).
Kontroll

Minst ett av följande är uppfyllt:

  • det går att stänga av snabbtangenten
  • det går att byta ut snabbtangenten så att den använder en eller flera icke skrivbara tangenter (såsom Ctrl eller Alt)
  • snabbtangenten är bara aktiv när komponenten ifråga har fokus.
Metod
Tryck på alla tangenter med skrivbara tecken, ett och ett.

Dokumentation och support [osannolikt]

Om webbplatsen inte har någon produktdokumentation eller supporttjänster – vilket få webbplatser har – kan du fortsätta till avsnittet Touchskärmar, mobila enheter och pekare.

Produktdokumentation kan finnas antingen separat från eller integrerad med webbplatsen.

Produktdokumentation

Avsnitt
12.1.1 EN
Förutsättningar
Webbplatsen har tillgänglighets- eller kompatibilitetsfunktioner och det finns produktdokumentation.
Kontroll
Dokumentationen räknar upp och förklarar hur man använder webbplatsens tillgänglighets- och kompatibilitetsfunktioner.
Avsnitt
12.1.2 EN
Förutsättningar
Det finns produktdokumentation för webbplatsen.
Kontroll

Dokumentationen erbjuds i minst ett av följande digitala format:

  • webbaserat, tillgängligt enligt avsnitt 9 i EN 301 549
  • icke-webbaserat, tillgängligt enligt avsnitt 10 i EN 301 549

Supporttjänster

Avsnitt
12.2.2 EN
Förutsättningar
Det finns supporttjänster för webbplatsen.
Kontroll
Supporttjänster erbjuder information om de tillgänglighets- och kompatibilitetsfunktioner som ingår i produktdokumentationen.
Avsnitt
12.2.3 EN
Förutsättningar
Det finns supporttjänster för webbplatsen.
Kontroll
Supporttjänster tillmötesgår kommunikationsbehov hos personer med funktionsnedsättning, antingen direkt eller via ombud (till exempel teckentolk).
Avsnitt
12.2.4 EN
Förutsättningar
Det finns supporttjänster för webbplatsen.
Kontroll

Dokumentation som tillhandahålls genom supporttjänster erbjuds i minst ett av nedanstående digitala format:

  • webbaserat, tillgängligt enligt avsnitt 9 i EN 301 549
  • icke-webbaserat, tillgängligt enligt avsnitt 10 i EN 301 549

Touchskärmar, mobila enheter och pekare [osannolikt]

Kontrollerna i det här avsnittet rör pekare (mus, penna, fingrar), mobila enheter (telefoner, surfplattor) och touchskärmar. Du kan behöva en enhet med touchskärm för att verifiera vissa krav.

Pekargester

Avsnitt
9.2.5.1 A
Förutsättningar
Sidan har funktioner som använder komplexa gester.
Kontroll
Funktioner som använder komplexa gester går att utföra med en enda pekare utan rörelseberoende.
Undantag
Komplexa gester är en förutsättning för funktionen.

En komplex gest är en åtgärd som kräver att man använder flera fingrar samtidigt eller är beroende av fingrars eller pekares rörelser, inte bara förflyttningens ändpunkter. Ett exempel är att trycka med två fingrar och dra isär dem för att förstora innehåll. Samma funktion bör då finnas som en vanlig knapp.

Detta gäller funktioner som tillhandahålls av webbsidan (till exempel med hjälp av JavaScript), inte funktioner som är inbyggda i webbläsaren eller operativsystemet.

Avbryta klick

Avsnitt
9.2.5.2 A
Förutsättningar
Sidan har funktioner som utförs med ett finger eller en musknapp.
Kontroll

Minst ett av följade är uppfyllt:

  • ingen del av funktionen utförs när man trycker ned ett finger eller en musknapp
  • funktionen slutförs när man släpper upp fingret eller musknappen och går att avbryta eller ångra
  • att släppa fingret eller musknappen innebär en återställning av den förändring som gjordes vid nedtryckning
  • det är en förutsättning att funktionen utförs vid nedtryckning.

Detta gäller funktioner som tillhandahålls av webbsidan (till exempel med hjälp av JavaScript), inte funktioner som är inbyggda i webbläsaren eller operativsystemet.

Styrning genom rörelse av hela enheten

Avsnitt
9.2.5.4 A
Förutsättningar
Det finns funktioner som styrs genom att röra hela den mobila enheten.
Kontroll
Funktioner som styrs genom att röra hela den mobila enheten går att utföra med hjälp av komponenter i användargränssnittet och det går att stänga av känsligheten för rörelse av enheten.
Undantag
Rörelsestyrningen sker via enhetens gränssnitt för tillgänglighet eller är en förutsättning för funktionen.

Orientering

Avsnitt
9.1.3.4 A
Kontroll
Innehåll och funktion är inte begränsade till en viss orientering (stående eller liggande).
Metod
Vrid enheten 90° och kontrollera att innehållet anpassar sig efter orienteringen, alltså att textriktningen ändras så att den följer orienteringen..
Undantag
Om orienteringen är nödvändig, till exempel för innehåll som till sin natur är avlångt.

Alternativa sätt att hantera

Avsnitt
5.5.1 EN
Förutsättningar
Sidan innehåller knappar eller andra typer av kontroller som kräver att användaren greppar, nyper eller vrider på kontrollen.
Kontroll
Det finns sätt att aktivera kontroller som inte kräver finmotorisk kontroll eller muskelkraft.

Det här kravet är normalt sett uppfyllt på webbsidor som använder HTML korrekt.

Tvåvägs röst- och videokommunikation [osannolikt]

Exempel på tvåvägs röstkommunikation är om webbsidan erbjuder röstbaserad kommunikation med representanter för den offentliga aktören, eller en AI-baserad lösning för röstdialog liknande Apples Siri och VoiceOver, men inbyggd i webbsidan.

Bandbredd för tal

Avsnitt
6.1 EN
Förutsättningar
Sidan erbjuder tvåvägs röstkommmunikation.
Kontroll
Frekvensomfångets övre gräns är minst 7 kHz.

Realtidstext

Avsnitt
6.2.1 EN
Förutsättningar
Sidan erbjuder tvåvägs röstkommmunikation.
Kontroll
Det går att skriva med realtidstext (RTT).

Realtidstext (RTTReal-Time Text) innebär att text skickas och tas emot i realtid, och kan användas tillsammans med, eller i stället för, röstkommunikation.

Kravet är tillämpligt för webbsidor där användaren kan interagera på samma sätt som i ett telefonsamtal eller ett videosamtal, till exempel med en kundtjänst. Det är också tillämpligt för sidor där användaren interagerar med talsyntes och röststyrning, förutsatt att det sker genom en funktion på webbsidan, inte via användarens egna hjälpmedel.

Avsnitt
6.2.2 EN
Förutsättningar
Sidan erbjuder tvåvägs röstkommmunikation och realtidstext.
Kontroll

Det går att särskilja avsändarens och mottagarens texter. Texterna går även att särskilja maskinellt, så att en skärmläsare kan skilja mellan sänd och mottagen text.

Exempel
Avsändarens och mottagarens texter visas i olika textfält eller med olika kombinationer av färg och teckensnitt (inte bara färg).
Avsnitt
6.2.3 EN
Förutsättningar
Sidan erbjuder tvåvägs röstkommmunikation och realtidstext.
Kontroll

Sidan har interoperabilitet med något av följande sätt:

  • Kommunikation med Voice over IP (VoIP) med det vanligaste protokollet för att signalera och starta IP-telefonsamtal – Session Initiation Protocol (SIP). Det protokoll som ska användas för överföring av realtidstext är då RFC 4103.
  • Traditionell texttelefoni: modemkommunikation enligt protokollet ITU-T V.18 över det traditionella telefonnätet (PSTN). Denna metod är ovanlig.
  • Standarder för IP Multimedia Sub-System (IMS), som är en arkitektur inom telekomområdet. Bör rimligen inte vara relevant för rena webbtillämpningar.
  • Annat protokoll som ska vara relevant och tillämpbart samt kunna indikera tecken som förloras i uppkopplingen, liksom tecken som är förvanskade.
Avsnitt
6.2.4 EN
Förutsättningar
Sidan erbjuder tvåvägs röstkommmunikation och realtidstext.
Kontroll
Sidan sänder inmatad realtidstext till nätverket inom 1 sekund.

Inmatning av realtidstext anses ha inträffat när användaren matat in tillräckligt många tecken för att programvaran ska kunna avgöra vilka tecken som ska skickas. Detta skiljer mellan system där texten matas in ordvis (till exempel via röstigenkänning eller prediktiva system) och system där varje tecken genereras individuellt.

Nummerpresentation

Avsnitt
6.3 EN
Förutsättningar
Sidan erbjuder tvåvägs röstkommmunikation och nummerpresentation eller motsvarande.
Kontroll
Den uppringandes identitet är tillgänglig som text och minst en annan modalitet.
Exempel
Namnet på den som ringer läses upp av talsyntes eller presenteras för uppläsning med användarens skärmläsare.

Videosamtal

Avsnitt
6.5.2 EN
Förutsättningar
Sidan erbjuder tvåvägs videokommunikation.
Kontroll
Högsta möjliga upplösning i videosamtalet är minst QCIF, det vill säga 176×144 pixlar.
Avsnitt
6.5.3 EN
Förutsättningar
Sidan erbjuder tvåvägs videokommunikation.
Kontroll
Högsta möjliga bildväxlingsfrekvens i videosamtalet är minst 12 bilder per sekund vid ideala nätverksförhållanden.

Efterarbete

När du granskat en webbsida

  1. För varje underkänt avsnitt, öka antalssiffran i kolumnen Antal underkända sidor på bladet Webbsidor.

  2. Sätt sidans status till Klar i urvalsdokumentet.

När du granskat klart webbplatsen

  1. Fyll i brister i tillgänglighetsredogörelsen på bladet Redogörelse i protokollet:

    1. Skriv 1 i kolumnen Underkänd för varje krav som inte är uppfyllt.

    2. Gå igenom bladet Anmärkningar och skriv ja i kolumnen Beskrivet i redogörelsen för de brister som är adekvat beskrivna i redogörelsen.

  2. Färdigställ granskningsprotokollet; se Slutför protokollet.