Hamrén <3 tillgänglighet

I en allt mer online värld är digital tillgänglighet och inkluderande design viktigare än någonsin.

Tillgänglighet och inkluderande design handlar om att skapa design- och tekniska lösningar som kan användas av så många personer som möjligt utan specialanpassning. Det handlar också om att celebrera mångfald och skapa gemenskap istället utanförskap.

Tillgänglighet för alla

För att skapa bättre tillgänglighet behöver du utgå från den breda variationen av egenskaper, förmågor och möjligheter hos olika människor.

Du designar inkluderande när du gör det för bredden snarare än en genomsnittlig användare. Med inkluderande design bjuds mångfalden in och siktet hamnar på att skapa en bra användarupplevelse för alla användare.

Att skapa tillgängligt och inkluderande kan kännas begränsande eller svårt, speciellt när du zoomar in på detaljnivå! Därför har vi på Hamrén samlat massor av information och resurser som alla kan ta del av för att skapa bättre design och ett mer användarvänligt internet.

Hoppa ner till:

Målgrupp

Inkluderande för alla, med och utan funktionsvariation

Tillgången till internet skapar möjligheter att hitta information, kunna uttrycka sig fritt och öppet, kommunicera med personer världen över, skapa kopplingar och starta revolutioner. Men, som alla andra verktyg, finns det även en risk att den används för att skapa murar istället för broar och stänger ute personer istället för att bjuda in.

För att bidra till en positiv utveckling behövs mer inkluderande miljöer som är tillgängliga för alla, både på nätet och ute i samhället. För tillgänglighet är i grunden en fråga om mänskliga rättigheter! Idag upplever cirka 1 miljard människor, eller 15% av värdens befolkning, någon typ av funktionsvariation. Detta inkluderar personer som har tillfälliga eller permanenta fysiska, psykiska, intellektuella eller sensoriska funktionsvariationer, exempelvis:

Syn

Synskador eller nedsatt syn, inklusive färgblindhet.

Hörsel

Hörselskador eller nedsatt hörsel, till exempel dövhet eller tinnitus.

Rörelse

Rörelsehinder.

Språk

Språk- och kommunikationssvårigheter, till exempel dyslexi

Kognitiv förmåga

Kognitiva svårigheter och neuropsykiatriska funktionsvariationer, exempelvis koncentrationsproblem, epilepsi, minnesproblem

Psykiskt

Psykiska besvär, till exempel depression och ångest.

Av dessa personer lämnar 71% en hemsida om den inte är anpassad så att de kan ta del av innehållet. En effektiv, lättnavigerad och lättbegriplig hemsida är något som vi alla uppskattar, oavsett vem som sitter bakom skärmen.

Även personer utan funktionsvariationer påverkas av en icke-inkluderande miljö. Personer som inte har tillgång till de nyaste smarta enheterna, har sämre internetuppkoppling eller mindre datorkunskap riskerar att hamna utanför. Det finns såklart ännu fler saker som kan få personer att känna sig exkluderade, till exempel på grund av ekonomisk situation, utbildning, ursprung, religion, sexuell läggning, könsidentitet eller uttryck, ålder eller språkliga förmågor. Om vi undviker stereotyper, normer och kränkningar för att istället representera människors vackra mångfald skapar vi en trevligare värld för alla. Med hjälp av designval och tillgängliga lösningar hoppas vi att fler kan känna sig välkomna på nätet!

Principer

Så gör du design som är inkluderande och tillgänglig

Struktur

Hemsidan ska ha en begriplig och strukturerad navigation som fungerar oavsett teknisk lösning, exempelvis via enbart tangentbord istället för mus. Navigationen förenklas också av enhetliga designmönster, strukturer och hierarkier. Lägg innehållet i fokus och låt designen stödja det. De som bara kan se innehållet utan dess paketering ska ändå kunna ha en bra upplevelse av sidan.

Design

Att använda häftiga färger kan vara både kul och fint, men färgen får inte bli ett hinder! Vissa färgkombinationer, speciellt sådana med för låg kontrast, försvårar läsningen för många. Använd färg som stöd för att förtydliga ditt innehåll. Du kan till exempel färgkoda sektioner för att underlätta upplevelsen av innehållet.

Innehåll

Texten ska vara läsbar och tydlig, både skriftligt och visuellt. Språket behöver en tonalitet, stil och språknivå som är lätt att förstå, och så behövs såklart ett teckensnitt som är lättläst. Annan media så som bilder, grafik och video behöver ”alt-texter” eller bildtexter, och det rekommenderas undertexter eller transkribering av video eller ljud. Det gör innehållet lättare att ta till sig på det sättet en föredrar eller har tillgång till.

