Guldhanden 2020 - hur bra är finalisterna på tillgänglighet?

Guldhanden är Sitevisions årliga pris och delas ut på Sitevisiondagarna, i år den 21:a oktober. För att kvalificera sig ska webbplatsen eller intranätet vara byggt i publiceringssystemet Sitevision. Det tycks inte finnas några publika kriterier varken för vilka webbplatser som går till final eller hur vinnarna i respektive kategori väljs ut. Det som har nämnts tidigare år är att ”den webbplats som bäst uppfyller sin målgrupps behov” inom sin kategori utses till vinnare. Det finns med andra ord en potential till att framstå lite mindre godtyckligt framåt och förhoppningsvis kommer Sitevision öppet deklarera hur tävlingen går till lite mer i detalj.

Vill du skippa intron och hoppa till respektive utvärderad webbplats?

Privat sektor:

• Collectum
• Euro Accident
• Nordnet
• Opus Bilprovning

Offentlig sektor:

• Havs- och Vattenmyndigheten
• Kungliga musikhögskolan
• Mälardalens högskola
• Säffle kommun

tl;dr - vem var egentligen bäst?

Bild 1: Havs- och vattenmyndigheten tog hem förstaplatsen, med god marginal. Se data nedan.

Betyget är som lägst 1 och som högst 5.

1. Havs- och vattenmyndigheten – 4,95 av 5 i betyg
2. Kungliga musikhögskolan – 4,43 av 5 i betyg.
3. Euro Accident – 3,89 av 5 i betyg.
4. Collectum – 3,78 av 5 i betyg.
5. Säffle kommun - 3,78 av 5 i betyg.
6. Mälardalens högskola – 2,96 av 5 i betyg.
7. Nordnet – 2,67 av 5 i betyg.
8. Opus Bilprovning – 1,31 av 5 i betyg.

Nordnet och Opus Bilprovning var de enda i testet som var sämre än den genomsnittliga startsidans tillgänglighet, alltså jämfört med de drygt 2000 webbplatserna som Webperf utvärderar kontinuerligt.

Webperf utvärderar Guldhanden-finalisternas tillgänglighet

Den 13:e oktober offentliggjorde Sitevision vilka åtta publika webbplatser (och fyra intranät) som blev finalister i Guldhanden 2020. Direkt påbörjades Webperfs utvärdering av hur bra webbplatserna presterar på tillgänglighetsområdet. Något som är lagkrav för de i offentlig sektor genom DOS-lagen, men man kan också påminna sig om att bristande tillgänglighet inom privat sektor innebär att man sorterar bort kunder baserat på deras förmågor. Inte direkt i linje med hur företag ska ta sitt samhällsansvar.

Om tillgänglighetstestet

Det är exakt samma kod, betyg och utvärdering som körts på dessa webbsidor som också körs kontinuerligt på alla listade webbplatser som finns på Webperf. Alltså tillgänglighetstestet Axe. Rent praktiskt har testet körts via Google Lighthouse API version 5.

Adresser att testa har hämtats via respektive webbplats sitemap, där ett urval gjorts för att fånga upp de cirka 400 senaste sidorna. Några av webbplatserna hade ingen sitemap och då har ett gäng adresser hämtats via webbplatsens ordinarie gränssnitt.

Aktuellt genomsnittligt Axe-betyg i oktober är 2,84 av 5 för de webbplatser som listas på Webperf.

En potentiellt betydande skillnad är att Webperf bara kontrollerar startsidor i de kontinuerliga testerna. Det finns anledning att tro att det förekommer fler tillgänglighetsbrister på startsidor än en typisk undersida, främst för att startsidor tenderar att ha fler olika designkomponenter och i största allmänhet vara mer komplexa i sin uppbyggnad.

Förbehåll om automatiserade tillgänglighetstester likt detta

”Please note that only 20% to 50% of all accessibility issues can automatically be detected. Manual testing is always required.”

– utvecklarna bakom tillgänglighetstestet Axe

Det är viktigt att komma ihåg att dessa automatiserade tillgänglighetstester inte är ett facit för hur pass tillgänglig en webbplats är. De hittar som mest upp till hälften av de olika sorters tillgänglighetsbrister som kan finnas på en webbplats. Dock är de enkla nog att använda att man åtminstone bör ha städat undan dessa brister. Vill du själv göra stickprov med hjälp av Axe finns ett bra tillägg för Chromium-baserade webbläsare här eller så använder du web.dev’s tjänst Measure och kollar delrapporten om tillgänglighet.

