Under 2023 genomförde företaget ETU en tillgänglighetsgranskning av åtta vanliga sidtyper på SCB:s webbplats. Granskningen baserades på WCAG 2.1.

Sidor som har granskats

• Startsida
• Tabell och diagram
• Lönesök
• Produktsida
• Standardsida för områden
• Hitta statistik
• Startsida för område
• Standardsida

Innehåll

Beskrivande sidtitlar

Sidtitlarna på de granskade sidorna är bra och sammankopplas väl till sidornas respektive h1:a, men det saknas ”Webbplatsägare” till sidtitlarna. En sidas titel ska bestå av två delar, exempelvis ”Lönestatistik – Hur mycket tjänar...? | SCB”. På så sätt vet användarna att de är kvar på webbsidan.

Ange sråkändringar i koden

Språkändringar anges inte på en korrekt sätt koden på sidorna ”Hitta statistik” och ”startsidan för svensk yrkesklassificering (SSYK)”.

Landmärken 

Det finns på alla de testade sidorna en knapp som när den aktiveras fäller ut en meny. Utan ett navigationslandmärke, så kallat nav-element, går menyn inte att hitta med hjälp av snabbkommandon. Den utfällda menyn är omgärdad av ett nav-element men elementet är inte namngivet, vilket behövs för att kunna särskilja nav-elementet från andra element på sidan.

Det finns på alla de testade sidorna två landmärken av samma typ nästlade i sidfoten. Det innebär att det finns ett yttre landmärke för sidfoten med hjälp av ett footer-element, och innanför det yttre landmärket finns samma landmärke igen i form av attributet role=”contentinfo”. Nästlade landmärken av samma typ skapar problem för användare med skärmläsare som navigerar med snabbkommandon för att hoppa mellan landmärken.

Erbjud möjlighet att hoppa förbi återkommande innehåll

I koden saknas en semantisk markering för sökfunktionen. Attributet role=”search” kan med fördel användas.

De olika delarna av sidan behöver namnges. När det finns två nav-element bör de till exempel få namn som berättar vad i menyn är som är en ”huvudmeny” och en ”undermeny”.

Gör korrekta tabeller 

När information presenteras i en datatabell bör den märkas upp så att en användare med reducerad synförmåga ska kunna orientera sig i tabellen och kunna förstå vad informationen som presenteras betyder. Det görs inte på ett korrekt sätt på de testade sidorna ”Lönesök”, ”Tabell och diagram”, ”Produktsida”, ”Startsida för områden” och”Standard för svensk yrkesklassificering (SSYK)”.

Koda listor som listor

För att skärmläsaranvändare ska förstå att innehållet på sidan är placerat i en lista så måste listan kodas som en lista. 

Bland de testade sidorna finns det på några sidor några sidor så kallade definitionslistor. Det finns också ul-listor inne i definitionslistorna samt nästlade definitionslistor. Avlägsna de definitionslistor som finns på ett antal av webbplatsens sidor och använd stilmallen (CSS) för presentationen. 

Använd JavaScript på rätt sätt

Det finns på ett antal av webbplatsens sidor en knapp som, när den aktiveras, startar en funktion som läser upp innehållet på sidan samtidigt som det upplästa innehållet blir markerat. Om webbläsarens JavaScript inaktiveras fungerar inte den funktionen på ett korrekt sätt. 

På flera av de testade sidorna finns det stapeldiagram som är  beroende av JavaScript. Om webbläsarens JavaScript inaktiveras så visas dessa stapeldiagram inte alls. Det saknas information om detta.

Informera om att webbplatsen inte fungerar fullt ut utan JavaScript. Gör detta med hjälp av attributet noscript. 

Rubriker

Gruppera genom rubriker

På de testade sidorna "lönesök" och "hitta statistik" kan innehållet grupperas tydligare med hjälp av rubriker. Det gör det möjligt att med vissa hjälpmedel hoppa till eller över rubriker. 

Skapa rubriker med h-element

Rubriker ska vara uppmärkta med h1, h2 och så vidare. På sidorna ”Startsida”, ”Tabell och diagram”, ”Lönesök”, ”Standardsida för områden” och ”Standard för svensk yrkesklassificering” finns det rubriker som inte är uppmärkta på ett korrekt sätt. 

Skriv beskrivande rubriktexter