Funktioner

Att ge användaren möjligheter för att göra justeringar som t.ex. att växla färger eller öka teckenstorleken gör sidan ännu lättare att använda. Dessutom ska det finnas flera sätt att genomföra en viss aktivitet, som att stänga en pop-up med mus eller tangentbordet.

För att sammanfatta är det viktigt att ha empati för användarna. Om en interaktion skapar små problem för din generella besökare, tänk då på mångfalden bland besökarna och hur samma interaktion kan bli ett stort problem för andra!

Argument

Det finns bara fördelar med tillgänglighet och inkluderande design

Valen i design påverkar användarna, och alla vill såklart skapa en så bra upplevelse som möjligt för dem. Därför behövs det avsiktliga och empatiska beslut när design och interaktioner tas fram. På så sätt kan vi vara med och lösa problem istället för att skapa fler!

När vi gör design tillgänglig öppnar vi upp för en bredare målgrupp, och på nätet kan det leda till fler besökare, nöjdare besökare och färre som lämnar sidan utan att interagera med den. Oavsett om ditt mål är att sälja, övertyga, informera eller inspirera, en mer tillgänglig och inkluderande miljö kan bara öka chansen att du uppnår det!

Tillgänglighet och inkluderande design är bra investeringar för framtiden

Idag finns juridiska krav på tillgänglighet i den offentliga sektorn, men det finns initiativ på EU-nivå att höja kraven på tillgänglighet på större del av nätet. När dessa nya lagar kommer träda i kraft kommer alla att påverkas, så se till att vara förberedd förr än senare. Ta chansen att förstärka ditt varumärke och bli guldstandarden i din omvärld!

Bättre för varumärket

Att redan nu fokusera på inkluderande design skapar bättre uppfattningar om varumärket. Smidig, användarvänlig och inkluderande design uppskattas både av kunder, nyfikna besökare och medarbetare. Att känna sig som en stolt medarbetare för sitt varumärke leder till mer engagemang, och underlättar marknadsföringen och varumärkesbyggandet.

Google älskar dig

Tillgänglighet har många fördelar på webben. Google älskar sidor som är tillgänglighetsanpassade, och ger dem därför bättre rankning. Enkel och välskriven kod gör snabbare hemsidor som är lättare att hantera, uppdatera och vidareutveckla, vilket i sig gör dem billigare att förvalta och utveckla. Dessutom kan tillgänglighet göra att sidan funkar bättre på olika enheter och webbläsare, vilket, igen, Google älskar!

Billigare i längden

Tillgänglighet gör livet enklare för alla. En lösning som funkar bra för en person med en viss funktionsvariation är också lättare för övriga att använda. Risken för stigmatisering minskar när alla har tillgång till samma lösning, vilket även sparar pengar på specialanpassningar. Att designa inkluderande från början gör att användaren slipper frustrationer och företaget kan lägga sina pengar på annat.

Den bästa motiveringen är helt enkelt att alla tjänar på inkluderande design. Vem gillar inte en win-win situation?

Att visa empati för olika användare skapar en bättre och trivsammare miljö där alla får en chans att ha tillgång till samma information, tjänster och möjligheter, som i sig är en grundläggande mänsklig rättighet. Härligt vad?

Checklista

Skapa tillgänglighet i design och kod, ett steg i taget

Vill du få ett hum om hur tillgänglig din hemsida är? Eller vill du ha en guide för ditt nästa design- eller utvecklingsprojekt? Ta hjälp av våra listor med saker att hålla reda på!

Använd rätt hierarki i rubriknivåer för att underlätta textförståelse och navigering.
Använd marginaler, white space, separationer osv. för att skapa sektioner som gör det lättare att följa strukturen i innehållet.
Använd “skip links” om sidans huvudinnehåll inte kommer först på sidan eller om det finns sektioner som återkommer på flera sidor.
Använd enhetliga och genomgående designmönster (t.ex. alla H1:or har samma stil).
Börja gärna långa sidor som innehåller många sektioner med en innehållsförteckning som gör det lättare att navigera direkt till relevant innehåll.
Undvik “infinite scroll” (som är svår att styra, och även gör sidor tyngre och ökar risken för att de kraschar), välj istället (helst!) paginering eller knappar för att ladda fler objekt (som åtminstone ger chansen att styra interaktionen).
Säkerställ att man kan navigera med tangentbordet och att det finns tydliga markering av olika lägen på interaktiva element (dvs. annorlunda styling på t.ex. en knapp när du håller musen över den).
Skapa gärna en sitemap som (oftast automatiskt) sammanställer alla sidor på din webb och kan då användas för snabb navigation.

