Du är här: Hem > Artiklar >

Trafikverket – Trettio nyanser av tillgänglighet

Publicerad:

På Winston har vi i många år arbetat med att ta fram tillgänglighetsanpassade lösningar som följer rådande riktlinjer - något som kräver att vi ständigt håller oss uppdaterade om regler och rekommendationer. Annars skulle vi inte kunna göra ett bra jobb.

Ett aktuellt exempel på hur vi jobbar med tillgänglighet är webbplatsen Stationsledsagning, som informerar tåg- och bussresenärer med funktionshinder om hur ledsagning fungerar och hur man beställer den vid resa med tåg eller buss. På uppdrag av Jernhusen fick vi 2011 i uppdrag att designa och utveckla stationsledsagning.se där det förstås låg stor vikt på tillgänglighet. Detta uppnådde vi genom att följa WCAG 2.0, som då var den rådande standarden.

Men på internet blir lösningar snabbt omoderna. Webbläsare och tillgänglighetsverktyg blir bättre och standarder uppdateras. Behovet av att uppdatera webbplatsen gjorde att Winston under 2019 därför fick uppdraget att göra om webbplatsen med fokus på tillgänglighet enligt de standarder som råder idag: WCAG 2.1 och HTML5. Uppdragsgivare denna gång var Trafikverket, som tagit över ansvaret för webbplatsen från Jernhusen.

Resultat blev en webbplats som har en mycket hög tillgänglighet. Betydligt högre än genomsnittet för andra webbplatser i samma branch.

Så här jobbade vi

Vi inledde arbetet med en utvärdering av den befintliga lösningen. I samråd med kunden vidareutvecklade och förbättrade vi interaktion, funktionalitet, struktur och design.

Därefter implementerades den nya designen i ny gränsnittskod. Alla befintliga tillgänglighetsanpassningar uppdaterades i gränssnittet och kompletterades med ett stort antal förbättringar ur ett tillgänglighetsperspektiv.
När gränsnittet godkänts implementerades och utvecklades lösningen i senaste versionen av publiceringssystemet Umbraco.

