Tillgänglig webbplats: Utforma din online-närvaro utan hinder

Webbtillgänglighet säkerställer att användare med funktionsnedsättningar och olika behov kan använda webben utan problem. Att utforma webbplatser med tillgänglighet i åtanke ger alla möjlighet att få tillgång till information online och delta i den digitala diskussionen.

Hur är webbplatsen otillgänglig?

I grund och botten handlar tillgänglighet om att undanröja hinder som hindrar oss från att göra framsteg. På webben uppstår hinder ofta utan att vi är medvetna om det. Dåligt strukturerade webbplatser kan göra webbinnehåll eller tjänster oanvändbara för vissa människor. Även om tillgängligheten offline har förbättrats avsevärt, finns det fortfarande mycket att göra online.

Ett vanligt hinder är captchas. Dessa används för att verifiera att personen som försöker komma åt en webbplats är en människa och inte en robot. Att använda tecken och bilder som är svåra att känna igen som verifieringsmetod tar inte hänsyn till att vissa webbplatsbesökare kan ha nedsatt syn.

Webbtillgänglighet handlar om att ge alla lika tillgång till webbinnehåll. Det innebär att innehåll och media på webben ska skapas på ett sådant sätt att alla kan använda och interagera med det. När det gällerdigital inkludering måste företag vara medvetna om vikten av att skapa tillgängliga webbplatser. Inkluderande webbplatser förbättrar inte bara den övergripande användarupplevelsen, utan har också en positiv inverkan på sökmotoroptimeringen.

Vad baseras webbtillgänglighetsstandarder på?

De viktigaste internationella riktlinjerna för webbtillgänglighet är Web Content Accessibility Guidelines (WCAG), som har tagits fram av World Wide Web Consortium (W3C). Konsortiet har identifierat fem faktorer som är viktiga för att alla användare ska kunna delta fullt ut online: perception,förståelse, navigering, interaktion och bidrag.

Uppfattning

Många webbplatser innehåller blinkande annonser, kommentarsfält fyllda med liten text och i vissa fall bakgrundsmusik för att understryka webbplatsens stämning eller tema. Vissa av dina webbplatsbesökare kanske dock inte uppfattar dessa element på det sätt du avsett, och vissa besökare kanske inte uppfattar dem alls.

Till exempel navigerar synskadade personer på internet utan visuella stimuli. Istället förlitar de sig på en skärmläsare, en typ av hjälpmedel som läser upp informationen på en webbplats. Med en punktskärmsdisplay kan texten sedan omvandlas till punktskrift.

Ett annat exempel är ett text-till-tal-verktyg, som levererar innehållet på en webbplats i ljudformat. Med denna teknik använder användarna sin hörsel för att bearbeta webbplatsens innehåll. I exemplet ovan skulle dock bakgrundsmusiken vara mycket störande.

Personer med lätt synnedsättning, däribland många äldre, kan se innehållet på din webbplats, men skulle föredra att bilderna var större. Å andra sidan kan färgblinda personer inte uppfatta varningar som endast kommuniceras med hjälp av färg. På samma sätt kan hörselskadade personer inte uppfatta information som endast presenteras i ljudformat, vilket är viktigt att tänka på när man skapar videoinnehåll.

Förståelse

Mycket unga användare, äldre personer eller personer med kognitiva funktionsnedsättningar har ibland svårt att förstå en text som är full av moderna tekniska termer eller förkortningar som inte förklaras. Om en webbplats visar tematiskt relaterade innehållselement långt ifrån varandra kan det göra det svårt för många människor att se sambandet mellan de olika innehållsdelarna.

Interaktion och navigering

Allt fler använder sina smartphones för att surfa på nätet, och länkar som är svåra att klicka på kan vara frustrerande när man interagerar med och navigerar på en webbplats. För personer med tremor kan webbplatser som inte är mobilvänliga och har länkar placerade tätt intill varandra också vara en utmaning.

Många verktyg har utvecklats för att göra datorer lättare att använda för personer med fysiska funktionsnedsättningar. Vissa verktyg registrerar till exempel ögonrörelser, medan andra tekniker använder personens tangentbord. Generellt sett bör webbplatser utformas så att de kan läsas med hjälp av hjälpmedelsteknik. Om din webbplats inte kan navigeras ordentligt kommer potentiella kunder som har dirigerats till din webbplats inte att kunna dra full nytta av den.

