Vad är tillgänglighet (accessibility) och hur tillämpas det?

Vad är webbtillgänglighet, varför är det viktigt och hur tillämpas det steg för steg? En guide om WCAG, tangentbordsstöd, kontrast och ARIA för en webb utan hinder.

Varje sida du surfar in på är i själva verket en dörr. Vissa öppnas på vid gavel och bjuder in dig; andra ser inte ens dem som fastnar på tröskeln. Webbtillgänglighet är just konsten att hålla denna dörr öppen för alla. Att utforma en webbplats där en synskadad användare kan navigera med en skärmläsare, där någon som inte kan använda sina händer tar sig fram enbart med tangentbordet, eller där en helt vanlig besökare som försöker titta på sin telefon i solen kan läsa innehållet, är inte en välgärning utan ett grundläggande ansvar inom modern webbdesign.

De flesta tror att tillgänglighet enbart är en funktion "för personer med funktionsnedsättning". I verkligheten är bilden mycket bredare. En välutformad webb utan hinder gagnar den äldre användaren, någon som tillfälligt har armen i gips, den som tittar på en video utan ljud i en bullrig miljö, och till och med alla som kämpar med en långsam internetuppkoppling. Tillgänglighet är inte en minoritetsfråga, utan hjärtat i universell design. När du tar bort en tröskel är det inte bara rullstolsanvändaren som blir hjälpt, utan alla som drar en resväska, skjuter en barnvagn eller bär en kartong får det lättare.

I den här guiden går vi igenom vad tillgänglighet är, vilka principer den vilar på, vilka standarder som styr den och, framför allt, hur du steg för steg förverkligar den i ett webbprojekt. Vi har varit noga med att hålla den tekniska jargongen enkel och att lägga in praktiska tips under varje rubrik. Oavsett om du startar en helt ny webbplats eller vill förbättra ett befintligt projekt kan du ta med dig stegen i den här texten in i ditt eget arbetsflöde.

Vad är webbtillgänglighet?

Webbtillgänglighet innebär att digitalt innehåll och gränssnitt ska kunna uppfattas, förstås och användas av så bred krets av användare som möjligt. Det förkortas ofta "a11y"; den förkortningen kommer av att det finns 11 bokstäver mellan första bokstaven "a" och sista bokstaven "y" i det engelska ordet "accessibility". När du säger a11y talar du alltså om precis samma sak som tillgänglighet, bara i en kortare form.

I centrum av tillgängligheten finns en enkel idé: ingen ska berövas tillgång till en tjänst på grund av sin enhet, sin förmåga eller de omständigheter hen befinner sig i. I praktiken betyder detta att synskadade användare kan lyssna på innehållet med skärmläsare, att hörselskadade användare kan ta del av undertexter i videor, att användare med begränsad motorik kan navigera med tangentbordet utan att behöva en mus, och att användare med kognitiva svårigheter möts av ett enkelt och förutsägbart gränssnitt.

Vilka typer av funktionsnedsättningar omfattas?

När du designar för tillgänglighet räcker det inte att tänka på en enda grupp. Vanligtvis görs bedömningen utifrån fyra huvudkategorier:

Visuella: Blindhet, nedsatt syn, färgblindhet och ljuskänslighet.
Auditiva: Dövhet och hörselnedsättning; dessa användare behöver ett alternativ till ljudinnehåll.
Motoriska: Skakningar, förlamning, saknade lemmar eller tillstånd som försvårar precisa handrörelser; användning av tangentbord eller hjälpmedel i stället för mus.
Kognitiva och neurologiska: Dyslexi, koncentrationssvårigheter, minnessvårigheter och känslighet för blinkande innehåll som kan utlösa anfall.

En viktig poäng är att hindren inte behöver vara permanenta. Funktionsnedsättningar kan vara bestående (synförlust), tillfälliga (en bruten arm) eller situationsbundna (att använda telefonen med en hand medan du håller en bebis i famnen). En tillgänglig webb betjänar alla dessa tre situationer samtidigt.

Varför är tillgänglighet viktigt?

Skälen att investera i webbtillgänglighet är inte enbart etiska; de har starka grunder även affärsmässigt, juridiskt och tekniskt. Att enbart se frågan som "god vilja" leder till att man missar de konkreta fördelarna den för med sig.

Det första och mest grundläggande skälet är mänskligt. Internet är i dag en oskiljaktig del av utbildning, vård, bankärenden, offentliga tjänster och det sociala livet. Att en användare inte kan boka en tid eller fylla i ett formulär bara för att din webbplats inte är tillgänglig innebär att du stänger dörren framför hen. En webb utan hinder är en förutsättning för digital jämlikhet.