För den som ska göra ett mer rejält arbete med tillgänglighet behöver man komplettera med manuella tester och helst med hjälp av expertis på området. Om du vill påbörja ditt tillgänglighetsarbete på egen hand har vi en artikel för dig, med lathund och Excel-mall redo.

Ett annat alternativ för massiv tillgänglighetsutvärdering är verktyg som Siteimprove som Webperf har utvärderat under hösten.

Bästa kommersiella webbplats

Euro Accident

367 sidor på Euro Accidents webbplats har undersökts. Enligt Webperfs betygssystem har de ett genomsnittligt betyg på 3,89 av 5 möjliga när det gäller tillgänglighet.

Euro Accident har betyg från två tvåor, 35 treor och resten är fyror. Att en webbplats saknar sidor utan brister brukar tyda på systematiska brister, vilka ibland är förhållandevis enkla att fixa till i och med att de ofta finns på ett fåtal ställen. Som bäst har de tillgänglighetstestade sidorna på Euro Accident två olika sorters tillgänglighetsbrister. Det kan handla om:

• Links do not have a discernible name
• Background and foreground colors do not have a sufficient contrast ratio.

En av sidorna med sämst betyg hade följande problem:

• Links do not have a discernible name
• [aria-*] attributes do not match their roles
• Background and foreground colors do not have a sufficient contrast ratio.
• Heading elements are not in a sequentially-descending order

Att länkar inte har lämpliga namn och att kontrastförhållandet är illa är återkommande problem vid samtliga stickprov bland de testade sidorna. Ett fullständigt testprotokoll (för alla webbplatserna) hittar du i slutet av denna skrivelse.

Collectum

Av 155 tillgänglighetstestasde sidor på Collectums webbplats blev genomsnittsbetyget 3,78 av 5. Collectum är alltså näst bäst av de fyra finalisterna inom privat sektor.

Collectum har en handfull sidor som alla har fyra stycken olika tillgänglighetsbrister. 22 st sidor med tre brister och resterande har två brister. Exempel på brister från de sämre sidorna är den om hur man fyller i pensioneringsavtalet:

1. Background and foreground colors do not have a sufficient contrast ratio.
2. Heading elements are not in a sequentially-descending order
3. [aria-*] attributes do not match their roles
4. Buttons do not have an accessible name

Den första bristen är ett problem för mer eller mindre alla, gammal som ung. För den synsvaga, samt den med god syn som råkar använda mobilen utomhus i starkt solsken.

Nordnet

Nordnets genomsnittliga tillgänglighetsbetyg blev 2,67 av 5, då baserat på endast 42 utvärderade sidor. Intressant nog var deras sämsta sida den som ska visa avtal för abonnemang, en sida som dessutom hänvisar användaren att logga in. Kanske en länk som inte var tänkt att publicera öppet på webbplatsen?

Nordnets betyg sträcker sig från bottenbetyget till som bäst en trea. Den sämsta sidan har följande tillgänglighetsbrister:

• Background and foreground colors do not have a sufficient contrast ratio.
• Form elements do not have associated labels
• <frame> or <iframe> elements do not have a title
• Links do not have a discernible name
• Some elements have a [tabindex] value greater than 0
• Heading elements are not in a sequentially-descending order
• <dl>’s do not contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements.

Opus Bilprovning

Tillgänglighetstestningen av Opus Bilprovning gav genomsnittsbetyget 1,31 av 5 möjliga. Notera att en webbplats som har fel på samtliga mätbara vis skulle få 1,0 i betyg som sämst, så detta är inte ett hedersamt betyg.

140 st sidor på webbplatsen har utvärderats. Av dem har bara 2 % ett bättre betyg än Webperfs genomsnitt på tillgänglighet. En dryg fjärdedel har en tvåa i betyg och resten har lägsta tänkbara betyg.

Fel som förekommer mer eller mindre frekvent är