Beskrivande rubriker och sidtitlar hjälper läsare att skumma innehållet och navigera snabbt mellan rubriker.  På sidorna ”Startsida” och ”Produktsida” finns det rubriker som inte är tillräckligt tydliga. 

Separera presentationen och innehållet

På sidorna  ”Lönesök” och ”Standardsida för områden” är inte Information och presentation separerade från varandra på ett korrekt sätt. Det bör inte finnas någon intern stilmall där elementet style finns inom head-elementet eller att style-attributet används till element i uppmärkningskoden utan att en extern stilmall används med hjälp av link-element inom head-elementet. 

Placera innehåll i en meningsfull ordning

När webbplatsen besöks för första gången finns det på den besökta sidan ett popupfönster som ger användaren möjlighet att acceptera alla kakor eller själv hantera kakorna. Fönstret ligger inte först i ordningen för hur tangentbordsfokus hamnar. Det går att helt ignorera fönstret och navigera till resten av sidan. Användaren vet då inte vilka kakor som används. Popupfönstret för kakor bör ligga först i kodorningen. I popupfönstret bör det också finnas information om vilken inställning för kakor som gäller om användaren ignorerar fönstret.

Bilder

Textalternativ till bilder

För personer som inte ser bilder är det viktigt att beskriva bilder som bär information. Det saknas i bilder på sidorna ”Lönesök”, ”Standardsida för områden”, ”Hitta statistik”, ”Startsida för område (Tema Sveriges ekonomi)”. 

Tangentbord

Skapa skipplänkar för att hoppa över innehåll som upprepas

Det bör finnas länkar för att hoppa över innehåll som upprepas på alla eller flertalet sidor på webbplatsen, så kallade skipplänkar.

På de granskade sidorna finns det en skipplänk för att hoppa direkt till huvudinnehållet. Dock syns inte länken när den får tangentbordsfokus. Det kan skapa missförstånd hos användare utan skärmläsare som navigerar med hjälp av tangentbordet då det  finns ett osynligt element. De användare som navigerar på en sida med hjälp av röststyrning har inte heller någon synlig textetikett som informerar om vilket som är det röstkommando som aktiverar länken.

Se till att det, vid tangentbordsfokus, går att se skipplänken visuellt. 

Gör en logisk tab-ordning

För en användare som navigerar med hjälp av tangentbord ska ordningen för tangentbordsfokus vara logisk. Fokusordningen ska upplevas på samma sätt som hur innehållet presenteras på skärm eller i en skärmläsare.

Knappen ”Meny” finns på alla de testade sidorna. När den aktiveras fälls en meny ut. När menyn fälls ut och därefter in igen så går det fortfarande att nå de länkar som finns i menyn. De uppenbarar sig då som osynliga element, vilket är förvirrande för användare som navigerar med hjälp av tangentbordet. Se till att det inte går att nå de länkar som finns i menyn då menyn inte är utfälld. 

När tangentbordsfokus finns i menyn går det att nå den bakomliggande sidan utan att aktivt ha stängt menyn. Det finns en risk att användare med skärmläsare är osäkra på om de fortfarande är kvar i menyn eller på den bakomliggande sidan. Efter att den sista länken i menyn har fått tangentbordsfokus bör tangentbordsfokus hamna på knappen ”Stängmeny” istället för att vandra vidare till den bakomliggande sidan. 

Ordningen för tangentbordsfokus i sidhuvudet följer inte den visuella läsordningen från vänster till höger, uppifrån och ned. 

Vid en zoom på 175 procent och uppåt byts sökfunktionen i sidhuvudet ut mot en länk som när den aktiveras fäller ut sökfunktionen. Tangentbordsfokus hamnar då inte i det utfällbara området utan på den bakomliggande sidan. Se till att tangentbordsfokus hamnar i det utfällbara området direkt.

På de flesta av de testade sidorna finns länken ”Lyssna” som när den aktiveras framkallar en synlig ”Play-knapp” och en synlig ”Stopp-knapp”. Dock finns det ytterligare knappar och reglage till denna applikation som är osynliga vilket är förvirrande.  Låt alla knappar till applikationen vara väl synliga, eller göm några av dem för tangentbordet med hjälp av attributet tabindex=”-1”. 

Markera tydligt vilket fält eller element som är i fokus

Användare som navigerar med tangentbordet behöver få en tydlig markering av vilken länk eller komponent som är i fokus. Det finns avvikelser för detta på sidan ”Startsida för områden”.

Tillgängliga puffar

