Tillgänglighetsanalys
I den här analysen redovisar jag en granskning av Karlstad kommuns webbplats utifrån kraven i DOS-lagen och den internationella standarden WCAG 2.2.
Jag valde att granska Karlstads kommuns webbplats eftersom den representerar en medelstor kommun som förmedlar samhällsviktig information som vänder sig till olika målgrupper.
Syftet är att identifiera kritiska hinder för digital inkludering och hur webbplatsen upplevs av användare med olika förutsättningar.
1 Om analysen
Webbplats: karlstad.se
Granskad sida: Strategiska planer och program
Standard: WCAG 2.2 nivå AA
Den här tillgänglighetsanalysen riktar in sig på webbsidan Strategiska planer och program på Karlstads kommuns webbplats. Syftet är att bedöma hur väl sidan uppfyller kraven i WCAG 2.2 nivå AA samt att identifiera brister som påverkar användbarheten för invånare med funktionsnedsättning.
2 Metod och avgränsning
Granskningen har utförts med en kombination av:
Manuella tester av tangentbordsnavigation och fokusordning
Sematisk analys med hjälp av verktyg som WAVE och Axe DevTools
Genomgång av sidans struktur, rubrikhierarki och innehåll
Kontrastmätning enligt WCAG-algoritmen
Granskning av kontrast, fokusmarkeringar och visuella signaler
Översiktlig bedömning av dokumentlänkar (PDF)
Bedömning av språk, begriplighet och förutsägbarhet
Översiktlig testning i olika webbläsare
Analysen omfattar inte djup teknisk kodgranskning eller fullständig testning med alla hjälpmedel, utan den fokuserar på praktisk användbarhet i linje med WCAG 2.2 nivå AA.
3 Bedömning
Webbplatsen har en stabil teknisk grund och ett innehåll som i huvudsak är välstrukturerat. Den går att använda med tangentbord och fungerar tekniskt i moderna webbläsare. Samtidigt finns brister som påverkar användbarheten, särskilt för användare med synnedsättning, kognitiva svårigheter eller koncentrationssvårigheter.
De största problemen rör visuell tydlighet, inkonsekvent feedback vid interaktion samt ett stort beroende av PDF-dokument.
4 Resultat per WCAG-princip
4.1 Möjlig att uppfatta
Status: Delvis uppfylld
Innehållet är organiserat i flikar som avgränsar informationen på ett överskådligt sätt. Det minskar kognitiv belastning och gör att sidan blir lättare att orientera sig på. Textens läsbarhet är god och kontrasten mellan text och bakgrund uppfyller kraven enligt WCAG 2.2 nivå AA.
Vid manuell granskning identfieras dock brister i hur strukturen visualiseras:
Flikarnas ljusgula bakgrund har låg kontrast mot sidans vita bakgrund, vilket gör avgränsningen mellan flikarna svår att uppfatta.
Vid hovring med mus sker ingen tydlig visuell förändring i flikytan, endast muspekarens form ändras. Detta ger en begränsad återkoppling på att hela ytan faktiskt är interaktiv och att flikarna går att öppna.
Det här innebär att användaren kan läsa innehållet, men får otillräckligt visuellt stöd för att snabbt förstå sidans struktur och hierarki. För användare med synnedsättning eller kognitiva och koncentrationssvårigheter kan detta leda till ökad ansträngning vid orientering, trots att innehållet i sig är tillgängligt.
Figur 1. Bristen av visuell förändring i flikarna med hovring av muspekare.. Även om muspekaren ändrar form vid hovring över fliken sker ingen visuell förändring av flikytan. Den ljusgula bakgrundsfärgen förblir oförändrad och användaren får ingen tydlig indikation på att hela ytan är interaktiv.
Berörda WCAG-delar
1.3.1 Information och relationer
1.4.3 Kontrast minimum
1.4.11 Kontrast för komponenter
Åtgärdsförslag
Förstärk kontrasten mellan flikarnas visuella yta och bakgrund
Ge klickbara ytor tydlig visuell inramning även i viloläge
Säkerställ att hovring med mus och ger en tydlig visuell återkoppling
4.2 Möjligt att hantera
Status: Delvis uppfylld
Sidan är tekniskt möjlig att använda med tangentbord. Tabbordningen följer den visuella layouten på ett logiskt sätt och det går att navigera mellan länkar, knappar och flikar utan att fastna.
Brister identifieras dock i hur navigeringen stöds visuellt:
Fokusmarkeringar runt element är inkonsekventa och varierar beroende på om användaren navigerar med mus eller tangentbord. Användaren måste tolka hur systemet kommunicerar interaktionen istället för att kunna förlita sig på igenkänning.
Vissa element får en svag grå markering med låg kontrast, vilket kan skapa osäkerhet kring var fokus befinner sig.
Analysen med WAVE visar även på enstaka redundanta länkar, vilket innebär att hjälpmedelsanvändare måste navigera förbi samma länkade information mer än en gång.
Figur 2: Några exempel på hur fokusmarkeringen och den visuella återkoppling skiftar mellan olika element och inmatningsmetoder.
Berörda WCAG-delar
2.1.1 Tangentbord
2.4.7 Fokus synligt
3.2.4 Konsekvent identifiering
Åtgärdsförslag
Inför en konsekvent och tydlig fokusmarkering för alla interaktiva element.
Säkerställ att fokusindikatorer har tillräcklig kontrast enligt WCAG 2.2 nivå AA.
Låt komponenter bete sig likadant oavsett om de används med mus eller tangentbord.
4.3 Möjlig att begripa
Status: Delvis uppfylld
Det redaktionella innehållet håller mestadels en godkänd nivå av språklig begriplighet. Sidan har en tydlig rubrikstruktur med korrekt hierarki, vilket underlättar förståelsen av sidans uppbyggnad.
Samtidigt förekommer utmaningar:
Användningen av fackspråk och abstrakta begrepp kan skapa hinder om de inte förklaras i sitt sammanhang.
Den största utmaningen för begripligheten är den visuella inkonsekvensen; när interaktiva element signalerar på olika sätt tvingas användaren lägga energi på att tolka gränssnittet snarare än att ta till sig innehållet.
Berörda WCAG-delar
3.1.1 Språk på sidan
3.2.3 Konsekvent navigering
Åtgärdsförslag
Förenkla språket genom att minska abstrakta begrepp och långa nominalfraser.
Anpassa formuleringar till mottagarens perspektiv snarare än organisationens.
Gör länktexter mer beskrivande och ange tydligt när länkar leder till dokument.
4.4 Robust
Status: Delvis uppfylld
Sidan fungerar tekniskt stabilt i moderna webbläsare och den grundläggande HTML-strukturen är tillräcklig för att sidan ska fungera med hjälpmedel som skärmläsare. Den tekniska stabiliteten på HTML-sidan är överlag god.
Samtidigt har sidan ett stort beroende av PDF-dokument för att förmedla viktig samhällsinformation. Det framgår inte tydligt om dessa dokument är fullt tillgänglighetsanpassade, vilket innebär att tillgängligheten riskerar att försämras när användaren lämnar webbplatsens HTML-miljö.Sidans omfattande användning av ARIA-kod kräver också att implementeringen är felfri för att förbli robust över tid.
5 Slutsats och vägen framåt
Analysen visar att sidan har en stabil teknisk grund (0 Errors enligt WAVE) och ett relevant innehåll. Samtidigt visar en manuell granskning att brister i visuell tydlighet och inkonsekvent interaktion påverkar tillgängligheten.
För användaren innebär detta att informationen finns, men inte alltid är lätt att ta till sig. För att förbättra användbarheten bör kommunen fokusera på att förstärka den visuella kontrasten för komponenter, standardisera fokusmarkeringar och säkerställa att även det länkade dokumentinnehållet lever upp till samma tillgänglighetskrav som själva webbsidan.
Berörda WCAG-delar:
1.3.1 Information och relationer
4.1.2 Namn, roll, värde
Åtgärdsförslag
Säkerställ att alla publicerade dokument uppfyller WCAG 2.2 nivå AA.
Ange dokumenttyp och innehåll tydligt i länktexter.
Publicera centralt innehåll även som tillgänglig webbsidetext när det är möjligt..
Mina reflektioner och vad jag lärt mig
När jag arbetade med den här analysen blev det väldigt tydligt för mig att tillgänglighet ska ses ur ett helhetsperspektiv. Att göra den här typen av analys handlar mindre om att bocka av en lista med krav, och mer i att sätta sig in i användarens situation.
Jag märkte hur min egen synskada påverkade hur jag uppfattade struktur, visuella signaler och interaktion, och hur lätt det är att missa eller feltolka information när gränssnittet inte är tydligt. Samtidigt började jag ställa mig frågor ur andra perspektiv: om jag hade en kognitiv svårighet, hur skulle jag reagera här? Om jag har svårt att förstå en text, hur upplevs det här stycket då?
Jag såg hur små detaljer, som otydliga visuella signaler eller inkonsekvent beteende i gränssnittet, små skillnader i hur flikar visuella element och fokus beter sig kan göra en stor skillnad för den som navigerar med tangentbord, använder skärmläsare eller har nedsatt syn.
Mitt arbete här har även gjort mig mer medveten om hur tätt språk, design och teknik hänger ihop. Brister en del så påverkas helheten. Det är så lätt att man råkar skapa ett hinder utan att själv märker det, särskilt om man inte tillhör målgruppen som påverkas.
Allt det här ser jag som ett kvitto på att tillgänglighet inte är något man lägger på i slutet av ett projekt. Det är en grundförutsättning för en inkluderande kommunikation, något jag vill fortsätta arbeta med i praktiken.