När användare ombeds fylla i ett formulär (t.ex. för att registrera sig för ett nyhetsbrev) gör de ofta misstag. Lösenordet är för kort eller födelsedatumet uppfyller inte kraven. Därför är det viktigt att formulera tydliga instruktioner om hur man rättar till sådana fel. Webbplatsinteraktion omfattar även navigering. Användare som surfar på enheter med små skärmar eller använder skärmläsare behöver anpassade navigeringsvägar och är beroende av att webbplatserna har en tydlig struktur.

Bidrag

Kommentarfält gör det möjligt för dina användare att ge feedback. De kan använda dem för att uttrycka sina åsikter om en produkt eller ett innehåll, eller för att utbyta åsikter med andra användare. Personer med synnedsättning använder ofta en skärmförstorare när de skriver. Det innebär att elementen visas mycket större och avståndet mellan texten och inmatningsfältet ökar. Ordna elementen så att de ligger visuellt nära varandra, så att det blir lättare för dina besökare att utbyta information.

Hur webbtillgänglighet gynnar alla

Att ta bort hinder förbättrar både användbarheten på din webbplats och din Google-ranking. Det kräver inte mycket extra arbete att göra en webbplats tillgänglig, och med en förbättrad sökmotorranking är tillgänglig webbdesign också bra för affärerna. Beroende på vilken typ av webbplats du har kan du till och med vara skyldig enligt lag att se till att den är tillgänglig. Enligt 2018 års tillgänglighetsföreskrifter för offentliga organ (webbplatser och mobila applikationer) är offentliga webbplatser skyldiga att göra sina webbplatser tillgängliga. Undantag kan göras om genomförandet av sådana ändringar anses utgöra en oproportionerlig börda för webbplatsoperatören. Equality Act 2010 kräver att företag också gör anpassningar för att säkerställa att personer med funktionsnedsättning kan få tillgång till de produkter och tjänster som de tillhandahåller. För företag innebär webbplatsens tillgänglighet också att de kan nå fler kunder.

Vilka är de vanligaste riktlinjerna för webbtillgänglighet?

Om du vill skapa en tillgänglig webbplats är det viktigt att tänka på strukturen på informationen på din webbplats och hur du implementerar olika visuella komponenter.

Bra informationsarkitektur

Strukturera din webbplats tydligt och använd ett användarvänligt språk. Det hjälper dig att locka fler läsare och samtidigt förbättra din Google-ranking. Det beror på att sökmotorer också utvärderar texternas läsbarhet. Om du vill säkerställa bra SEO och en tydlig webbplatsstruktur bör du tänka på följande när du strukturerar din webbplats:

• Tydlig namngivning av URL:er och innehåll: webbplatsens fokus och avsedda mål ska vara lätt att känna igen på varje sida och undersida.
• Begriplig struktur: användarna ska alltid veta var de befinner sig på webbplatsen.
• Platt hierarki: det ska inte krävas mer än några få klick för att nå olika innehållselement.
• Separation av layout och innehåll: använd CSS för utformningen av din webbplats.
• Användarvänliga kategorier: undersidor bör ha en intuitiv semantisk länk till översidan.
• Allt innehåll bör visas på ett webbvänligt sätt.
• Användarvänligt språk: formuleringarna på din webbplats ska vara lätta att förstå och förklaringar ska ges när det behövs.
• Viktiga delar av webbplatsen, såsom kontakt, impressum, sökfält eller startsida, bör vara tillgängliga med ett klick.
• Navigationselementen ska vara tydligt synliga och ha samma struktur på varje sida.
• Större webbplatser bör ha en webbplatskarta och en FAQ -sektion.
• Skalbara teckensnitt, färger och en anpassningsbar layout bör underlätta hur innehållet visas på olika enheter och i olika webbläsare. Helst bör de vara kompatibla med hjälpmedelsteknik.
• Webbplatsen ska kunna användas med både mus och tangentbord.
• Alternativa texter för bilder: alt-texter är nödvändiga eftersom skärmläsare och sökrobotar endast kan bearbeta textinnehåll.

Tillgänglig visuell design

Om du förstorar teckensnittet eller ändrar färgerna kan personer med nedsatt syn eller färgblinda personer få ut mer av din webbplats. Innehållet bör sticka ut från bakgrunden färgmässigt så att det blir så lättläst som möjligt. Markera interaktiva element med knappar eller olika färger. Du kan till exempel utforma din webbplats så att länkar ändrar färg när man håller muspekaren över dem eller klickar på dem. Förutom färger måste du dock också använda andra informationssignaler, såsom siffror eller asterisker, för att förmedla information.

