Mange mener mye om designsystemer. Noe det ikke er så mye snakk om er hvordan designsystemer kan bidra til universell utforming, som jo er spesielt relevant nå som WAD trer i kraft og vi må rapportere hvordan alle løsningene våre dekker WCAG-kravene.
Prompt til Dall-E: "An oil painting in munch style of a design system"
Når jeg snakker om designsystemer tenker jeg i denne artikkelen på kombinasjonen av design guidelines, figma-komponenter og et komponentbibliotek i for eksempel React. Det er gjerne et team som er ansvarlige for et slikt system, og det brukes bredt ut i organisasjonen.
Så, hvordan kan designsystemer bidra til universelt utformede løsninger?
Designsystemet kan bli det faglige fyrtårnet for UU i en organisasjon
Designsystemet har en unik mulighet til bli det faglige fyrtårnet for UU, på grunn av kulturen og samfunnet et designsystem bidrar med i en organisasjon. Ofte har man faste møter mellom designere og utviklere, slack-kanaler for diskusjon og retningslinjer til bruk av komponenter. På alle disse områdene har man muligheten til å drive diskusjoner og synliggjøre UU. I tillegg kan teamet bak designsystemet prioritere utfordringer knyttet til universell utforming over for eksempel ny funksjonalitet.
Universelt utformede komponenter legger et solid grunnlag for god praksis
Når enkeltkomponenter er universelt utformet og testet grundig legger det et godt grunnlag for teamene som skal bruke designsystemet. Det gjør det rett og slett enklere for de ulike teamene å lage gode og universelt utformede løsninger. For eksempel kan designsystemet kreve ledetekster når man bruker seg av inputfelt, i form av varsler i koden hvis man ikke husker på å legge det inn. Designsystemer har i tillegg gjerne dokumentert hvordan man skal bruke en komponent på en universell utformet måte (se for eksempel Aksel). Dermed blir teamene støttet i å ta universelt utformede valg, også når man ikke kan få hjelp fra selve koden.
Teamene som bruker designsystemet sparer tid ved å kunne tenke på helheten og ikke enkeltkomponentene
Ved å slippe å bruke tid på å teste og utvikle enkeltkomponentene kan man bruke mer av tiden på å teste helheten. Designsystemteamet og deres bidragsytere burde dypdykke i hver komponent og sørge for at den er så tilgjengelig som mulig for en bred brukergruppe. Dette kan for eksempel gjøres ved å undersøke hvordan andre designsystemer har løst lignende problemstillinger, forstå WCAG-kravene og anvende dem på riktig måte i en komponent. Siden denne jobben da er gjort, kan det gjøre at de enkelte teamene heller kan bruke tid å sørge for at komponentene går godt sammen og teste kombinasjonene av komponentene.
Designsystemer oppfordrer til felles løsninger på like problemer, som gjør det enklere for brukere av skjermlesere til å benytte systemene
Et godt prinsipp innen universell uforming er at like ting skal oppføre seg likt (se f.eks. 3.2.4). Et designsystem løser dette ved at man benytter samme komponent konsekvent på tvers av systemet. I tillegg har man gjerne eksempler på bruk av en komponent som kan oppfordre til like og forutsigbare løsninger på tvers av organisasjonen, for eksempel hvilke komponenter som passer i hvilke situasjoner.
Det var de positive sidene, men hva med risikoene?
Alt er ikke perfekt selv om komponentene er universelt utformet
Kombinasjonen av ulike komponenter kan bli feil når man setter komponentene sammen med hverandre. Ta et helt tenkt eksempel som absolutt ikke har skjedd der jeg jobber: Et team tok i bruk designsystemet og la inn en dropdown i en tabell som igjen lå inni en modal. Denne kombinasjonen var ikke testet på forhånd, og ledet til tastaturfelle. Det er derfor viktig at teamene som bruker designsystemet ikke tenker at alt er fryd og gammen, men at man selv også bruker tid på å teste sidene man utvikler. Uansett hvor universelt utformet designsystemet er.
I tillegg må hvert team som tar i bruk komponenter fra designsystemet tenke gjennom valgene og sørge for at de benytter komponentene på riktig måte. For eksempel er det blitt vanlig at det som ser ut som knapper kan være enten en knapp eller en lenke – og vis versa. Men for en bruker som navigerer med tastatur oppfører ikke de elementene seg likt. På knapper kan man bruke space og enter for å trykke på, mens på lenker kan man kun bruke enter.
Det er ikke “bare-bare” å lage universelt utformede komponenter, og det er lett å gå i grøten selv med de beste intensjoner
Å lage universelt utformede komponenter er ikke en enkel oppgave. Det krever at man setter seg inn i standarden for hvordan komponenter utvikles, en standard som ofte ikke er særlig lett å finne når man jobber med mer komplekse komponenter. For eksempel brukte Slack over ett år på å forbedre og tilgjengeliggjøre en select for alle. Det krever altså tid og innsats for designsystem-gjengen og teamene som benytter seg av det for å lage gode og gjennomførte komponenter som svarer til lovkravene og forventningene til alle brukerne.
Totalt sett er designsystemer kjempeviktige i arbeidet med å lage universelt utformede løsninger. Så lenge man husker på at de ikke på magisk vis dekker absolut alt, er du good!