Konkret tillgänglighet i Sitevision

Tillgänglighet och lagkrav

Under Sitevisiondagarna 2019 föreläste vi om hur man kan jobba konkret med att förbättra tillgängligheten på sin webbplats i Sitevision, med små medel. Den här artikeln sammanfattar föredraget och dyker dessutom ännu djupare på vissa punkter.

Det nya webbtillgänglighetsdirektivet har satt upp tillgänglighet på de flesta agendor. Det är ett komplicerat område som kan kännas övermäktigt och svårt att greppa. Här presenterar vi våra bästa tips på hur man bedriver ett framgångsrikt tillgänglighets­arbete - och utan att det kostar skjortan.

Testa din webbplats

För att kunna åtgärda tillgänglighetsproblem måste man kunna identifiera dem först. Det finns ett antal självtester man kan göra och

Test 1 - Tangentbordsnavigering

Stå överst på en sida och ställ markören i adressfältet och tryck sedan med tab-tangenten för att fokusera på (hoppa till) nästa länk på sidan eller tryck shift + tab för att hoppa bakåt.

  1. Kontrollera att det första du kommer till är val för hoppa över upprepat innehåll. Detta är oftast genvägar för att gå direkt till meny och direkt till innehåll.
  2. Kontrollera att alla länkar markeras tydligt när de fokuseras
  3. Kontrollera att tabbordningen är logisk, det vill säga att ordningen blir som förväntat utifrån hur länkarna presenteras på sidan.

Test 2 - Stäng av javascript

I webbriktlinjerna rekommenderas att man ser till att webbplatsens viktigaste funktioner går att använda utan javascript Länk till annan webbplats.. Att slå av och på javascript kan vara lite bökigt i webbläsarens inställningar men det finns små smidiga webbläsartillägg som gör det smidigt:


Vanliga problem när javascript är avslaget

  • Expanderbart innehåll går inte att fälla ut
  • Sökfunktion och menyer går inte att öppna
  • Funktioner baserade på javascriptbibliotek som React och Angular laddas inte alls

Test 3 - Automatiska tester/testverktyg

WCAG 2.1 är en omfattande samling regler och det är i princip omöjligt att kontrollera alla punkter kontinuerligt utan hjälp av automatiska tester. Här kommer våra bästa tips på självhjälp.

  • Slå på Sitevisions funktioner för kvalitetskontroll Länk till annan webbplats.
    • Aktivera “Utökat tillgänglighetsstöd“
    • “Validera med W3C vid publicering” (kollar att HTML-koden validerar enligt angiven doctype)
    • “Kontrollera tillgänglighet vid publicering” (gör enklare kontroller). Tillgänglighetskontrollen kan schemaläggas.

  • Siteimprove Accessibility Checker Länk till annan webbplats. är ett gratisplugin till Chrome som gör Siteimproves tester på enskilda sidor. Jämfört med betalversionen så får man finna sig en avskalad version som enbart kollar tillgängligheten på sidan. Texterna är på engelska och det saknas översikt över hela webbplatsens status och så vidare, men det är ett bra alternativ för stickprovstestning. Ett av verktygets största styrkor är att det visar visuellt på sidan var ett problem finns. Ibland är det svårt att tolka WCAG:s tekniska uttryck och här ligger Siteimprove i framkant.

  • Axe Länk till annan webbplats. är det kanske mest populära verktyget för självtester i tillgänglighetscommunityn just nu. Verktyget är också ett tillägg till Chrome och hamnar som en flik i DevTools (Ctrl + shift + I).

  • Microsoft Accessibility Insight Länk till annan webbplats. är ett tillägg till Chrome och Edge där man kan göra både automatiska tester samt bli guidad till mer manuella tester via en wizard. Även detta verktyg kan markera förekommande problem i webbläsaren. Ett av verktygets styrkor är den föredömliga visualiseringen av tabbordningen på en webbplats, via funktionen Tab stops.

  • Alla ovanstående verktyg testar att kontrast mellan text och bakgrund är tillräcklig. Det finns många olika verktyg som hjälper till att välja ut färger med bättre kontrast, ett av våra favoritverktyg är tjänsten Accessible Colors Länk till annan webbplats. som föreslår både alternativ för- och bakgrundsfärg.

  • Via webbplatsen lix.se Länk till annan webbplats. kan man testa sina texter ur ett läsbarhetsperspektiv. Många långa ord gör texter svårlästa och det här verktyget hjälper dig hitta bovarna.