Med puffar menas i allmänhet en bild (img-element), en rubrik och ett stycke text som finns inom ett klickbart område (a-element). Innehållet i en puff bör grupperas för att användare med skärmläsare ska kunna förstå vart puffen börjar och slutar. Det kan göras genom att placera rubriken först eller gruppera med semantisk information använd till exempel article-elementet.

Puffarna på de testade sidorna är i många fall grupperade med listor och inte article. Listor bör inte användas för att gruppera innehåll (vissa skärmläsare läser inte upp listor som används för att gruppera annat än länklistor).

Användning av färger för att förmedla information

Användare ska kunna se och förstå vad som är länkar även om de saknar färgseende. Att enbart använda färg som enda indikation på länkar är inte godtagbart. Vad som är länkar måste kompletteras med annat än färg till exempel en symbol eller understrykning. På sidorna ”Lönesök”, ” Standardsida för områden” behöver det korrigeras. 

Alla funktioner ska vara hanterbara med hjälp av tangentbordet

Alla funktioner på en webbsida ska vara åtkomliga med hjälp av tangentbord eller ett tangentbordsliknande gränssnitt. I sökfunktionens inmatningsfält i navigeringsmenyn uppstår det en ”X” symbol, som indikerar användaren att rensa inmatningen. Denna ikon är inte nåbar för användare som navigerar med tangentbord. 

Layout

Se till att text går att förstora utan problem

Det ska vara möjligt att förstora texten till dubbel höjd och bredd utan att text försvinner eller krockar med annat innehåll.  På de sidor som har testats förändras majoriteten av innehållets teckenstorlek inte vid en förstoring på 200 procent. På sidfoten och sidhuvudet appliceras ingen förändring. Stora delar av alla sidors huvudinnehåll justeras inte heller.  Se till att det går att förstora enbart texten till 200 procent. Använd de relativa måtten em. och % för att bestämma storleken på textinnehåll. 

Använd tillräcklig kontrast mellan text och bakgrund

Kontrasten mellan bakgrundsfärg och textfärg är viktig för läsbarheten, det är extra viktigt för personer med nedsatt syn eller nedsatt färgseende. Det finns avvikelser på sidorna ”Lönesök”, ”Standardsida för områden”.

Scrollning i vertikal led

Skapa en layout som fungerar på en 320 pixlar bred skärm utan att information eller funktionalitet går förlorad, utan scrollning i mer än en riktning. Det finns avvikelser på sidorna ”Tabell och diagram”, ”Lönesök”, och ”Standard för svensk yrkesklassificering (SSYK)”.

Formulär och användargränssnitt

Ledtexter och instruktioner

Det ska vara tydligt vad användaren ska skriva in i ett formulärfält oavsett vilken utrustning eller behov användaren har. Om formulärfältet är obligatoriskt att fylla i så ska detta framgå i ledtexten med hjälp av text (obligatoriskt) eller en asterisk (*). Det ska också finnas semantisk information om ett formulärfält är obligatoriskt. När det krävs en särskild inmatning från användaren ska det finnas en tydlig etikett eller instruktion som hjälper användaren att förstå vad som ska matas in. Det finns avvikelser på sidan ”Lönesök”.

Se till att alla komponenter fungerar

Vid en zoom på 175 procent och uppåt byts sökfunktionen i sidhuvudet ut mot en länk. När länken aktiveras fälls  sökfunktionen ut. En länk förväntas ladda in en ny sida medan en knapp förväntas utföra en aktivitet, som i detta fall fälla ut sökfunktionen. Låt länken ”Sök” som framträder då granden av zoom är 175 procent och uppåt ha rollen knapp (button). 

Det saknas semantisk information om den utfällbara sökfunktionen är utfälld eller inte. Infoga semantisk information till om ifall det utfällbara området är utfällt eller inte. Använd det dynamiska attributet aria-expanded till detta, attributet ska ha värdet ”true” om området är utfällt annars ”false”. 

Se till att text på knappar och kontroller överensstämmer med maskinläsbara etiketter

De som använder röststyrning för att navigera uttalar de synliga textetiketterna för menyer, länkar och knappar som finns på skärmen. Därför är det viktigt att den synliga etiketten överensstämmer med den maskinläsbara texten. Avvikelse finns på sidan ”Startsida”.

Se till att hjälpmedel kan presentera statusmeddelanden som inte är i fokus

