Universell utforming

Det er ikke én enkelt fagdisiplin som er ansvarlig for universell utforming i Fremtind. Tvert imot krever det innsats fra alle deler av organisasjonen. Hver og en av oss må ha en grunnleggende forståelse for hva universell utforming er, hva det betyr for kundene våre og Fremtind som organisasjon.

Designerne utgjør førstelinjen når det gjelder å oppfylle kravene til universell utforming, og de har et ansvar for at alle får gode brukeropplevelser. Krav til deg som er designer:

• Gjør deg kjent med tilgjengelighetsverktøy og hvordan de påvirker brukeropplevelsen.
• Strukturer innholdet og sørg for et tydelig visuelt hierarki.
• Sørg for lesbare størrelser og bruk god nok fargekontrast.
• Ikke bruk farge bare for å vise funksjonalitet eller status.
• Finn alternative løsninger hvis det er vanskelig å gjøre det du jobber med universelt utformet.
• Lag tekstlige beskrivelser av bilde-, video- og lydinnhold.

Figma-plugins

Det finnes mange plugins og verktøy som gjør uu-hverdagen enklere for designere. Det beste er nok å finne et verktøy som fungerer bra for din arbeidsflyt.

• Stark Color Contrast
• usecontrast
• a11y
• Color Blind

Farger og kontrast

Se a11yproject sin guide for hvordan omfattende teste:

• farge og kontrast
• dark mode
• høykontrastmodus (også: Eric Bailey for Smashing Magazine)
• inverted mode
• andre lignende moduser

Kan du fortsatt se elementer som for eksempel lenker dersom alt er gråskala? Husk at farger aldri skal være eneste virkemiddel for å formidle informasjon.

Utviklerne er ansvarlige for å oversette design og ideer til virkelighet, på en korrekt måte ved å:

• bruk semantiske elementer
• sørge for riktig leserekkefølge, ikke bare visuelt, men i kode
• gjøre det lett å navigere seg ved hjelp av overskriftsnivåer og landemerker

Browser devtools

Noen av disse har overlappende funksjonalitet, men presenterer resultater på ulike måter. Prøv deg fram, og finn verktøyet du liker best, for eksempel:

• Google Lighthouse
• axe-devtools

Automatisering

Automatiserte tester er viktig for rask tilbakemelding under utvikling, men disse verktøyene finner ikke alt. Ikke la de være en hvilepute. Det trengs fortsatt manuell testing, med ekte brukere, som for eksempel:

• a11y eslint
• axe-core til Jest

Validering

Disse er fine for å kunne gjøre sjekker på «ferdige» sider:

• Wave
• Axe av Deque

• Microsoft Accessibility Insights

Wave og Accessibility Insights er relativt brukervennlige og greit for ikke-utviklere å bruke. Axe er i litt større grad rettet mot utvikling.

Tekststørrelse og zoom

Noen er avhengig av å endre tekststørrelsen på et nettsted for å kunne bruke tjenesten. Test ved å endre størrelse i nettleser. Forstørr nettsiden 200 prosent og sjekk at innhold fortsatt er lesbart og at innhold ikke overlapper. Se hvordan endre tekststørrelse og zoome i:

• Chrome
• Firefox
• Safari

Simulatorer

En simulator hjelper deg å sjekke om løsningen din tåler en rekke kjente funksjonsnedsettelser. De erstatter selvsagt ikke brukerinvolvering, men de kan gi deg noen aha-opplevelser du kanskje ikke har rukket å tenke over i forslaget ditt. Et par simulatorer det kan være verd å prøve er:

• Funkify
• Silktide

Høykontrastmodus

Høykontrastmodus er best støttet på Windows, men kan også simuleres i Chromium-baserte nettlesere. Sjekk at det du lager fortsatt er synlig i denne modusen, i alle innstillingertilstander:

• uten fokus
• ved hover
• tastaturfokus

Husk at brukeren velger sine egne farger i denne modusen. Sjekk spesielt at SVG-er får fargen sin fra temaet, ikke fra oss.

Som leder for et team eller produkt står du ansvarlig for produktet som leveres. Det gjelder å sørge for å:

• få universell utforming inn i alle historier
• prioritere feilretting
• publisere en tilgjengelighetserklæring