Testa webbplatsen i flera olika verktyg, de är olika bra på att hitta och beskriva olika problem.

Vanliga redaktionella misstag

Vi har listat de vanligaste redaktionellt orsakade tillgänglighetsproblemen som vi stöter på i Sitevision.

Länkar med samma länktext leder till olika länkmål

Detta förekommer ofta i nyhetslistor eller puffar där man lägger en länk med länktexten “Läs mer”. Besökare som använder uppläsningsverktyg använder ibland en funktion för att få alla länkar på en sida upplästa för sig och då är det viktigt att varje länk har en unik och självbeskrivande länktext som fungerar även utlyft ur sitt sammanhang. En bättre lösning är ofta att länka rubriktexten i en nyhet eller puff.

Ett annat vanligt förekommande fall är att man har en länk som heter “Kontakt” i sidhuvudet som leder till en generell kontaktsida och andra länkar med länktexten “Kontakt“ länkas till andra kontaktsidor.

Beskrivningstext för bild saknas

Alla bilder ska ha en beskrivningstext, ett så kallat alt-attribut. Detta hjälper framförallt personer med grav synnedsättning som använder skärmläsare. Om bilden endast har en dekorativ funktion kan alt-attributet lämnas tomt alt=””. Det finns en pseudodebatt kring vad som är en dekorativ bild och inte och den kommer vi lämna därhän i den här artikeln. Ange hellre en beskrivningstext för ofta än för sällan.

Beskrivningstext för bild är felaktig

Om en redaktör ändrar vilken bild som ska synas i en bildmodul måste även bildbeskrivningstexten (Även kallat alt-texten) uppdateras. Detta är lätt att glömma bort och vi har därför skickat in ett förbättringsförslag till Sitevision om att verktyget bör varna om att man ska se över alt-texten om bilden byts. Detta problem upptäcks i regel bara vid manuella granskningar så det är en bra sak att ha med sig i bakhuvudet.

Så skriver du en bra bildbeskrivningstext

Ange gärna vad bilden är för typ av bild (diagram/foto etc). Ange inte fotografens namn och skriv inte att det är en bild, det anger uppläsningsverktygen redan ändå.

Exempel på bra bildbeskrivningstext/alt-attribut: alt="Hund med tomteluva. Illustration."

Exempel på en dålig bildbeskrivningstext/alt-attribut: alt=“Bild på en hund. Foto: Kjell-Erik Tjäder”

Daniel Göransson på Axess Lab har skrivit en bra fördjupning i ämnet alt-texter Länk till annan webbplats. som vi varmt rekommenderar.

Egen artikel med tips för bildbeskrivningar

Uppdatering: Vår egen Ida Fritiofsson har på senare tid fördjupat detta ämne med fler och tydligare exempel i artikeln 5 tips för en bra bildbeskrivning.

Iframes saknar title-attribut

För att tydliggöra vad en iframe innehåller behöver man ange en beskrivande title. I Sitevisions Iframe- och Youtubemoduler finns det ett fält för detta, men om man lägger in en iframe i en HTML- eller Skriptmodul (vilket är väldigt vanligt) behöver man ofta lägga till detta attribut själv i koden.

Exempel på bra title-text på en iframe: title="Lista över lediga tjänster i Tomteboda kommun"

Utseende på iframes sätts med HTML istället för CSS

Väldigt många tjänster skriver fortfarande ut färdiga “embedkoder” som inte följer modern kodstandard. På just iframes är det vanligt att kantlinjen tas bort med HTML-attributet frameborder=”0”. Eftersom man bör skilja på innehåll/markup och utseende bör detta göras med CSS istället. Om man vill ställa in en central regel för det kan man lägga till iframe { border: none; } i en css-fil som laddas på alla sidor.

