Hur du gör din webbplats tillgänglig för personer med funktionshinder

Avslöjande: Ditt stöd hjälper till att hålla webbplatsen igång! Vi tjänar en remissavgift för några av de tjänster vi rekommenderar på denna sida.


Enligt World Wide Web Consortium (W3C) representerar webben en unik möjlighet att använda teknik för att ge enastående nivåer av åtkomst till skriftligt, ljud- och videoinnehåll till dem som drabbas av funktionsnedsättningar. Med explosionen av utbildning, sysselsättning, myndigheter, företag, sjukvård och underhållningstjänster online är tillgänglig webbplatsdesign en kritisk fråga och kommer att avgöra om funktionshindrade användare har lika tillgång till de tjänster som oss utan funktionshinder tar för givet.

I vissa fall sträcker sig skälen för att tillhandahålla tillgänglighet till det rättsliga området. Till exempel finns det lagar i böckerna som kräver att alla webbplatser som har utvecklats eller köpts av den amerikanska federala regeringen ger lika tillgång för funktionshindrade personer. FN har också skapat liknande riktlinjer. Dessutom har vissa webbplatser krävts av domstolarna att följa Amerikanen med funktionsnedsättningslagen (ADA), och för närvarande rekommenderas alla utbildningsinstitutioner att ha en tillgänglig webbplats.

Mot bakgrund av fördelarna för funktionshindrade som möjliggörs av webben, såväl som de rättsliga följderna som kan möta en webbplats som inte uppfyller vissa minimikrav för tillgänglighet har flera organisationer, inklusive W3C, utvecklat standarder som webbdesigners kan tillämpa se till att alla besökare kan utnyttja informationen och funktionaliteten på en webbplats fullt ut.

Tips för att skapa en tillgänglig webbplats

Personer med funktionshinder använder ofta hjälpmedel för att komma åt webbplatser. En webbplats som är tillgänglig är utformad för att fungera korrekt med hjälp av teknik så att informationen och funktionaliteten som är grundläggande för webbplatsen görs tillgänglig för alla besökare.

I vissa fall, som i fallet med färgblindhet, används ingen hjälpteknologi. Istället överväger webbplatser som är tillgängliga för dessa besökare dessa problem när de utformar sin webbplats och använder korrekt visuella element.

Kort sagt, enligt W3C: “webbtillgänglighet innebär att personer med funktionshinder kan använda webben” (källa) oavsett funktionshinder. Att nå den åtkomstnivån är målet i riktlinjerna för Web Content Contentibility (WCAG) 2.0, som är den nuvarande tillämpliga standarden från W3C.

Börja ditt projekt med tillgänglighet i åtanke

Det första steget i att bygga en tillgänglig webbplats är att förstå hur personer med funktionsnedsättningar får tillgång till webben. W3C har samlat resurser som inkluderar berättelser om riktiga webbanvändare, en utforskning av mångfalden av webbanvändare och en diskussion om de olika sätten användare använder webben på. Genom att granska dessa resurser får du en tydlig bild av hur människor med funktionsnedsättning använder webben.

Det är också viktigt att tänka på komponenterna i webbtillgänglighet. Samtidigt som designers kan frestas att begränsa deras tillgänglighetstänkande till de visuella elementen de designar och koden de skriver, är det viktigt att känna till andra pusselbitar – särskilt saker som hjälpmedel och programvara som används för att förbättra tillgängligheten – och hur de borde informera webbdesign.

När ett projekt börjar och författarverktyg väljs, ha tillgänglighet i åtanke. Inte alla teman, widgets och plugins erbjuder lika tillgänglighet för webbplatsbesökare. Tillgängligheten för webbplatser som produceras av dessa olika verktyg bör vara ett av kriterierna som beaktas när författarverktyg väljs.

Slutligen, innan du börjar ditt projekt, bör du granska rekommendationerna i WCAG 2.0. Att följa rekommendationerna i detta dokument kommer att hjälpa till att säkerställa att webbplatsens innehåll är uppfattbart, användbart, förståeligt och robust.

Strukturera HTML korrekt

