• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Statistik
  • Inställningar

Tillgänglighet

Tillgänglighet

På SJ vill vi skapa digitala upplevelser som är tillgängliga och lätta att använda för alla användare – med eller utan funktionsnedsättningar och med varierande förmågor.

Från och med den 28 juni 2025 omfattas vi av den nya lagen om tillgänglighet till vissa produkter och tjänster. Att inte vara tillgänglig efter det datumet kan få stora ekonomiska konsekvenser för SJ som företag.

Tillgänglighet är en självklar del av SJs varumärke och digitala identitet

Men vi gör detta inte bara för att det är ett lagkrav, utan för att tillgänglighet är en självklar del av SJs varumärke och digitala identitet. En betydande andel av befolkningen har en permanent funktionsnedsättning, och många fler kommer att få en eller flera funktionsnedsättningar när de blir äldre. Genom att göra SJ tillgängligt tar vi hand om våra kunder och ser till att alla ska kunna resa med tåg i Sverige.

Tillgänglighet går utöver riktlinjer och kod

Grunden för vårt tillgänglighetsarbete är de internationella riktlinjerna WCAG 2.2 och standarden EN 301 549. Men vi vet att tillgänglighet går utöver riktlinjer och kod. Genom att använda inkluderande designmetoder och genom att ta hand om potentiella tillgänglighetsproblem i varje steg i processen ser vi till att våra kanaler fungerar för så många användare som möjligt.

WCAG 2.2

EN 301 549 (pdf)

Ett tillgängligt designsystem

Vårt designsystem är en av de viktigaste beståndsdelarna i SJs tillgänglighetsarbete. I designsystemet har vi beskrivit hur vi vill ta hänsyn till människors varierande förmågor när vi designar våra tjänster. Här finns också tydliga riktlinjer för hur vi ska använda färger, bilder, kontraster och felhantering på tillgängliga sätt.

De kodade React-komponenterna i designsystemet är byggda med stort fokus på tillgänglighet. Det innebär bland annat att:

Alla komponenter är testade med tangentbord och de vanligaste skärmläsarna på Windows, iOS, Android och MacOS.

Alla komponenter är testade med tangentbord och de vanligaste skärmläsarna på Windows, iOS, Android och MacOS.

Alla komponenter har skalbar typografi med rem-storlekar istället för pixlar och stödjer textförstoring upp till 200%.

Alla komponenter har skalbar typografi med rem-storlekar istället för pixlar och stödjer textförstoring upp till 200 %.

Alla komponenter har stöd för mörkt läge (prefers-color-scheme: dark).

Alla komponenter har stöd för mörkt läge (prefers-color-scheme: dark).

Alla komponenter har stöd för högkontrastläge i Windows (forced-colors: active).

Alla komponenter har stöd för högkontrastläge i Windows (forced-colors: active).

Alla komponenter har stöd för ökat kontrast-läge (prefers-contrast: more).

Alla komponenter har stöd för ökat kontrast-läge (prefers-contrast: more).

Alla komponenter har stöd för att minimera rörelser och animationer (prefers-reduced-motion: reduce).

Alla komponenter har stöd för att minimera rörelser och animationer (prefers-reduced-motion: reduce).

Göra skärmläsaranvändare uppmärksamma på dynamiskt innehåll

Det uppstår ibland situationer där innehåll ändras eller tillkommer någonstans på en webbsida och om en besökare som använder skärmläsarteknologi inte har fokus på ytan där ändringen sker så kan det vara lätt att missa viktig information.

Det kan till exempel handla om ett VMA (Viktigt Meddelande till Allmänheten), information om att något laddats eller annan information som kan dyka upp någonstans på sidan där besökaren kanske inte har fokus just för tillfället.

För att komma till rätta med detta så har vi tagit fram en hjälpfunktion för utvecklare.

Implementationsexempel och kod hittas här

Har du hittat en bugg eller en brist i en komponent?

Kontakta Hanna Fredholm så åtgärdar vi problemet så snart vi kan!

Hanna Fredholm

Tillgänglighetsansvarig

Kodexempel
npm install bit install @sj-ab/component-library.utils.live-announcer-util
Kodexempel
import announceLive from "@sj-ab/component-library.utils.live-announcer-util";

announceLive("This is an alert message", "alert");
announceLive("This is a status message", "status");