Undvik tidsbegränsade element om möjligt (t.ex. element som försvinner efter ett kort tidsintervall) eller ge möjligheten att förlänga visningen.
Skapa tillräckligt stora interaktiva element (t.ex. knappar som är tillräckligt stora för att inte råka trycka på något annat) och, som nämnt under Struktur och navigation, tydliggör elements olika lägen (passiv, mus över, klickad osv.)
Ge möjligheten att kontrollera ljud eller video (t.ex. inga automatiska ljud).
Ange status-meddelanden vid interaktion, t.ex. meddelanden vid framgång eller fel. Tänk på att tydliggöra vad förväntas att användaren ska göra vid en interaktion, t.ex. markera och kommentera att ett fält måste fyllas i för att kunna skicka in ett formulär som inte "gick att skicka in".
Förvarna om ovanlig interaktion, t.ex. markera externa länkar som ska öppna ett nytt fönster.
Ge klickbaserade alternativ till svepning.

Se till att länkens syfte är tydligt beskrivet, t.ex. “Läs mer om tillgänglighet” istället för “Läs mer”
Undvik URL-adresser som länktext (de bokstaveras av skärmläsare, blir svårt att förstå efter några tecken).
Markera länkar i brödtext (WCAG2 rekommenderar understrykning eftersom det är förutsägbart och tydligt; om endast färg används måste kontrasten vara minst 3:1 och en extra markering måste finnas vid fokus- eller aktivt läge).
Om bilder används som länkar, bildens alt-text agerar som länktext, dvs. att alt-texten ska både beskriva bilden och berätta vad kommer hända om man aktiverar länken.
Förvarna om länkar öppnas i ny flik, och använd uttryck som t.ex. “Hoppa ner till…” vid ankarlänkar.

Använd relativa mått som em och rem, speciellt för text (det blir lättare att skala upp och ner utan problem).
Säkerställ att innehåll visas rätt även när man zoomar in/ut.
Säkerställ att samma innehåll är tillgänglig på alla enheter och plattformar/webbläsare.
Följ gärna den förväntade "läsordningen", t.ex. en "upptäck flera nyheter"-knapp bör komma efter några nyheter, inte innan.
Försök att inte dölja innehåll mellan olika skärmstorlekar, t.ex. om fyra nyhetsinlägg visas på en datorn, samma antal bör visas även i mobilen (för att inte förvirra en användare som försöker hitta samma innehåll i olika enheter).
Ge stöd för “pinch zoom” (ta bort user-scalable=no om det finns).

Ange beskrivande alt-texter som stöd för skärmläsare (bonus: dyker upp i bildsökningar också!).
Använd tabeller bara för datainnehåll, inte för layout!
Använd undertexter eller transkriberingar för video- och/eller ljudklipp.
Ge alternativ eller beskrivningar för komplexa visualiseringar (t.ex. infografik).
Undvik blinkande element (färg eller ljus) som kan vara triggande för personer med epilepsi.
Undvik text som bild eftersom det kan inte översättas, markeras, eller läsas upp av skärmläsare. Ange samma text som "riktig" text om det måste inkluderas som bild.
Använd lättbegripliga och igenkännbara ikoner och symboler och använd aria-noteringar för symboler.
Sträva efter att visa mångfald i bildspråket, genom att inkludera personer av olika ras, kön, sexuell läggning, vikt, ålder etc.
Använd gärna inkluderande språk, t.ex. könsneutrala pronomen.
Undvik kränkande eller stereotypiska bilder eller uttryck!

Använd läsbara teckensnitt och skapa en tydlig typografisk hierarki.
Undvik för många teckensnitt i samma kontext.
Undvik brödtext mindre än 16px och för tunna teckensnitt.
Undvik för små eller för stora radavstånd eller teckenavstånd - luft är bra (ungefär ½ av teckenhöjden), men inte så mycket att det drar isär rader eller tecken.
Radlängden (vid standard brödtext) bör vara runt 60 karaktärer på storskärm (absolut inte längre än 80), och 25 karaktärer i mobilen.
Undvik marginaljusterad text (det skapar “floder” i texten och drar ner läsbarheten).
Undvik att skriva med versaler (vissa skärmläsare bokstaverar ord i versaler) så länge det inte handlar om en akronym.
Undvik versaler, kursivering, eller centrerad text på längre textstycken, då dessa påverkar läsbarheten.

