Hoppa över navigeringen, gå direkt till innehåll.
Start /

Tillgänglighetsredogörelse

Trafikförvaltningen i Region Stockholm ansvarar för den här webbplatsen. Webbplatsen är i stort förenlig med lagen om tillgänglighet till digital offentlig service. Vi vill att så många som möjligt ska kunna använda webbplatsen och de tjänster och funktioner som finns.

Vi är medvetna om att det finns en del brister i tillgängligheten för en del användare. Här berättar vi vilka brister vi känner till och när vi planerar att åtgärda dem.

Kontakta oss

Hittar du andra problem eller brister som vi inte har listat kan du kontakta oss genom att ringa till kundservice på telefonnummer 08-720 80 80 eller använda kontaktformuläret som finns under Kontakta oss.  

Vi uppskattar alla synpunkter som kan göra webbplatsen mer tillgänglig. Du kan också kontakta oss om det är innehåll du behöver som inte är tillgängligt för dig.

Tillsyn

Det är Myndigheten för digital förvaltning som har ansvaret för tillsyn att vi följer lagen om tillgänglighet till digital offentlig service. Om du inte är nöjd med hur vi uppfyller kraven på digital tillgänglighet kan du anmäla det till dem på sidan www.digg.se/tdosanmalan.

Kända brister

Här listar vi de brister vi känner till.

Allmänt:

  • Otydlig information om vem som är avsändare och webbplatsägare.
  • Sidan fungerar dåligt utan JavaScript. Utan JavaScript blir det följande fel:
    • Puffar på startsidan visar inte rätt innehåll.
    • Formulär visas inte alls.
    • Sökformuläret går inte att visa.
    • ”Läs fler nyheter” på startsidan fungerar inte.
  • Skiplänken har en bugg. Klick på den leder till att man kommer till startsidan i stället för att hoppa till innehållet.
  • Sidan använder landmarks på ett ologsikt sätt.
  • Nivå 2 i huvudnavigeringen ligger i fel landmark.
  • Sidan saknar ett main landmark.
  • Fokusmarkering är endast en färg vilket kan göra den otydlig och svåranvänd.
    • När en del objekt har fokus blir kontrasterna för dåliga.
  • Fokusordningen matchar inte den visuella uppbyggnaden av sidan i vissa fall, tex i sidhuvudet.
  • Logotypen för Region Stockholm saknar alt-texten “Region Stockholm”.
  • Ikonerna i puffarna på startsidan saknar alt-attribut.
  • Nyhetslistans ul-element innehåller otillåtna element och validerar inte.
  • Listorna i sidfoten innehåller h5 och hr som gör att det inte validerar.
  • Sidan har en ologisk rubrikstruktur som gör det svårt att förstå strukturen.
  • Inkonsekvent navigering: Avdelningen “Om sjukresor” visas undernavigeringen två gånger, dels i sidhuvudet som en till rad under huvudnavigeringen, dels inne på sidan som en vertikal lista.

Textförstoring, enbart text

Förstorar man enbart text till 200 % blir det följande fel:

  • Innehåll i puffar på startsidan beskärs.
  • Innehåll i brödsmulenavigering begränsas.
  • Vissa formuläretiketter beskärs.
  • Vid vissa fönsterbredder blir sidhuvudet rörigt och svårtolkat.
  • Innehåll i undermenyn överlappar annat innehåll i vissa fall.
  • Innehåll i sidfoten överlappar och beskärs.

Responsivitet

I telefoner med smala skärmar blir det följande fel:

  • Menyinnehåll hamnar ihop med ”Logga in” och ”Sök” när man fäller ut menyn.
  • SLL-logotypen visas inte alls.
  • Horisontell scroll uppstår i smalare mobil på grund av att något är bredare än 320px och inte anpassar sig.
  • Placeholdertexten i sökfältet får inte plats.

Tangentbordsåtkomst

  • ”Läs fler nyheter” är inte fokuserbar.
  • Datumväljare saknar stöd för tangentbordsanvändning.

Innehåll och informationslayout

  • Viktig information markeras endast visuellt och blir inte markerade i kod vid skärmläsning.

Kontraster

  • ”Läs fler nyheter” har otillräcklig kontrast.
  • Bakgrunden på markerad länk i huvudnavigeringen har för låg kontrast mot omgivningen.

Skärmläsaråtkomst

  • Huvudmenyn går inte att komma åt med skärmläsare på grund av kodfel.
    • Gäller även undernavigeringen i sidhuvudet i avdelningen ”Om sjukresor”.

Interaktiva element

  • Länkar används som knappar.
    • ”Knappen” som används för att visa och dölja sökformuläret är ett a-element utan href. Skärmläsare ger nu ingen information om att det är en knapp eller länk utan säger bara ”Sök, text”.
    • ”Knappen” för att visa menyn i smala fönster är ett a-element utan href. Ska vara ett button-element för att få rätt funktion och semantik.
  • Knappar som visar och döljer innehåll (till exempel sökformuläret) saknar aria-expanded och aria-controls.
  • Länkar som öppnas i nytt fönster saknar information om det.
  • Länkar i sidfoten innehåller text för grafiska symboler som blir upplästa av skärmläsare. Det ska ändras till en grafisk symbol så det inte ingår i länktexten.