En av de viktiga sakerna att göra när man skapar en tillgänglig webbplats är att använda korrekt semantisk HTML. Här är några tips för att komma igång:

  • Ge beskrivande textalternativ (alt-text) för bilder: Skärmläsare läser alt-texten, så gör den meningsfull. Att läsa texten borde ha samma betydelse som att titta på bilden.
  • Använd rubriktaggar korrekt: Skärmläsare uppmärksammar rubriktaggar och använder dem som ledtrådar om vikten av information och strukturen för innehållet på en sida. Hoppa inte över en rubriknivå och använd dem inte i ordning.
  • Skapa tillgängliga former: Använd beskrivande och väl positionerade etiketter för varje inmatningsfält och använd etiketttaggen eller en ARIA-egenskap för att associera etiketten med inmatningsfältet.
  • Använd tabeller på lämpligt sätt: Tidigare var det vanligt att använda tabeller för webbplatslayout. Skärmläsare kan emellertid inte skilja mellan en tabell som innehåller data och en tabell som används för layoutändamål. Som ett resultat skapar felaktigt använda tabeller onödig komplexitet och förvirring för besökare som använder skärmläsare.

Arbeta med visuellt innehåll

Visuella element måste övervägas noggrant för att säkerställa att tillgängligheten inte går förlorad för användare med synskador. Sådana användare har ofta åtkomst till webbplatser med speciella webkontroller med hög kontrast, skärmläsare eller genom att ersätta CSS-stilar med en uppsättning regler som är avsedda att ta bort visuella hinder. För att skapa en webbplats som ger största möjliga tillgång till synskadade, överväg följande tips.

Beroende aldrig på färg ensam för att förmedla information

Ett formulär som använder färg för att identifiera obligatoriska fält kommer att utgöra ett problem för besökare som är färgblinda eller de som använder en skärmläsare. Samtidigt har andra användare stor nytta av att använda färger för att förmedla information. Avhämtningen är att du ska använda färg, men du bör också använda andra sätt att förmedla kritisk information.

Använd inte CSS för att leverera kritisk information

Vissa webbläsare ger besökarna möjlighet att skapa ett eget formatmall som kommer att åsidosätta de formatmallar som tillhandahålls av webbplatsens CSS-filer. Tänk på detta när du skapar en webbplats och se till att all kritisk information och funktionalitet levereras separat från CSS-filerna. När förmågan att skapa och leverera innehåll med hjälp av CSS ökar hindren för tillgång för personer med funktionsnedsättningar. Var försiktig så att innovativ design inte efterlämnar några av dina besökare.

Erbjuda alternativ till ljud- och videoinnehåll

Dagens webb använder kraftigt rika medier som podcast och videor. När du använder den här typen av innehåll, ge textalternativ för besökare med syn- och hörselskador. Detta innebär att skriftliga avskrifter bör göras tillgängliga för både video- och ljudinnehåll, och bildtexter bör vara tillgängliga för alla videor.

Använd beskrivande länktext

Besökare som använder en skärmläsare beror på texten på en länk för att avgöra vart länken leder. Som ett resultat är länkar som “Läs mer” eller länkar på bilder som inte innehåller alt-text inte tillgängliga för dessa besökare. Textlänkar bör använda kort beskrivande text, till exempel “läs om oss” hellre än “Läs mer”. Den här länken är både lätt att förstå och kommer att vara lätt för besökare som använder taligenkänningsprogramvara att komma ihåg och upprepa.

Var försiktig när du använder dynamiskt innehåll

Praktiskt taget alla webbplatser idag använder JavaScript och annan teknik för att lägga till interaktivitet och funktionalitet. Dynamiskt innehåll kan emellertid orsaka problem för skärmläsare, bara tangentbordanvändare kan hamna fångade i sidoverlay och andra problem kan dyka upp om tillgänglighet inte hålls i åtanke under utvecklingsprocessen.

Lär dig mer om och använda ARIA-roller

Rekommendationen Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA) är W3C-specifikationen utformad för att hjälpa webbplatsutvecklare att göra dynamiskt innehåll mer tillgängligt. Hela ARIA-specifikationen förtjänar seriös forskning från utvecklare, men alla som skriver HTML bör ta sig tid att lära sig om det nya rollattributet och aria-label-attributet som kan tilldelas valfritt HTML-element. Dessa attribut är viktiga för att hjälpa besökare med vissa funktionsnedsättningar att navigera dynamiska webbplatser.