För personer med dyslexi eller lässvårigheter:

Sans-seriffer och monospace-teckensnitt rekommenderas då seriffer gör bokstäverna för komplicerade, och därmed drar ner läsbarheten.
Undvik att skriva kursivt (speciellt på längre textstycken).
Teckensnitt med öppna former och längre staplar (i t.ex. “b”) och underhäng (t.ex. “p”) rekommenderas.
Unika former rekommenderas - dvs. icke-speglade former för b/d, p/q, skillnad mellan versal I (i), gemen l (L), och siffran 1 (ett).
Gör text lättare att “skanna” med ögat genom att betona viktiga element (t.ex. med olika vikter eller färger).

Använd eller ge stöd för hög kontrast mellan bakgrund och text - lägsta rekommenderade rapport är 4.5:1 på normal text (dvs. ej rubriker), ju högre desto bättre.
100% vit eller svart kan (speciellt i stora mängder) upplevas som för "hårda" eller skarpa.
Använd mer än bara färg för att skilja på element eller för att förmedla budskap (t.ex. endast en röd bakgrund för varning är ej bra).
Mindre mättade färgnyanser (dvs. "lugnare" toner) kan skapa en bättre upplevelse hos användare med kognitiva svårigheter.
Använd färg som verktyg, ej hinder - till exempel färgkodning för olika sektioner av sidan eller siten kan skapa tydligare strukturer och mer förutsägbar interaktion.

Ange synliga etiketter ovanför formulärfält som informerar om fältets syfte.
Information ska ej finnas endast som platshållare i fält. Dessa försvinner när användaren börjar skriva in sitt svar i fältet!
Undvik gamla versioner av reCaptcha (t.ex. "klicka på bilder av..." som ej kan ersättas av en annan metod) eftersom reCaptcha-fält gör formulär mycket jobbigare för personer med funktionsvariationer som ej kan interagera med just den typen av data. Välj istället honeypots (dolda fält eller sidor som är skapade för att fånga robotar - ofta inbyggda i formulärtillägg).
Markera obligatoriska fält på ett tydligt sätt (och informera hur markeringen ser ut, t.ex. "Obligatoriska fält markeras med *")
Ange status-meddelanden vid interaktion, t.ex. meddelanden vid framgång eller fel. Tänk på att tydliggöra vad förväntas att användaren ska göra vid en interaktion, t.ex. markera och kommentera att ett fält måste fyllas i för att kunna skicka in ett formulär som inte "gick att skicka in".
Berätta vad som händer efter inskickat formulär, t.ex. om om användaren ska få ett bekräftelse via e-post.

Använd ord, termer, datum- eller andra sifferformateringar på ett konsekvent sätt.
Gör texterna överskådliga och skriv gärna tydliga, beskrivande rubriker och etiketter.
Skapa eventuella lättlästa versioner av sidor med viktigt eller svårläst innehåll, och förklara eventuella svåra eller obekanta termer.
Undvik exkluderande uttryck (t.ex. “han” som standard även om man inte vet könet).
Första gången du använder en akronym, skriv ut vad den står för.
För att göra innehållet ännu mer tillgänglig, fundera på att översätta det till ett eller flera språk.
Ange sidans språk i koden.

Använd rätt HTML-semantik och strukturer, dvs. en rubrik markeras som rubrik (dvs. H-element), sidfot som sidfot etc.
Minimera oanvänd eller överflödig kod.
Använd inte tabeller som verktyg för layout!
Använd inte inline-Javascript.
Undvik CSS-inlagda bilder (som är viktiga för att förmedla ett budskap) då dessa kan inte läsas upp av skärmläsare.
Basera inte viktig funktionalitet på format som kräver insticksprogram.
Följ lämpliga, aktuella kodstandarder och håll hemsidan uppdaterad.
Respektera användarens val eller inställningar, tvinga ej ett visst utseende via kod.

Resurser

Resurser och vidareläsning för dig som vill veta mer

Vill du läsa mer om inkluderande design och tillgänglighet eller upptäcka smidiga verktyg? Här bjuder vi på länkar med mer information, tips och trix. Har du egna resurser eller information som du vill sprida får du gärna skicka in det till oss. Fyll gärna på vår kunskapsbank genom att klicka på knappen nedan!

Fyll på vår kunskapsbank!