Sökformulär

  • Placeholdertexten i sökfältet är för lik vanlig text och måste få ett tydligare utseende.
  • Placeholdertexten är även otydligt formulerad.
  • Knappen för att rensa sökfältet är idag en länk. Den ska göras om till en riktig knapp.
  • I smalare fönster får knappen för att visa sökformuläret ett annat utseende som har mycket låg kontrast vid fokus.
  • Sökformuläret saknar role="search" och aria-labe och dyker då inte upp i skärmläsares landmark-lista.
  • Sökfältets label är inte kopplad till sökfältet.
  • Sökformuläret ligger inte direkt efter knappen som visar det i tabbordningen, vilket gör att den som navigerar med tangentbord måste tabba sig igenom huvudnavigeringen för att komma till sökformuläret. Kodordningen kommer att ändras.

Brödsmulenavigering

  • Semantiskt felaktig byggda brödsmulor i koden.
  • Brödsmulenavigeringen saknar namn i koden.
  • Avskiljarna (”/”) blir upplästa av skärmläsare.
  • Förtydligande av var man är i kod.

PDF:er

  • PDF:er är inte tillgänglighetsoptimerade.
  • Länkar till PDF-dokument förvarnar inte användaren om format eller storlek.

Sida: Startsidan

  • Varningsikonen påstartsidan om Coronaviruset saknar textmotsvarighet.
  • Aktuellt
    • time-element används på felaktigt sätt.
    • Länkar markeras inte visuellt.
  • Länken ”Läs fler nyheter”
    • Det är nu en länk som inte kan ges fokus med tangentbord.
    • När fler nyheter har lästs in stannar fokus kvar på knappen vilket gör att skärmläsaranvändare missar att nytt innehåll finns om man inte stegar sig tillbaka på sidan för att komma till det nya innehållet.

Sida: Om sjukresor

  • Vissa länkar i brödtexten använder title-attribut på felaktigt sätt.
  • Grafiska symboler (>>) i länktext blir upplästa av skärmläsare.

Sida: Beställa resa

  • Otydlig eller olämplig länktext som till exempel “Mina sidor hittar du här >>” och “här >>”.

Sida: Egenavgifter

  • Tabellen saknar caption och th[scope].
  • Tabellen beskärs i smalare fönster och man kan inte komma åt innehållet ens via horisontell scroll – särskilt problematiskt i mobil.

Sida: Sjukreseenheter i andra regioner

  • Tabellen saknar caption och th[scope] för kolumner och rader.
  • Tabellen beskärs i smalare fönster och man kan inte komma åt innehållet ens via horisontell scroll – särskilt problematiskt i mobil.

Formulär

Formuläret på denna sida har flera brister som återkommer i andra formulär på webbplatsen.

  • Förklara för alla användare vad ”*” betyder.
  • Ettiketterna är inte sammankopplade med sitt formulärfält.
  • ”Placeholder”-etiketter är för lika vanlig text, vilket gör att man kan tro att fältet redan är ifyllt.
  • ”Knappar” som visar hjälptext är felkodade. De saknar också begriplig text, utan visar endast ikon utan förklaring.
  • Hjälptexter kan inte togglas med skärmläsare aktiv. I stället används aria-label så att skärmläsare alltid läser upp hela hjälptexten, vilket blir väldigt pratigt.
  • Vissa hjälptexter på rubrik kan inte aktiveras med skärmläsare.
  • aria-invalid används på ett icke korrekt sätt.
  • Grafiken för de stylade formulärelementen använder en ikonfont och är inte dold för skärmläsare.
  • Grupper av radioknappar ska kopplas samman programmatiskt med fieldset + legend.
  • Fältet ”Sjukresebiljettnummer” ska ändras så det inte är av typen ”number” eftersom det då visas en spinbutton.
  • Felmeddelanden är idag separata label-element, vilket blir fel semantiskt.
  • Label-element som används för att visa hjälptext är inte kopplade till något fält.
  • Den JavaScriptbaserade datumväljare som används i vissa webbläsare är inte tillgänglig med tangentbord. Den förstör även tabbordningen och hindrar att navigera enbart med tangetnbord.
  • Vissa fält saknar label vilket medför att skärmläsare faller tillbaka på placeholder-attributet som namn. Vilket blir ett problem när placeholder för tex Reservnummer blir ”99ÅÅÅÅNNNN” utan att något nämns om reservnummer.
  • Ibland blir fält grönmarkerade utan att det finns en förklaring. Kontrasterna är även dåliga och större skillnad på färgerna behövs – kontrasten mellan de mörkblå och gröna färgerna som används nu är 2,68:1 och ska öka till minst 3:1.

Sida: Sökresultat

  • Sidans title-element är tomt.
  • Om sökningen inte får några träffar är det otydligt, särskilt med skärmläsare.
  • Menu-element används felaktigt och saknar även li-element.
  • Knappen för att visa/dölja sökformulär har ingen effekt och ska tas bort.
  • Sidan saknar huvudrubrik.
  • Endast bakgrundsfärg skiljer de markerade orden i sökträffarna.
  • Resultaten ska struktureras mer semantiskt.

Sida: Vanliga frågor

  • Visa/dölj-funktionalitet:
    • Klickbara header-element ger fel semantik.
    • De klickbara elementen går inte att fokusera med tangentbord.
    • Ingen information om att elementen är klickbara ges via skärmläsare.
    • Svaren går inte att komma åt utan JavaScript.
  • Tomma element som kan störa skärmläsare ska tas bort.

Sida: Viktiga dokument och länkar

  • Sidan länkar till en mängd dokument i PDF-format utan att informera om att det är PDF-filer, hur stora de är samt att de öppnas i nytt fönster.

Så har vi testat webbplatsen

Vi har låtit en extern expert granska vår webbplats. Arbetet utförde maj-juni 2020. Vår ambition är att ha åtgärdat alla kända kritiska tillgänglighetsproblem senast den 31 december 2020.

Redogörelsen uppdaterades den 22 september 2020.