Det andra skälet är kommersiellt. En betydande del av världens befolkning lever med någon form av funktionsnedsättning; tillsammans med sin köpkraft utgör denna grupp en marknad som inte kan ignoreras. En e-handelsplats som inte är tillgänglig förlorar direkt den användare som fastnar i steget "lägg i varukorg". Dessutom förbättrar tillgänglighetsförbättringar oftast upplevelsen för alla användare; en tydlig struktur, läsbar text och konsekvent navigering är till nytta för alla.

Sambandet mellan tillgänglighet och SEO

Tillgänglighet och sökmotoroptimering överlappar i förvånansvärt hög grad. Sökmotorernas robotar läser innehållet textuellt, precis som en skärmläsare. En meningsfull rubrikhierarki, alternativtexter till bilder, beskrivande länktexter och en korrekt sidstruktur gör innehållet mer begripligt för både hjälpmedel och sökmotorer. När du förbättrar tillgängligheten ökar du alltså samtidigt din synlighet.

Det fjärde skälet är juridiskt. I många länder har det blivit ett lagkrav att offentliga myndigheters – och i allt högre grad den privata sektorns – webbplatser uppfyller vissa tillgänglighetsstandarder. Att inte följa standarderna kan medföra både anseendeförlust och risk för sanktioner. Att bygga in tillgänglighet i designen från början är alltid billigare än att göra obligatoriska rättelser i efterhand.

WCAG och tillgänglighetsstandarder

Det som gör att tillgänglighet kan gå från "god vilja" till en mätbar ingenjörsdisciplin är gemensamma standarder. Den mest allmänt accepterade referensen på området är WCAG, känd som Web Content Accessibility Guidelines (riktlinjer för tillgängligt webbinnehåll). WCAG definierar de kriterier som webbinnehåll måste uppfylla för att vara tillgängligt och utgör grunden för många lagregleringar världen över.

WCAG bygger på fyra grundprinciper. Dessa principer kallas också "POUR" efter sina initialer på engelska:

Möjlig att uppfatta (Perceivable): Information och gränssnitt måste presenteras på ett sätt som användaren kan uppfatta. Alternativtext för bilder och undertexter för videor är exempel på denna princip.
Hanterbar (Operable): Gränssnittets komponenter och navigering måste vara användbara. Att allt ska gå att nå med tangentbordet är kärnan i denna princip.
Begriplig (Understandable): Informationen och hur gränssnittet fungerar måste vara begripliga. Konsekvent struktur, läsbart språk och tydliga felmeddelanden hör hit.
Robust (Robust): Innehållet måste vara tillräckligt robust för att kunna tolkas på ett tillförlitligt sätt av olika användarverktyg, inklusive hjälpmedel. Användning av giltig och meningsfull HTML är central här.

Konformitetsnivåer: A, AA och AAA

WCAG-kriterierna delas in i tre konformitetsnivåer. Dessa nivåer avgör hur omfattande tillgänglighet du strävar efter.

Nivå	Betydelse	Praktisk innebörd
A	Den mest grundläggande nivån	Ovillkorliga, minimala kriterier
AA	Den vanligaste målnivån	Den balanspunkt som de flesta lagregleringar och projekt utgår från
AAA	Den högsta nivån	Betydligt strängare kriterier; att fullt ut uppfylla dem på varje sida är inte alltid realistiskt

För de flesta projekt är det praktiska målet nivå AA. Denna nivå skapar en rimlig balans mellan att vara genomförbar i verkligheten och att ge ett omfattande skydd. Nivå AAA bör ses som ett uppnåeligt ideal för specifikt, kritiskt innehåll; att göra den obligatorisk över hela webbplatsen är oftast överdrivet.

Möjlig att uppfatta: visuell och auditiv tillgång

När du börjar omsätta tillgänglighet i praktiken är det oftast mest logiskt att börja med principen "möjlig att uppfatta", eftersom det är här de mest synliga problemen finns. Målet är att innehållet inte ska vara beroende av ett enda sinne. Om information enbart förmedlas genom färg, enbart genom ljud eller enbart genom bild kommer det ofrånkomligen att finnas användare som inte kan ta del av den.

Färgkontrast och färgberoende

Kontrasten mellan text och bakgrund är ett av de mest kritiska elementen för läsbarhet. Lågkontrastdesign med grått på ljusgrått kan se elegant ut men är oläslig för användare med nedsatt syn. WCAG rekommenderar ett kontrastförhållande på minst 4,5:1 för text av normal storlek och 3:1 för stor text. Att köra din design genom ett verktyg för kontrastkontroll fångar upp detta problem redan i designfasen.