Close

Personer med epilepsi utsätts för risker när webbplatsens grafik flimrar mer än tre gånger per sekund. Forskare har också upptäckt att statiska bilder kan utlösa anfall, vilket gör det viktigt att undersöka vilka bilder och grafik som är bäst att använda.

Flera kanaler för informationsförmedling

Tänk på tillgänglig webbdesign i ditt dagliga arbete. För sökmotoroptimering, PR-ändamål och kommunikation av nya erbjudanden kan du behöva ladda upp nytt innehåll dagligen. Gör det enklare för dina besökare att få tillgång till informationen genom att anpassa den efter deras behov.

En grundläggande komponent i en tillgänglig webbplats och en bästa praxis för SEO är alternativtext för bilder. Alternativtext hjälper sökrobotar, skärmläsare och synskadade användare att förstå bildinnehållet genom att förmedla vad bilden handlar om. Besökare med dålig internetuppkoppling kan också dra nytta av alt-texter när bilder laddas långsamt eller inte laddas alls.

Transkriptioner och undertexter

Med transkriptioner och undertexter kan du transkribera ljudinnehåll för personer med nedsatt hörsel. Transkriptionen, som omvandlar talade ord samt ljud och brus till textform, bör placeras så nära respektive ljudinnehåll som möjligt. Detta kan till exempel göras via en knapp som länkar till dokumentet. Undertexter gör det betydligt lättare för hörselskadade personer att förstå videoinnehåll. Användare som inte vill använda ljudfunktionen (till exempel för att de befinner sig i en tyst miljö) kan också ha nytta av videor med undertexter. Personer med kognitiva funktionsnedsättningar eller beteendestörningar som ADHD har också större sannolikhet att ta till sig information som förmedlas via videor om de kan eliminera bakgrundsljud.

Ljudförklaring

Personer med en synskärpa på mindre än 30 % betraktas som synskadade, och om synskärpan är så låg som 2 % betraktas de juridiskt sett som blinda. De uppfattar visuella stimuli i begränsad utsträckning eller inte alls. För att hjälpa människor att förstå videoinnehåll bör du lägga till ett extra ljudspår. Genom dessa spår ger du förklaringar av visuella komponenter som landskap och människor och beskriver kortfattat händelser som äger rum. Placera dessa förklaringar under pauserna i den ursprungliga ljudinspelningen så att ljudspåren inte överlappar varandra.

Följande video visar en kort introduktion till ljudförklaringar och hur man integrerar dem i en video. Undertexterna är också ett exempel på hur man kan förbereda innehåll för personer med nedsatt hörsel.

För att visa den här videon krävs tredjepartscookies. Du kan komma åt och ändra dina cookieinställningar här.

Enkelt engelska

Enkelt språk förklarar information på ett sätt som är lätt att förstå. Det hjälper också personer med kognitiva funktionsnedsättningar att bättre förstå mer komplexa ämnen. Enkelt språk undviker villkorssatser, passiv form och onödiga ord. Meningar på enkelt språk är korta, och subjekt och verb placeras nära varandra.

Personer med kognitiva funktionsnedsättningar har samma rätt till information som alla andra. Därför börjar många dagstidningar att publicera enklare versioner av sina artiklar online. Ett exempel är tidningenThe Times. Även offentliga institutioner använder i allt högre grad klarspråk i sina texter.

Design för hjälpmedelsteknik

Skärmläsare och andra hjälpmedel gör webbplatser tillgängliga. Sådana program bearbetar webbdokument från vänster till höger och från topp till botten. De fungerar på ett strikt linjärt sätt, vilket är anledningen till att det är viktigt att separera layout och design från varandra. Annars kommer skärmläsarna att bearbeta din webbplats felaktigt. Hjälp till att säkerställa att användarna kan navigera effektivt på din webbplats genom att följa dessa grundläggande regler:

Hoppa över navigeringslänkar och andra genvägar

Skärmläsare överför textinformation till talutmatningsprogram och punktskärmar. För att göra detta läser de sidan från topp till botten. Detta inkluderar återkommande element såsom navigeringsfält, ikoner och länkar till undersidor. För att förhindra att läsaren onödigt upprepar denna information för varje sida som öppnas bör du använda länkar för att hoppa över navigering (även kallade hoppa över-länkar). Användare som navigerar enbart med tangentbordet, eventuellt med ett munstycke, kan tycka att det är besvärligt att klicka sig igenom flera element. En tydligt synlig hoppa över-länk högst upp på sidan kangöra det enklare att navigera på webbplatsen:

