Tillgänglighet först

Idag är designbegreppet Mobile First väl etablerat. Vi bor i ett land där användandet av smartphones sedan länge är standard och det är givetvis bra att man vill hitta sätt att möta den mobila publiken.

Ledordet när man designar enligt mobile first är progressive enhancement (progressiv förbättring). Det man gör är att bygga en produkt som fungerar bra trots begränsningar som mindre enheter innebär (notera att man inte bara ska ha skärmstorlek i åtanke, utan också prestanda, uppkoppling, mobiltäckning osv.). Ju större och kraftfullare plattform, desto mer kan du sedan lägga till.

Motsatsen – och felet många gör – brukar istället vara att man designar för desktop (gärna på en 27-tumsskärm) och glömmer bort hur det ser ut och fungerar för all de stackare som inte har retinaskärmar och fast uppkoppling.

Design som anpassar sig till olika användares olika behov är givetvis rätt väg att gå. Men risken är att man glömmer en del av sin publik.

Sätt tillgängligheten först

Jag skulle vilja lansera ett nytt designmönster – tillgänglighet först (eller ”a11y first”). Det jag vill göra är att pausa det visuella tänkandet och angripa designen innan vi pratar om enheter och upplösningar.

Hur ser vårt innehåll ut? Finns det en lättlästa versioner av våra texter?

En stor anledning är att designmönster som mobile first uttrycks ofta i CSS-kod. Med hjälp av media queries kan man flytta och justera element beroende på skärmstorlek. CSS är i mångt och mycket ett verktyg för att skapa visuell kraft åt en produkt. Det behöver inte handla om ”fräck visuell design”, utan kan fungera jättebra för att stärka läsbarheten.

Men vad händer med alla de som inte kan läsa? Eller de som inte kan se?

Det man istället bör göra är att försöka planera sitt innehåll ur ett tillgänglighetsperspektiv. Varför inte testa sin webbsajt med en skärmläsare innan man läser in CSS-koden?

Att designa för skärmläsare kräver en del planering. Men du ska göra det. På nätet finns en hel del bra läsning kring detta och jag skulle vilja rekommendera WebAIM’s text som ger mycket matnyttig information.