Användare med hjälpmedel missar ibland meddelande som dyker upp på skärmen utanför fokus. Det är viktigt att användaren uppmärksammas på viktiga meddelanden även om de presenteras utanför det område på sidan som användaren har i fokus. Det finns avvikelser på sidorna ”Lönesök”, ”Standardsida för områden”.

Återkommenade innehåll

Under återkommande innehåll finns sådant som återkommer på många sidor på webbplatsen.

Huvudmeny

Det finns synlig information om vilken länk i huvudmenyn som är aktiv. Det saknas dock semantisk information om detta.

• Länken ”Meny” i huvudmenyn saknar semantisk information om att det finns en undermeny kopplad till länken. Infoga semantisk information till den länk i huvudmenyn som är aktiv.
• När undermenyn fälls ut hamnar inte tangentbordsfokus direkt i undermenyn utan på den bakomliggande sidan. Det tar ett par tangentbordstryckningar att nå det första elementet i undermenyn. Se till att det direkt går att nå det första element som finns i den undermeny som fälls ut när länken ”Meny” aktiveras. 
• Väl inne i undermenyn går det att nå den bakomliggande sidan utan att först aktivt ha stängt undermenyn. Om tangentbordsfokus finns i undermenyn, se till att det inte går att lämna den och navigera till den underliggande sidan utan att undermenyn aktivt har stängts. 
• Det finns synlig information om vilken länk i undermenyn som är aktiv. Det saknas dock semantisk information om detta. 
• När den aktiva länken finns inom en utfällbar undermeny så är vägen dit tydlig då det finns tecken för utfällda undermenyer och länkarna längs vägen är mer och mer indragna i undermenyn. Det saknas dock semantisk information om detta. 
• Det finns knappar i undermenyn som fäller ut ytterligare en undermeny när de aktiveras. Det saknas semantisk information om att det finns undermenyer kopplade till dessa knappar.
• Länken ”Stäng meny” finns i undermenyn. Den går inte att nå eller aktivera med hjälp av tangentbordet.
• Undermenyn är omgärdad med ett nav-element, vilket är korrekt. Dock saknar det en benämning så att det går att särskilja från andra nav-element på sidan. 
• Om en användare fäller ut och därefter in menyn finns ett antal osynliga element i form av länkar kvar. Se kapitlet ”Gör en logisk tab-ordning” ovan.

Meny på webbsidor

• Sidmenyn saknar ett nav-element alternativt ett attribut role=”navigation”. 
• Det finns synlig information om vilka länkar i sidmenyn som är aktiv, men det saknas semantisk information om detta.
• Det finns länkar i sidmenyn som när de aktiveras både laddar in en sida och fäller ut ytterligare menyer. Det finns synlig information om det utfällbara området är utfällt eller inte men det saknas semantisk information om detta. Det saknas semantisk information om att länkarna är kopplade till menyer. 

Se till att koden validerar

Den standard som valts och som anges i koden ska validera. Standarden är framtagen för att alla utvecklare av webbplatser, webbläsare och hjälpmedel ska ha en gemensam bas att bygga på och följa. Att följa standarder gör det möjligt för alla användare att nå och använda webbplatser oavsett vilka verktyg användaren har.

Det finns fyra typer av fel som inte får förekomma:

• Att inte använda kompletta start och avslutningstaggar.
• Att ange samma id-värde på två olika element på samma sida.
• Att ange samma attribut två gånger i samma element (exempelvis två alt-attribut i samma img-element).
• Att inte bädda in elementen enligt standarden.

Avvikelse:

• Startsidan: 1 fel, 1 varning.
• Tabell och diagram: 9 fel.
• Lönesök: 3 fel, 1 varning.
• Produktsida: 7 fel, 3 varningar.
• Standardsida för områden: 61 fel, 35 varningar.
• Hitta statistik: 11 fel, 1 varning.
• Startsida för område (Tema Sveriges ekonomi): 16 fel, 2 varningar.
• Standard för svensk yrkesklassificering (SSYK): 126 fel, 1 varning.

Benämn funktioner konsekvent

För att användare ska ha lätt att förstå webbplatsen är det viktigt att vara konsekvent i vad saker på webbplatsen heter. Att känna igen sig minskar kognitiv belastning. Länkar som leder till samma sida bör ha samma länktext. Länkar som leder till olika sidor bör ha olika länktexter. Det finns avvikelser på sidorna ”Produktsida” och ”Standardsida för områden”.

Tillbaka till tillgänglighetsredogörelsen