<body><a href="#content">Skip navigation</a>…<main id="content"><h1>Main title</h1><p>First paragraph</p>

Det kan finnas hoppa över-länkar som är osynliga i layouten. Skärmläsaren skickar den alternativa texten “hoppa över navigering” till användaren om koden ser ut så här:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Skip navigation" width="5"></a>

Det är viktigt att hoppa över länkar placeras i början av koden om möjligt. Placera ankartexten i början av huvudinnehållet:

<a name="content"></a>

Använd hoppa över-länkar sparsamt, eftersom för många av dessa länkar kan ha motsatt effekt och leda till att användarna måste klicka sig igenom många element. En mer elegant lösning är att använda ARIA-landmärken och ge dokumentet en bra struktur. WebAIM rekommenderar att man använder HTML5-element. Dagens webbläsare stöder dock ännu inte denna metod fullt ut.

En innehållsförteckning i början av dokumentet, som leder användarna till respektive avsnitt via länkar, kan vara till ytterligare hjälp eftersom moderna skärmläsare då kan läsa upp motsvarande rubriker. Genom att arbeta med meningsfulla, välstrukturerade rubriker kan du öka läsbarheten för både sökmotorer och hjälpmedelsteknik.

Datatabeller istället för layouttabeller

W3C:s riktlinjer rekommenderar att endast datatabeller används. Skärmläsare har färre problem med detta format eftersom de kan återge informationen på ett meningsfullt sätt efter konvertering. Layouttabeller ger däremot webbplatsen en optisk struktur, men gör det svårare för skärmläsare att återge innehållet på ett begripligt sätt.

W3C ger användbara tips om hur man utformar webbplatser för tillgänglighet. Om layouttabeller är nödvändiga är det bäst att definiera dem med enkla element: table, tr och td (tabell, rad, cell). Om du använder strukturerande element för att skapa cellförbindelser kommer skärmläsaren att läsa layouttabellen som en datatabell. Du kan motverka detta genom att ta bort vissa tabellelement från tillgänglighetsträdet. För att göra din webbplats tillgänglig använder du koden role="none", som i exemplet nedan. Detta gäller tabellen och dess underordnade element. Om du packar tabeller i tabeller måste du definiera båda elementen.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Text example <abbr title="for example">e.g.</abbr> via ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Så här kommer det att visas i gränssnittet:

Text example <abbr title="for example">e.g.</abbr> via ARIA.

Checklista för webbtillgänglighet

När du är klar med att skapa din webbplats kan du använda checklistan nedan för att säkerställa att du har inkluderat de viktigaste elementen för tillgänglighet.

• ✓ Välstrukturerad informationsarkitektur som är lätt att följa
• ✓ Tillgängligt språk som är lätt att förstå
• ✓ Alternativtext för bilder
• ✓ Transkriptioner av video- och ljudfiler
• ✓ Viktigt innehåll markerat med olika färger
• ✓ Hög kontrast
• ✓ Stöd för skärmläsare

Exempel på tillgänglig webbplats (W3C)

Det är nog ingen överraskning att W3C:s webbplats är ett utmärkt exempel på hur man utformar en tillgänglig webbplats. Den lyckas på ett fantastiskt sätt införliva de centrala element som beskrivs i riktlinjerna för webbplatsers tillgänglighet:

• Enkelt språk
• Tydligt strukturerad HTML
• Indikatorer när element är markerade
• Färgkontrast
• Tydlig webbplatsstruktur som är lätt att följa

Gratis verktyg för att kontrollera webbtillgänglighet

Det finns ett antal olika verktyg som du kan använda för att skapa en webbplats som är tillgänglig. Nedan går vi igenom några av de mest populära. Du hittar en omfattande lista över verktyg för att kontrollera webbtillgänglighet på W3C:s webbplats.

• Accessibility Checker: med webbapplikationen Accessibility Checker kan du kontrollera om din webbplats uppfyller riktlinjerna för tillgänglighet till webbinnehåll (WCAG).
• Siteimprove: Siteimproves webbtillgänglighetskontroll ger en kostnadsfri utvärdering av din webbplats. Resultaten skickas sedan till dig via e-post.
• Tenon: Förutom att vara en webbtillgänglighetskontroll erbjuder Tenon även en snabb korrigeringstjänst och utbildningar i hur man skriver tillgänglig kod.