Förlita dig dessutom aldrig enbart på färg för att förmedla information. En design enligt "röda fält är felaktiga, gröna är giltiga" är meningslös för färgblinda användare. Lägg till en ikon, en etikett eller en textledtråd utöver färgen. I ett formulärfält räcker det till exempel inte att markera felet med en röd ram; lägg även till en varningssymbol och ett förklarande meddelande bredvid.

Alternativtext och alternativ för media

Varje meningsfull bild ska ha en alternativtext (alt-text). Denna text förmedlar innehållet till någon som inte kan se bilden. När du skriver alt-text ska du tänka mer på bildens funktion på sidan än på att torrt beskriva den. För dekorativa bilder utan betydelse är det däremot rätt att lämna alt-texten tom; då läser inte skärmläsaren onödigt upp den.

Även ljud- och videoinnehåll behöver alternativ. Att lägga till undertexter på videor är ett krav för hörselskadade användare; det gagnar dessutom alla som inte kan slå på ljudet. Att tillhandahålla en skriven transkription för rena ljudinnehåll stödjer både tillgängligheten och sökmotorernas förståelse av innehållet.

Hanterbarhet: tangentbord och interaktion

Många användare använder aldrig en mus. För personer med motoriska funktionsnedsättningar, de som använder skärmläsare eller helt enkelt de som föredrar att arbeta snabbare med tangentbordet är det ett måste att varje funktion på din webbplats går att nå med tangentbordet. Detta är det mest konkreta provet på principen om hanterbarhet.

Navigering med tangentbord och fokushantering

Det mest praktiska sättet att testa tangentbordstillgänglighet är att lägga musen åt sidan och navigera genom hela webbplatsen enbart med Tab, Shift+Tab, Enter, mellanslag och piltangenterna. Var uppmärksam på några punkter när du gör detta test:

Når du varje klickbart element (länk, knapp, formulärfält) med Tab?
Syns det visuellt vilket element som har fokus? Att helt ta bort fokusringen (focus ring) för designens skull är ett allvarligt misstag.
Följer fokusordningen sidans visuella och logiska flöde?
Går interaktiva komponenter som rullgardinsmenyer, modaler eller flikar att öppna och stänga med tangentbordet?

Särskilt i modala fönster är begreppet "fokusfälla" (focus trap) viktigt. När en modal öppnas ska tangentbordsfokus stanna inuti modalen, och användaren ska inte av misstag kunna förflytta sig till innehållet i bakgrunden. När modalen stängs ska fokus återgå till den knapp som öppnade den.

Användning av meningsfull, semantisk HTML

En stor del av hanterbarheten löser sig av sig själv när du använder rätt HTML-element. När du använder en riktig button i stället för en div för ett klickbart element blir det elementet automatiskt fokuserbart med tangentbordet och kan aktiveras med Enter eller mellanslag. Webbläsaren ger dig detta gratis.

Semantisk HTML beskriver också sidans skelett korrekt för hjälpmedel. Att använda rubriker med rätt hierarki och att markera navigeringsområden med nav, huvudinnehållet med main och sidfoten med footer och andra meningsfulla landmärkeselement gör att skärmläsaranvändare snabbt kan ta sig runt på sidan. Dessa användare navigerar ofta med genvägar som "hoppa från rubrik till rubrik"; om din rubrikstruktur är trasig fungerar inte dessa genvägar.

ARIA: när och hur ska det användas?

ARIA, som står för Accessible Rich Internet Applications, är en uppsättning attribut som används för att lägga till tillgänglighetsinformation som HTML inte kan uttrycka på egen hand. I komplexa, dynamiska gränssnitt (egendefinierade flikar, rullgardinslistor, regioner som uppdateras live) ger det extra kontext till hjälpmedel. Men ARIA är lika kraftfullt som det är öppet för missbruk.

ARIA:s gyllene regel

Inom tillgänglighetsgemenskapen finns en princip som ofta upprepas: "Ingen ARIA är bättre än dålig ARIA." Anledningen är att felaktigt använda ARIA-attribut förstör det som annars är korrekt. Att till exempel onödigt lägga till role="button" på ett riktigt button-element är i bästa fall överflödigt; värre är att ge fel roll, vilket vilseleder användaren helt.