Bevara funktionaliteten för besökare som bara använder ett tangentbord

Personer med mobilitetsutmaningar kan ofta inte manipulera en mus med den precision som krävs för att använda den effektivt. Som ett resultat får de åtkomst till webben med ett tangentbord, ett speciellt tangentbordoverlay eller andra enheter som är utformade för att underlätta åtkomsten till webben. Vissa webbinnehåll, t.ex. komplexa menyer, bildspel, popup-fönster och objekt som kräver en musövergång förblir otillgängliga för dessa besökare. För att undvika detta scenario måste webbutvecklare överväga endast besökare på tangentbordet när de utformar de interaktioner som krävs för att använda webbplatsen.

Kontrollera för tillgänglighet

Det finns olika verktyg och resurser du kan använda för att granska din webbplats för tillgänglighet. En bra plats att börja är listan över enkla checkar som tillhandahålls av W3C. Om du går igenom den här listan kommer du att få de vanligaste problemen, till exempel bilder utan alt-text, rubriker som saknas eller är felaktiga, vanliga färgkontrastfrågor och mer.

När du har arbetat igenom enkla kontroller bör du överväga att använda några av de många gratis och betalda verktygen som finns tillgängliga för att granska din webbplats för tillgänglighetsproblem. W3C har samlat en användbar lista över verktygstestverktyg. För mer information om kontroll av tillgänglighet kan du läsa resursutvärderingssidan där du hittar många ytterligare resurser för att hjälpa dig att granska och testa för tillgänglighet.

Ytterligare resurser

Om du vill lära dig mer om webbtillgänglighet finns det ett antal platser som du hittar ytterligare utbildning, handledning, verktyg och andra resurser. Vi rekommenderar följande organisationer när du arbetar för att säkerställa tillgänglighet för alla besökare på din webbplats.

W3C Web Accessibility Initiative är en av de organisationer som driver utvecklingen av standarder och riktlinjer för tillgänglighet. För att lära dig mer om WAI kan du visa WAI-hemsidan, komplettera gratis tillgängliga designstudier och se ett exempel på de ändringar som krävs för att förbättra en otillgänglig webbplats och ta upp den till riktlinjerna för tillgänglighet.

Google erbjuder också en gratis Intro to Web Accessibility-kurs som lär dig grunderna i att bygga tillgängliga webbplatser och visa hur du använder tillgänglighetsverktyg i Chrome webbläsare för att testa din webbplats för tillgänglighet.

University of Washington har satt upp en lista med 30 tips om webbtillgänglighet i PDF-format som du kan skriva ut och hänvisa till vid behov. Den här listan täcker alla grundläggande riktlinjer för att skapa tillgängliga webbplatser och är ett bra sätt att snabbt uppdatera ditt minne på alla grundläggande hyresgäster för tillgänglig webbdesign..

WebAIM är en annan organisation som syftar till att göra webben mer tillgänglig och de erbjuder ett antal användbara resurser för att lära sig om olika funktionsnedsättningar, inklusive följande verktyg och simuleringar:

  • Avsnitt 508-checklista: Denna användbara checklista hjälper till att se till att din design överensstämmer med avsnitt 508-kraven.
  • WCAG 2.0-checklista: Om ditt mål är att följa riktlinjerna för webbinnehållsmöjligheter (WCAG) 2.0, kommer denna checklista att hjälpa dig verifiera att din design uppfyller standarden.
  • Färgkontrastkontroll: Ange helt enkelt teckensnittsfärgen och bakgrundsfärgen för att avgöra om kontrasten mellan de två uppfyller WCAG-standarderna.
  • Screen Reader Simulation: Få en känsla för hur besökare som använder skärmläsare upplever webben med denna simulering.
  • Simulering med låg syn: Denna simulering låter dig visa en webbplats på ett sätt som efterliknar effekten av olika synskador såsom glaukom, grå starr och makuladegeneration..
  • Dyslexiasimulering: Den här enkla övningen ger dig en känsla av hur det är att försöka läsa med dyslexi så att du får en större uppskattning av de utmaningar som besökarna möter när de navigerar på webben.
  • Distraherbarhetssimulering: Denna simulering ger dig en känsla av effekten av att lida av distraherbarhet och hjälper dig att uppskatta värdet på webbplatser som är utformade för att minska distraktionen.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me