Logo

• Storybook
• Figma
• Bit.cloud

Semantik

Logo presenteras vanligtvis som en meningsbärande SVG-ikon med en alternativ text:

<svg role="img" aria-label="SJ, logotyp">

Tillgängligt namn

Komponenten har en inbyggd översättning med namn för alla olika varumärken och varianter på både svenska och engelska. Det finns en möjlighet för utvecklare att skriva över default-namnet med aria-label men detta ska vanligtvis inte behövas.

Om logotypen ska användas i en situation där den är dekorativ och man inte vill att den ska läsas upp av skärmläsare så kan man använda propen ariaHidden.

Mörkt läge och högkontrast

SJLogo anpassar sig automatiskt till ljust och mörkt läge som standard. Du kan överstyra detta och låsa färgen explicit med color="black" eller color="white" vilket respekteras oavsett användarens systeminställning. För att uppfylla tillgänglighetskrav finns dock ett undantag: i mörkt högkontrastläge (forced-colors) visas SJLogo alltid i vitt.

Även ResplusLogo anpassar sig automatiskt till mörkt läge. Övriga varumärkeslogotyper har fasta färger och påverkas inte av vilket tema som är aktivt.