Den praktiska regeln är denna: om du kan lösa en uppgift med standard-HTML, tillgrip inte ARIA. ARIA lägger inte till något beteende; det ger enbart information till hjälpmedlet. Att kalla ett element för en "knapp" med role eller aria-*-attribut gör det alltså inte användbart med tangentbordet; det beteendet måste du dessutom koda själv. En riktig button ger däremot allt färdigt.

Användbara användningsområden för ARIA

Det finns ställen där ARIA verkligen lyser. Några exempel:

Live-regioner (aria-live): Får skärmläsaren att läsa upp innehåll som ändras utan att sidan laddas om (aviseringar, uppdateringar i varukorgen, valideringsmeddelanden i formulär).
Etikettering (aria-label, aria-labelledby): Ger mening åt knappar utan en synlig etikett (till exempel en "stäng"-knapp som bara innehåller en ikon).
Tillståndsinformation (aria-expanded, aria-selected, aria-checked): Talar om för hjälpmedlet om ett element är öppet eller stängt, valt eller inte.

När du lägger till dessa attribut, testa alltid med en riktig skärmläsare. ARIA är inte ett område där du kan säga "jag lade till det, så det funkar väl"; om det fungerar korrekt eller inte avgörs först genom att man upplever det.

Hur tillämpar man en tillgänglig webbplats? Steg för steg

Det är dags att omsätta teorin i praktik. Flödet nedan kan användas både för ett projekt från grunden och för att förbättra en befintlig webbplats. Det viktiga är att involvera tillgänglighet redan från början; varje förbättring som lämnas till slutet blir både dyrare och mer begränsad.

Börja i designfasen. Välj färgpaletten utifrån kontrastförhållanden, bestäm typsnitten utifrån läsbarhet och håll tryckytorna tillräckligt stora för att vara bekväma att använda med fingret.
Bygg ett meningsfullt HTML-skelett. Strukturera rubrikhierarkin, landmärkeselementen och formulärstrukturerna korrekt. Om denna grund är stabil blir nästa steg enklare.
Verifiera tangentbordsstödet. Testa varje interaktivt element enbart med tangentbordet; kontrollera fokusets synlighet och ordning.
Lägg till alternativ för bilder och media. Skriv alt-texter, lägg till undertexter på videor och tillhandahåll transkriptioner för ljud.
Gör formulären tillgängliga. Se till att varje fält har en synlig etikett, att felmeddelanden är tydliga och kopplade till sina fält och att obligatoriska fält anges klart.
Skanna med automatiska verktyg. Automatiska kontrollverktyg fångar snabbt en stor del av problem som kontrast och saknad alt-text.
Testa med riktiga användare och hjälpmedel. Automatiska verktyg hittar bara en del av problemen; test med skärmläsare och, om möjligt, återkoppling från användare med funktionsnedsättning är oumbärligt.
Gör det hållbart. Gör tillgänglighet till en bestående del av din utvecklingsprocess; låt varje ny funktion gå genom samma kontroll.

Balansen mellan automatiskt och manuellt test

Man bör inte överdriva värdet av automatiska testverktyg. Dessa verktyg är ytterst användbara men fångar bara den del av tillgänglighetsproblemen som kan mätas av en maskin. Ett automatiskt verktyg ser om en alt-text "finns eller inte"; men om den texten beskriver bilden på ett meningsfullt sätt kan bara en människa bedöma. Därför är en sund hållning att se den automatiska skanningen som ett första filter och det manuella testet samt testet med riktiga användare som den egentliga garantin.

Vanliga tillgänglighetsmisstag

Det finns vissa fällor som team som är nya på tillgänglighet faller i om och om igen. Att känna till dem i förväg hjälper dig att förebygga de flesta problemen.

Att ta bort fokusringen: Att av designhänsyn skriva outline: none och utplåna fokusindikatorn dömer tangentbordsanvändare till blindflygning. Om du tar bort ringen, ersätt den ovillkorligen med ett tydligt alternativ.
Meningslösa länktexter: Länkar som "klicka här" eller "läs mer" säger ingenting när de rycks ur sitt sammanhang. Länktexten ska på egen hand tala om vart den leder.
Information som enbart bygger på färg: Att visa fel enbart med rött och framgång enbart med grönt utestänger en bred grupp.
Formulärfält utan etikett: Formulärfält som lämnats med enbart platshållartext (placeholder) får användaren att glömma vad som efterfrågades så fort hen börjar skriva, och de läses inte tillförlitligt av skärmläsare.
Tangentbordsfällor: Situationer där användaren går in i en komponent men inte kan ta sig ut med Tab låser navigeringen helt.
Överdriven och felaktig ARIA: Att ösa på med roller och attribut i onödan förstör den befintliga tillgängligheten.