Grundläggande tillgänglighetstips

Ta med WCAG i arbetet med grafisk manual

Vi börjar närma oss år 2020 och fortfarande missar de flesta grafiska manualer att ta hänsyn till kontrastkraven i WCAG 2.1 AA. Dåliga kontraster slår ofta hårt mot tillgängligheten då de kan orsaka mängder av fel på varje sida. Var noga med att färger och användningsexempel med godkänd kontrast för webben tas fram i profilarbetet!

Ställ rimliga krav och följ upp dem

Beställare har kravställt tillgänglighetskrav i många år, ofta med en kryssruta följd av texten “webbplatsen ska uppfylla WCAG 2.1”. Sannolikt finns det ingen större webbplats som uppfyller WCAG 2.1 till punkt och pricka. Vi har aldrig kryssat i en sådan ruta i en upphandling utan tillhörande förbehåll. Tillgänglighet är ett omfattande område och utmaningen ligger i att hitta en nivå som är rimlig och nåbar med de resurser man har. Hur får man ut maximal tillgänglighet per satsad krona?

Ställ krav på beställningarna, men se till att de är realistiska och följ upp och testa leveranserna.

Egna användartester

Att betala för professionella användartester och tillgänglighetsrevisioner är alltid en bekväm lösning. Annan väg är att göra som Gnesta kommun gjort i projekt med oss och organisera egna grupper med personer som testar webbplatsen och dess funktioner. Gnesta har använt två grupper medborgare som testat att webbplatsen lever upp till kommunens ambitioner. En grupp som vem som helst kunde anmäla sig till och en grupp som leddes av Handikappförbundens samarbetsorgan (HSO i Gnesta). Kontentan blev ovärderlig feedback, inte bara kring webbplatsen utan även kring andra serviceområden.

Testa ofta och regelbundet

Det finns bra verktyg för regelbundna tester, exempelvis så gör Siteimproves betalvariant tester på alla webbplatsens sidor var femte dag och ger tydliga och överskådliga rapporter. Betala för ett bra verktyg eller gör manuella tester själva.

Tusentals sidor som administreras av en stort antal redaktörer i ett CMS som uppdateras och förändras ska testas mot ett gäng testpunkter som också uppdateras då och då

Kostnadseffektiv lösning för att testa regelbundet med Siteimprove

Uppdatering: Vi kan sedan 2021 erbjuda en avskalad variant av Siteimprove som vi kallar för Limepark Webboptimering. En fantastisk möjlighet för våra kunder att få sin webbplats testad av branschledande Siteimprove till ett förmånligt pris.

Nya koncept eller beprövade lösningar?

Att ta fram nya koncept är alltid en rolig utmaning. Det man ska komma ihåg är att det ofta är förknippat med många iterationer och tester jämfört med att använda beprövade lösningar. Tillgänglig och responsiv webb är kan vara komplicerat och om man har kort tidplan eller snäv budget är det sällan en bra idé att experimentera för mycket.

Var lyhörda!

Vårt bästa enskilda tips i en mening lyder: Gör det enkelt för era besökare att lämna feedback, var lyhörda och ta användningsproblem på allvar. Den som sopar tillgänglighetsproblem under mattan riskerar att alienera de som webbplatsen faktiskt är till för, nämligen besökarna.

“Tillgänglighet förbättrar bara för några få”

Det finns en gammal myt om att tillgänglighet handlar om att förbättra för några få. Vi ser ofta hur webbplatser vi genomför tillgänglighetsarbete på blir snyggare, mer strukturerade och mer lättanvända för gemene man. Arbetet leder i regel också till förbättrad sökmotoropitimering och en mer robust sajt som är lättare att arbeta med.

Ett bra tillgänglighetsarbete förbättrar för alla användare.

Lycka till med ert tillgänglighetsarbete!

Artikeln är skriven av: Johan Dahlqvist VD och Kvalitetsansvarig Projektledare johan@limepark.se