• Links do not have a discernible name
• [role]s are not contained by their required parent element
• Form elements do not have associated labels
• Some elements have a [tabindex] value greater than 0
• Background and foreground colors do not have a sufficient contrast ratio.
• Image elements do not have [alt] attributes
• Buttons do not have an accessible name
• Lists do not contain only <li> elements and script supporting elements (<script> and <template>).
• [user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.

Här finns en hel del att ta tag i.

Bästa offentliga webbplats

Nedan finalister finns också här på Webperf, dock är de utspridda i olika kategorier. För dessa webbplatser är DOS-lagen tillämpbar sedan slutet på september. Så hur klarar de av dessa obligatoriska krav? Låt oss se efter!

Havs- och vattenmyndigheten

Om du vill se aktuellt betyg kan du gå till följande länk Havs- och vattenmyndigheten, 13:e oktober var totalbetyget 3,9 av 5 på Webperf. Detta räckte till 10:e plats av 204 i kategorin övrig offentlig sektor i oktober

Havs- och vattenmyndigheten har visserligen en tillgänglighetsredogörelse placerad i sidfoten, bakom en länk med texten “Tillgänglighet”. Trots detta misslyckas de med att leva upp till DOS-lagen eftersom de inte har någon länk till tillsynsmyndigheten DIGG.

Tillgänglighetstestningen av Havs- och vattenmyndigheten var på totalt 401 sidor från webbplatsens sitemap. Genomsnittsbetyget blev imponerande 4,95 av 5 möjliga. Snyggt jobbat!

En sida sticker dock ut i all denna briljans med en två i betyg. Extra synd att det är just sidan med blanketter och etjänster – E-tjänster och blanketter - Havs- och vattenmyndigheten. Felen på den sidan är enligt Axe följande:

• ARIA input fields do not have accessible names
• Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
• [aria-*] attributes do not match their roles
• List items (<li>) are not contained within <ul> or <ol> parent elements.

Utöver detta enskilda lågvattenmärke inom webbplatsen finns 11 stycken sidor som har tre till fyra i betyg.

En annan skum grej är att man i sin robots.txt anger HTTP istället för HTTPS för sin sitemap. Även sitemapens innehåll refereras med HTTP.

Kungliga musikhögskolan

Aktuellt Webperf-betyg kan du få på Kungliga musikhögskolan, i skrivande stund hade de 3,7 av 5 i totalbetyg på Webperf, vilket räckte till en delad 4:e plats av 73 i kategorin utbildning och forskning i oktober.

Kungliga musikhögskolan nämner inget om tillgänglighet på sin startsida i mitten av oktober. Däremot kan man som för många andra webbplatser hitta Kungliga musikhögskolans tillgänglighetsredogörelse under “Om webbplatsen”. De har listat ett antal saker de tycker är oskäligt betungande, ett område som kommer bli intressant att följa juridisk praxis kring när DOS-lagen körts några gånger genom rättsväsendet.

På Kungliga musikhögskolans webbplats tillgänglighetstestades 433 sidor som hämtats från deras sitemap. Genomsnittsbetyget blev 4,43 av 5, vilket är riktigt bra. Om man jämför Kungliga musikhögskolan med Havs- och vattenmyndigheten så har Kungliga musikhögskolan en jämnare kvalitet. Två sidor med en trea i betyg, resten har cirka till hälften en fyra och andra hälften en femma.

De sidor med sämst betyg på Kungliga musikhögskolans webbplats är dessvärre den svenska (och engelska versionen av) sidan som listar deras konserter och evenemang. Helt enkelt de sidor som bör vara väldigt högt prioriterade. Den svenska konsertsidan lider av följande brister:

• [aria-*] attributes do not match their roles
• Form elements do not have associated labels
• Background and foreground colors do not have a sufficient contrast ratio.

Det finns lågt hängande frukter på de sidor som har en fyra i betyg, nämligen följande:

• <frame> or <iframe> elements do not have a title – ge iframes en titel helt enkelt.
• Background and foreground colors do not have a sufficient contrast ratio - inventera designen och öka kontrasten mellan förgrund och bakgrund.

Finns också en handfull sidor där länkar inte har en textbeskrivning som går att uppfatta, samt någon sida där formulär inte kodats korrekt. Men bara genom att fixa de två först nämnda bristerna skulle webbplatsen i ett uppföljande test vara väldigt nära toppbetyg som sitt genomsnitt.

Säffle kommun

Säffle kommuns låg i oktober på en delad 234:e plats av 289 kommuner samtidigt som totalbetyget var 3,0 av 5 på Webperf. Vilket med undantag från kategoribetyget för webbstandard var sämre än den genomsnittliga kommunen på samtliga punkter. Men som någon klok människa sa någon gång så måste hälften vara sämre än genomsnittet :)