Det gemensamma för dessa misstag är att de flesta kan förebyggas med lite uppmärksamhet. Tillgänglighet föds oftast ur rätt vanor snarare än ur stora omskrivningar.

Vanliga frågor

Är tillgänglighet bara för synskadade?

Nej. Webbtillgänglighet omfattar utöver synskadade även användare som är hörselskadade, har begränsad motorik och har kognitiva svårigheter. Dessutom tar den hänsyn till tillfälliga tillstånd (en bruten arm, tiden efter en ögonoperation) och situationsbundna begränsningar (en skärm i starkt solljus, en bullrig miljö). En tillgänglig webbplats förbättrar upplevelsen för alla.

Vad betyder a11y?

a11y är en förkortning av det engelska ordet "accessibility". Eftersom det finns 11 bokstäver mellan ordets första bokstav "a" och sista bokstav "y" används den siffran, och det läses ut som "a-elva-y". I tekniska texter och utvecklargemenskaper används det ofta för att kortfattat tala om tillgänglighet.

Vilken WCAG-nivå bör jag sikta på?

För de flesta projekt är det praktiska och balanserade målet nivå AA. Nivå A uppfyller bara de minimala kriterierna och räcker oftast inte till; nivå AAA innehåller så strikta kriterier att den inte alltid är realistisk att uppfylla över hela webbplatsen. AA ger den sundaste balansen mellan ett omfattande skydd och genomförbarhet och är dessutom referenspunkten för många lagregleringar.

Påverkar tillgänglighet SEO?

Ja, positivt. Många metoder som förbättrar tillgängligheten stärker samtidigt sökmotoroptimeringen. En meningsfull rubrikhierarki, alternativtexter till bilder, beskrivande länktexter och en korrekt semantisk struktur gör att både hjälpmedel och sökmotorrobotar förstår innehållet bättre. En webb utan hinder och god SEO vilar ofta på samma grunder.

Räcker automatiska verktyg för att testa tillgänglighet?

Nej. Automatiska kontrollverktyg fångar snabbt problem som bristande kontrast, saknad alt-text och vissa strukturella fel och är ett värdefullt första filter. Men en betydande del av tillgänglighetsproblemen förstås bara genom mänsklig bedömning; till exempel om en alt-text verkligen är meningsfull eller om tangentbordsflödet är logiskt framgår genom manuellt test. Den mest robusta hållningen är att använda automatisk skanning tillsammans med test med skärmläsare och återkoppling från riktiga användare.

Är det väldigt svårt att göra en befintlig webbplats tillgänglig?

Svårigheten beror på webbplatsens tekniska skick och vilken nivå du siktar på. Den goda nyheten är att de största vinsterna oftast kommer från de enklaste rättelserna: att höja kontrasten, lägga till alt-texter, rätta formuläretiketter, återställa fokusets synlighet och gå över till semantisk HTML. Dessa grundläggande steg förbättrar snabbt situationen för den stora majoriteten av användare. Genom att prioritera och gå fram stegvis kan du nå långt utan att ge dig in i en jättelik omskrivning.

Slutsats

Webbtillgänglighet är inte en putsning som läggs till ett projekt i efterhand, utan ett synsätt som bör anammas från början. I grunden ligger ett mycket enkelt värde: internet är till för alla, och ingen ska berövas tillgång till en tjänst bara för att gränssnittet inte tänkte på hen. Som du har sett i den här texten är tillgänglighet inte ett abstrakt ideal; det är en mätbar och tillämpbar disciplin som vilar på principerna att vara möjlig att uppfatta, hanterbar, begriplig och robust.

Den praktiska färdplanen är tydlig. Börja med ett stabilt, semantiskt HTML-skelett; var noga med färgkontrast och alternativtexter; säkerställ att allt fungerar med tangentbordet; använd ARIA bara när det verkligen behövs och med omsorg; kör automatiska verktyg som ett första filter och säkra resultatet med test av riktiga användare och hjälpmedel. När du gör dessa steg till en bestående del av ditt arbetsflöde upphör tillgänglighet att vara en separat uppgift och blir ett naturligt resultat av kvalitativ webbdesign.

Kom ihåg att en webb utan hinder gagnar inte bara en viss användargrupp, utan alla som besöker din webbplats. En tydligare, mer läsbar, mer konsekvent och mer tillförlitlig upplevelse höjer både alla dina användares nöjdhet och din webbplats synlighet på samma gång. Varje steg du tar mot tillgänglighet öppnar den digitala världens dörrar lite vidare.