Använda Style Guides för tillgänglighet

Låt oss börja med att ställa några frågor.

Vad är en stilguide?

En stilguide är ett designdokument som kan användas för att upprätta en uppsättning standarder när man sätter ihop säkerhets- eller användargränssnitt för ett företag, i princip en produkt eller artefakt som produceras för verksamheten. 

Vem använder en stilguide?

En stilguide kan skapas för en utvecklare, så att de känner till detaljerna om vad man ska bygga, eller en formgivare så att de förstår designhänsyn och den större bilden. Det kan också användas mer brett över en organisation för att ge vägledning och tydlighet när du skapar nya dokument. 

Vad är tillgänglighet?

Tillgängligheten är att se till att dina mönster följer en gemensam standard och är tillgängliga för en mängd olika människor, t.ex. personer med fysisk eller kognitiv funktionsnedsättning.

Varför använda en stilguide för tillgänglighet?

En stilguide är ett utmärkt sätt att självständigt genomdriva konsistens genom dina mönster. Det ser till att du har en solid grund att arbeta med. När vi pratar om stilguider tänker vi normalt på logotypintegritet, typografi, färg. Men hur är tillgängligheten? Tänk på följande fall för att använda en guide för tillgänglighetstyp:

1. Att ställa in riktning

En stil guide ger riktning. Till exempel, istället för att behöva sätta ihop en pixel perfekt mock-up varje gång du designar ett formulär, kanske en utvecklare föredrar att referera till en tillgänglighetsguide för att bestämma hur man bygger det. När du anger riktlinjer för tillgänglighet kan du inkludera instruktioner om vilka typer av formulärstyrning som ska användas och när. 

2. SEO

SEO är en annan anledning till varför designers måste vara medvetna om tillgängligheten. Om du till exempel placerar text inom en bild betyder det att skärmsläsare inte kan komma åt det och Google kommer att straffa din webbplats för att ha dåligt märkt innehåll. Att göra din webbplats tillgänglig har det positiva resultatet av att hjälpa SEO.

3. Användarupplevelse

Tillgänglighet är en stor del av UX; trots allt kommer inte alla att uppleva en produkt på samma sätt. Kontrastfärger kan styra en användare genom ett avsedd flöde, men någon som inte kan skilja de kontrastfärgerna kan hitta upplevelsen ointuitiv. Att förutse användbarhetshinder och planera för dem i en guide för tillgänglighetstyp är god praxis. 

4. Hand Off

Hand off är ett perfekt exempel på när du skulle titta på att använda en guide för tillgänglighetstyp. Du kanske arbetar på ett kontraktsbasis och vill binda upp saker till nästa entreprenör eller byrå som kommer in för att ta över där du slutade. Ge nästa anställd en viss inblick i ditt tänkande ur tillgänglighetsperspektivet. 

Börja med grunderna

formulär

Forms har ett antal heuristics eller tumregler som är associerade med tillgänglighet. Hur en blankett är byggd är väldigt viktig. När var sista gången du inkluderade a element med a

? Markup detaljer som detta är verkligen till hjälp för hjälpteknik.

Visuellt sett kan du överväga närhet av etiketter för att skapa inmatningar. Ett annat exempel kanske anpassning och hur de görs på mobilen. 

Tryck på Target

Touch målstorlek är mycket viktigt. På mobil- och surfplattformen borde användaren ha den bästa mängden utrymme för att välja ett knappelement. Om det är för litet kan de tro att systemet saktar eller att länken kanske inte fungerar! Helst önskar du att ett mål ska vara ungefär 44 poäng högt och brett, så att de kan noggrant tappas med ett finger. 

 Färgkontrast

Finns det tillräckligt med färgkontrast på element i din sida? Är texten läsbar mot vissa foton? Det här är viktigt att överväga att många människor drabbas av nedsatt syn, eller är färgblinda på något sätt. 

Textstorlek

Små text är en annan vanlig fråga, särskilt för seniorer. Utvecklare behöver utforma användargränssnitt för flexibilitet, så att användare som har problem med att läsa text kan zooma in och ut. Om du utformar för en app vill du skapa en layout som passar enhetens skärm. Användare bör undvika kontroller där användaren behöver zooma eller bläddra horisontellt. 

 Dessutom bör textstorlek vara minst 11 poäng så att det är läsbart. Helst vill du ha den genomsnittliga användaren för att undvika att behöva zooma in och ut för att läsa innehållet.

Värdigt förfall

Graciös försämring hänvisar till hur effektivt din produkt fungerar när någon har en långsammare anslutning, olika skärmstorlek, olika upplösningar, en annan webbläsare eller till och med begränsningar i webbläsaren. Medvetenhet om dessa hinder och begränsningar kan hjälpa din organisation att avgöra om publiken fortfarande kan komma åt ditt innehåll med någon av dessa pålagda begränsningar. De flesta misslyckanden är inte chockerande överraskningar. De är förutsägbara händelser som du kan planera för, istället för att önska dem borta som sällsynta oförutsägbara olyckor. 

Gör det Relevant

Om du genomför en användbarhetsbedömning kan du använda det du har observerat; tillgänglighetsproblem i hela ditt system kan hjälpa till att beskriva tillgänglighetsregler i din stilguide. Om du till exempel har använt testvärden som kritiska fel och du upptäcker att de uppstår på grund av färgkontrast, berör du dimensioneringsproblem eller någon annan tillgänglighetsproblem, inkludera den i din guide för tillgänglighetstyp. Mycket relevanta exempel är mer benägna att ge ditt dokument mer trovärdighet och köpa in från intressenter.

Slutsatser och Takeaways

Stilguider är vanliga. Tillgänglighetsstylguider är inte lika vanliga, men bör inte förbises. I själva verket kan de i vissa fall vara kritiska. Men de är också fördelaktiga när man tänker på den allmänna användarupplevelsen. Färgkontrast, beröringsmålstorlek och formelement är alla möjliga för problem om inte exekverat rätt. 

  • Tänk på de viktigaste först. Ta bara med relevant information i din guide för tillgänglighetstyp.
  • Antag inte att någonting är sunt förnuft. Du tar självklart den kunskap du ackumulerar genom åren. Var inte rädd för att beskriva saker du kan ta som givits.
  • Form följer funktion. Om din designstylguide går i konflikt med din guide för tillgänglighetstyp kan det vara dags att gå tillbaka och försöka ställa in båda (se ovanstående färgkontrast).
  • Börja med problem du redan har identifierat i dina heuristiska utvärderingar. Vad är några av användbarhetsproblemen du har stött på? Särskilt de ofta förekommande problemen och de med höga betygsgrader?

Vidare läsning

  • A11Y Style Guide
  • MailChimp Content Style Guide: Skriva för tillgänglighet
  • edx / ux-mönster-bibliotek Styleguide: Tillgänglighet