Vi har gjort många olika anpassningar för att få webbplatsen tillgänglig enligt dagens standarder (WCAG 2.1 och HTML5). För dig som vill veta vad dessa standarder innebär, redovisar vi här kort vad dessa förändringar består av och varför vi har gjort dem.

  1. Allt innehåll som inte är text - till exempel informationsbärande bilder - beskrivs med text. Det innebär att användare med synnedsättning och som är beroende av exempelvis skärmläsare eller punktdisplay får informationen presenterad för sig i text. Detta har uppnåtts genom att vi i koden har skrivit ut alt-attribut på bilder.
  2. Användare som inte kan ta del av ljud- eller videoinspelningar ska ha möjlighet att tillgodogöra sig innehållet med hjälp av en alternativ representation. Detta har uppnåtts genom att vi beskriver innehållet i videoklipp med löpande text i anslutning till inbäddade videospelare.
  3. Alla delar i koden är uppmärkta så att det framgår vilken roll de olika delarna har. Genom att skriva semantiskt korrekt standardiserad kod, ökar man chansen för att användare med olika hjälpmedel ska kunna ta del av innehållet. Vi har utnyttjat html-språkets olika element såsom de är tänkta, och kompletterat med WAI-ARIA samt uttryckligen beskrivt med text sådant som inte framgår av kodningen.
  4. Allt innehåll presenteras i en meningsfull ordning. All kod är skriven så att informationen presenteras lika för alla oavsett skärmupplösning eller hjälpmedel. Detta har säkerställts genom tester i olika uppläsningar och med olika hjälpmedel och verktyg.
  5. Inga instruktioner är beroende av sensoriska kännetecken. Även den som inte kan uppfatta form eller storlek och inte kan relatera till höger eller vänster behöver kunna förstå navigation och instruktioner. Det innebär bland annat att vi inte enbart förlitar oss på färger för att identifiera länkar och knappar. Utöver det har alla ikoner beskrivande texter i anslutning så att alla ska förstå ikonens funktion.
  6. Innehållet presenteras rätt oavsett hur man roterar skärmen. All funktionalitet och information finns tillgänglig för alla - både de som har stationär och de som har vridbar skärm.
  7. Inte enbart färg används för att förmedla information eftersom alla användare inte kan se färger. För element där funktionen inte tydligt framgår av sammanhanget använder vi oss av andra kosmetiska kännetecken för att urskilja dessa, till exempel ikoner eller understrykningar.
  8. Layouten är flexibel och fungerar oavsett skärmstorlek eller förstoring. Genom att utnyttja så kallade ”media-queries” i våra stilmallar säkerställer vi att ingen information går förlorad, oavsett skärmens upplösning, samt att man inte behöver scrolla i sidled. Vidare är alla mått för exempelvis fontstorlekar angivna i relativa enheter. Detta gör det möjligt att zooma i texter.
  9. För användare som har svårt att se kan det vara problematiskt att se visuella kontraster. Alla grafiska element såsom illustrationer, knappar och ikoner har därför en kontrast på minst 3:1. Även komponenters olika lägen (aktiv, fokuserad etc.) visas tydligt med rätt kontrast.
  10. Dyslektiker och personer med nedsatt syn behöver kunna påverka avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa. Detta har möjliggjorts genom att tecken- och radavstånd är angivet i en CSS-fil som går att skriva över med egna stilar eller en så kallad ”bookmarklet”. Vidare är inga utrymmen och containrar angiva i fasta storlekar vilket möjliggör att texter kan växa och ta mer plats i de fall där användaren väljer att ändra tecken- och radavstånd.
  11. För användare med nedsatt syn kan det vara svårt att läsa texter med bristande kontrast. Kontrasten mellan text och bakgrund är därför genomgående minst 3:1 för större rubriker och 4,5:1 för löpande text.
  12. Ett sätt för användare med dålig syn att lättare läsa innehållet är att förstora texten. Genom att använda oss av icke absoluta värden för fontstorlekar samt flexibla ytor har vi säkerställt att texten enkelt går att förstora och att allt innehåll är tillgängligt även vid 200 procents förstorning av såväl text (i moderna webbläsare) som hela innehållet i äldre webbläsare.
  13. Vi använder inga bilder för att visa text. Även om logotyper vanligtvis är undantagna från regeln att ”ingen text ska visas med hjälp av bilder” har vi valt att även skriva ut logotypen med text. Detta för att ytterligare öka tillgängligheten.
  14. Det går att navigera utan mus, styrplatta eller touch-skärm. Alla reglage, länkar och knappar är åtkomliga i den logiska tabb-ordningen. Genom att använda oss av en logisk informationsordning samt uppmärkta komponenter har vi säkerställt att man kan navigera via tangentbord eller andra hjälpmedel och att användarna inte fastnar - det går i alla lägen att ta sig vidare i informationsflödet oavsett hur man navigerar.
  15. För att undvika risken för förväxling av kortkommandon som användarens webbläsare, operativsystem eller hjälpmedel erbjuder har vi valt att inte introducera några egna kortkommandon på webbplatsen. Undantag är den lyssnafunktionalitet vi valt att använda oss av. Vi använder ett tredjepartsprogram, ReadIT, som använder sig av kortkommandon. Dessa är väl dokumenterade så att det framgår tydligt för användaren vilka dessa är.
  16. Vi minimerar risken för utlösande av epileptiska anfall eftersom personer med epilepsi kan få krampanfall om de utsätts för snabbt blinkande “flimmer” som upptar en tillräckligt stor del av synfältet. Riktlinjen är att tre växlingar mellan ljus och mörk per sekund är acceptabelt. Vi har genomgående undvikit att ha blinkningar eller kontrastförändringar på webbplatsen som överstiger detta gränsvärde.
  17. För att en användare av ett skärmläsarverktyg inte ska behöva få återkommande element och information uppläst för sig har vi i koden skrivit ut en länk som möjliggör att besökaren kan hoppa förbi den återkommande navigeringen på webbplatsen. Länken i fråga är dold för seende besökare och dyker först upp när den hamnar i focus via tangenbordsnavigering. Vi använder även så kallade ”landmark roles” för att ytterligare underlätta för användare att undvika återkommande, eller för besökaren, icke relevant information.
  18. Alla webbplatsens sidor har tydliga titlar. Detta hjälper användarna att orientera sig och lättare hitta innehåll i till exempel listor med sökresultat eller bland flikarna i en webbläsare. Titeln på varje sida är unik och förklarande nog för att användaren ska förstå var hen är och vilken information sidan innehåller. Vi har också valt att skriva ut webbplatsens namn sist i sidans titel för att förtydliga vem avsändaren är.
  19. Vissa användare navigerar med hjälp av tangentbord eller andra inmatningsenheter som i turordning kan flytta fokus mellan sidans olika element. Dessa användare är beroende av att den så kallade tabbordningen är logisk. Vi har genom att testa att navigera på sidan med olika inmatningsverktyg försäkrat oss om att fokus aldrig flyttas till ett oväntat element. För att ytterligare minska risken för missförstånd framhävs alltid det fokuserade elementet visuellt.
  20. Alla länkar är tydligt beskrivna - syftet har gjorts så tydligt som möjligt. Detta är extra viktigt för användare av skärmläsare. För länkar som leder till externa webbplatser, där länkadressen i sig är kort och tydlig, används denna url-adress i sig som länktext. Om länkar till samma mål förekommer flera gånger på sidan används genomgående samma länktext för alla förekomster. Genom att använda en ikon förtydligar vi också visuellt vilka länkar som leder bort från webbplatsen.
  21. För att underlätta olika sätt att navigera erbjuder vi flera alternativ för att finna vägen till den information man söker. Utöver huvudnavigeringen har webbplatsen en brödsmula som markerar var användaren är samt möjliggör snabb navigering tillbaka till överliggande nivå. För att ytterligare underlätta navigeringen har vi valt att lyfta ut de viktigaste och mest besökta länkarna på strategiska platser på webbplatsen. Åtkomligt från huvudmenyn finns också en länk till en sida med vanliga förekommande frågor.
  22. För att underlätta förståelsen av sidans innehåll och syfte använder vi oss av beskrivande rubriker och etiketter. Detta är extra viktigt för personer som har lässvårigheter och försämrat korttidsminne då detta skapar möjlighet att förutse vad varje del av webbplatsen innehåller. För att underlätta för besökare som använder sig av skärmläsare använder vi oss av WAI-AREA – attribut för att förtydliga syftet med inputfält som saknar en ”label”, en i koden utskriven etikett.
  23. Vi markerar tydligt vilket element eller fält som är i fokus. Detta är extra viktigt för användare som navigerar genom att flytta tabbfokus. Genom att skriva CSS-regler som förstärker vilka element som är aktiva underlättar vi för dessa användare.
  24. Om en besökare av misstag har råkat klicka på en knapp så är det viktigt att det ska kunna gå att ångra detta, vilket vi har möjliggjort. Ett knapp-, eller länk-klick upphör först när användaren lyfter på musknappen eller fingret. Vi aktiverar därför ingen funktionalitet förrän användaren gör just detta. Detta medför att besökare, som av misstag råkar klicka på en länk eller knapp, kan avbryta detta genom att flytta muspekare eller finger bort från det klickade elementet.
  25. Den som använder röststyrning säger vanligtvis det som står på en knapp för att använda knappen. Därför är det viktigt att det som står på knappen motsvarar den maskinläsbara texten. Vi har genomgående försäkrat oss om att så är fallet. Alla synliga knapptexter mappar mot den maskinläsbara motsvarigheten.
  26. Genom att ange sidans språk i koden ökar vi sannolikheten att användare av skärmläsare får informationen korrekt presenterad för sig. Detta görs med hjälp av lang-attribut och språkkod på sidnivå men även på komponentnivå där det behövs. Ett exempel på det senare är sidan med information på engelska, där informationen som är skriven på engelska tydligt är uppmärkt med rätt lang-attribut.
  27. Användare förväntar sig ett visst beteende på en webbplats. Det kan till exempel vara när ett inputfält eller en länk får fokus, eller när man klickar på en knapp. Vi har kodat så att inga oväntade förändringar av sammanhanget sker för användare som inte är förberedda på dem.
  28. Användare förväntar sig ett visst beteende på en webbplats. Detta gäller bland annat när man matar in text i ett inputfällt. Det måste tydligt framgå för användaren vad som kommer hända när man fyller i text. I den filterfunktionalitet som finns på webbplatsen informerar vi tydligt användaren vad som kommer hända när man söker efter en mötesplats. Detta för att uppnå ett förutsägbart beteende.
  29. Det är viktigt navigation, utformning och struktur är konsekvent för att användarna ska förstå hur webbplatsen fungerar. Användare vill känna igen sig på en webbplats olika sidor. Detta är extra viktigt för exempelvis blinda och personer med kognitiva funktionsnedsättningar. Vi har genomgående, på hela webbplatsen, gett gränssnittselement samma utseende, funktionalitet och placering.
  30. Användare vill känna igen sig. Det är därför viktigt att man är konsekvent när man beskriver och namnger samma funktionalitet på olika sidor och skärmar. Vi använder genomgående samma termer för återkommande funktioner såsom knappar och ikoner på hela webbplatsen.