Säffle kommun har en tillgänglighetsredogörelse som ser ut att leva upp till de formella kraven. De nämner också en ambition att ha tagit bort alla brister under 2020.

Säffle kommun kommer visserligen trea i detta test i sin kategori men presterar ändå rätt bra med sina 3,78 av 5 i tillgänglighetstestet. För Säffle kommun utvärderades 496 sidor hämtade från deras webbplats, då de inte listar en sitemap i sin robots.txt

Cirka var tjugonde sida på Säffle kommuns webbplats fick en tvåa i betyg. Gemensam nämnare för de flesta av dessa sidor är att de ligger inom delen som handlar om att upptäcka Säffle, det vill säga inte den bästa av reklam. En avvikare från det temat sätter fingret på årets utmaningar kring tillgänglig information till samhället med anledning av COVID-19. Säffle har dessvärre en tvåa i betyg på sidan Covid-19 information till företagare (www.saffle.se/arbete-och-foretagande/covid-19-information-till-foretagare.html) vilket kanske är mer olyckligt än sidan med tips för den som vill arrangera evenemang. Samtidigt är det svårt att rangordna olika delar av en kommuns uppdrag.

Företagarsidan brister på följande punkter:

• Some elements have a [tabindex] value greater than 0
• Background and foreground colors do not have a sufficient contrast ratio.
• Links do not have a discernible name
• Heading elements are not in a sequentially-descending order

Ingen sida är utan de fel som kan upptäckas automatiskt, vilket skulle ha gett en femma i betyg. 83 % av sidorna har dock en fyra i betyg och har 1-2 st olika sorters fel per sida vilket tyder på ett systematisk designfel. Utan att ha gjort ett djupdyk tycks följande vara vanligt förekommande:

• Some elements have a [tabindex] value greater than 0
• Background and foreground colors do not have a sufficient contrast ratio.

Gissningsvis något som Säffle kommuns webbutvecklare kan göra en stor skillnad inom med några timmar insats.

Mälardalens högskola

Mälardalens högskola listas på Webperf sedan lång tid tillbaka. De hade 3,2 av 5 i totalbetyg på Webperf i mitten av oktober och låg på en delad 22:a plats av 73 i kategorin utbildning och forskning i oktober .

Mälardalens högskola lät konsultfirman HiQ göra tillgänglighetsgranskningen av deras webbplats, i samband med publiceringen i slutet av 2019, och Mälardalens högskola har en tillgänglighetsredogörelse.

Mälardalens högskola fick 771 sidor tillgänglighetstestade. Betygen på dessa sidor går från tvåor till fyror, alltså varken topp- eller bottenbetyg. 7 % av sidorna fick tvåor och knappt 4 % fick fyror, med andra ord ett jämnt resultat då resten fick treor. Notera att startsidor på Webperf i genomsnitt har 2,84 av 5 i betyg, så detta är inte ett resultat att jubla över.

Bland de bättre sidorna finns fel som följande:

• Links do not have a discernible name - alltså att det inte går att läsa sig till eller höra vad en länk avser att göra, exempelvis ta användaren till etjänsterna.
• Some elements have a [tabindex] value greater than 0 - Deque, de som gör Axe-testet, har tips om tabindex

Den av sidorna med flest sorters tillgänglighetsfel hade 5 st, bland annat att rubriker kommer i en oväntad ordning, samt att det varit ett tveksamt kontrastförhållande mellan förgrund och bakgrund.

• Heading elements are not in a sequentially-descending order
• Links do not have a discernible name
• [id] attributes on active, focusable elements are not unique
• Background and foreground colors do not have a sufficient contrast ratio.
• Some elements have a [tabindex] value greater than 0

Om du inte vill missa framtida rapporter och jämförelser är det värt att anmäla dig till Webperfs nyhetsbrev. Det kommer ett utskick per månad.

Mer om Sitevision och Guldhanden

• Guldhanden (SiteVisiondagarna)
• Finalister Guldhanden 2020 (SiteVisiondagarna)
• Vinnare av Guldhanden 2019 - långsammast vinner pris (Webperf)
• SiteVision-priset Guldhanden 2018 - hur står sig de nominerade inom offentlig sektor? (Webperf)

Ladda ner insamlad data från tillgänglighetstestet?

Ladda ner nedan fil och packa upp. Där finns en filtreringsbar Excel-fil men också semikolonseparerade CSV-filer för respektive testad webbplats.

• sitevision-guldhanden-2020.csv.zip (Zip-fil, 1 Mb)