Hur man förbättrar tillgängligheten på din WordPress-webbplats

Har du någonsin föreställt dig att besöka en webbplats och upptäcka att du helt enkelt inte kunde läsa texten, använda menyerna eller förstå någonting alls? Det är svårt att tro, men detta är verkligheten för många personer med funktionsnedsättningar varje enda dag.

När folk bygger webbplatser är tillgänglighet något som ofta glöms bort. Men det borde det verkligen inte vara, eftersom det kan skapa en barriär mellan ditt innehåll och många av dina besökare. Enligt vår erfarenhet kan en webbplats som inte är tillgänglig kännas väldigt ovälkomnande och till och med exkluderande.

Att se till att din webbplats är tillgänglig handlar inte bara om att följa reglerna, det handlar också om att se till att alla har en bra upplevelse på din webbplats. Det handlar om att vara inkluderande och erbjuda en exceptionell användarupplevelse för alla dina besökare, oavsett deras behov eller förmågor.

Så, om du är redo att göra din webbplats välkomnande för alla, visar vi dig hur du förbättrar tillgängligheten på din WordPress-webbplats steg för steg.

Varför är tillgänglighet viktigt för min WordPress-webbplats?

Inom webbdesign hänvisar tillgänglighet till tekniker som används för att göra en webbplats enklare att använda för personer med funktionsnedsättningar. Vissa besökare använder hjälpmedelstekniker för att navigera på webben, som skärmläsare för personer med synnedsättning och tangentbordsnavigering för personer som inte kan använda en mus.

Det finns några vanliga bästa metoder som rekommenderas av experter för att göra webbplatser mer tillgängliga. De hjälper till att göra webbplatser mer inkluderande och användarvänliga för alla, oavsett förmåga.

Genom att prioritera tillgänglighet kommer fler människor att kunna navigera på din WordPress-webbplats och utforska ditt innehåll. Om du driver en onlinebutik, kommer du också att öka dina chanser att omvandla användare till kunder.

Tillgänglighet är också viktigt för sökmotoroptimering (SEO). Google värdesätter webbplatser med god användarvänlighet. Förutom att göra din webbplats mer responsiv för mobila enheter kan du också prioritera inkludering i din webbdesign för att förbättra rankingen.

Dessutom, om du äger en företagswebbplats och din webbplats frontend är otillgänglig, kan du drabbas av juridiska konsekvenser.

Americans with Disabilities Act (ADA) anger att konsumenter kan lämna in ett klagomål om en webbplats inte följer tillgänglighetsriktlinjerna. Dessutom kan ditt rykte förstöras, vilket kan leda till ekonomiska förluster.

Hur gör WordPress min webbplats mer tillgänglig?

WordPress har flera inbyggda funktioner för att hjälpa användare att göra sina WordPress-webbplatser tillgängliga. Till exempel kan du som standard lägga till alternativtext (alt-text) och titelattribut till bilder så att skärmläsare kan läsa upp dem för användare med synnedsättning.

WordPress har också gjort det obligatoriskt för all ny och uppdaterad kod i WordPress att följa dess riktlinjer för tillgänglighet. Detta är för att säkerställa att WordPress-utvecklare följer bästa praxis för tillgänglighet när de skapar teman och plugins.

Förutom det inkluderar WordPress funktioner som gör det enkelt för användare med funktionsnedsättningar att bygga sina egna webbplatser, som åtkomstläget för att lägga till widgets.

För mer information rekommenderar vi att du följer taggen Tillgänglighet på sidan Make WordPress Core för mer information.

Med allt detta i åtanke är WordPress inte helt tillgängligt direkt ur lådan. Som webbplatsägare är det viktigt att vidta extra åtgärder för att hjälpa din webbplats att uppfylla tillgänglighetsstandarder.

Vi har delat upp den här guiden i några enkla tips för att förbättra din WordPress-webbplats tillgänglighet. Du kan använda dessa snabblänkar för att navigera till ett specifikt avsnitt:

1. Lär känna riktlinjerna för webbinnehålls tillgänglighet (WCAG)
2. Använd ett tillgänglighetsanpassat WordPress-tema
3. Installera ett WordPress-plugin för tillgänglighet
4. Kontrollera din webbplats färgkontrast
5. Lägg till alternativtext och titelattribut till bilder
6. Lägg till etiketter för alla formulärfält
7. Använd korrekta rubrik taggar i ditt innehåll
8. Använd beskrivande ankaretext
9. Lägg till bildtexter eller transkriptioner till video- och ljudinnehåll
10. Gör användbarhets- och tillgänglighetstester
11. Experthandledningar om WordPress-tillgänglighet

1. Bekanta dig med Web Content Accessibility Guidelines (WCAG)

Först och främst rekommenderar vi att du läser Web Content Accessibility Guidelines (WCAG). Dessa är standarderna som fastställts av W3C Web Accessibility Initiative (WAI) för användare att göra sina webbplatser mer tillgängliga.

Du kan börja med att titta på WCAG 2.1 och WCAG 2.2-uppdateringarna. Om båda dokumenten verkar för långa att läsa, bokmärk gärna denna snabbguide istället.

2. Använd ett WordPress-tema som är redo för tillgänglighet

Tillgänglighetsklara teman har uppfyllt minimitillgänglighetsstandarderna som WordPress temagranskningsteam har satt.

Att använda ett tillgängligt WordPress-tema innebär inte att din webbplats automatiskt uppfyller alla tillgänglighetskrav, eftersom du fortfarande måste göra vissa justeringar själv. Det kan dock ge dig en bra start för att göra din webbplats mer tillgänglig.

Minst ett tillgänglighetsklart tema kommer att ha:

• Menyer som kan navigeras enbart med tangentbordet.
• Bra färgkontrast som gör innehållet läsbart för användare med synnedsättning.
• Semantiskt korrekt HTML, vilket hjälper hjälpmedelstekniker att förstå innehållet och strukturen på en webbsida.

Om du vill ta saker ett steg längre, kanske du också vill kontrollera om temat har ARIA-attribut. Dessa attribut är som extra information som kompletterar ditt temas HTML för att göra en webbplats ännu enklare att navigera för hjälpmedelsteknik.

Det enklaste sättet att leta efter ett tillgänglighetsanpassat tema är att gå till Utseende » Teman på din WordPress-instrumentpanel. Klicka sedan på ‘Lägg till nytt tema’.

Välj härifrån ‘Funktionsfilter’ och välj ‘Tillgänglighetsklar’.

Lägg gärna till fler filter för att hitta det tema som matchar dina exakta behov.

Skrolla nu ner och klicka på 'Tillämpa filter'.

Du kommer då att se några tillgänglighetsanpassade teman på skärmen.

För fler temarekommendationer, kolla in våra expertval av de bästa WordPress-teman.

3. Installera ett WordPress-plugin för tillgänglighet

Ett WordPress-plugin för tillgänglighet lägger till användbara funktioner för besökare med funktionsnedsättningar för att navigera på din webbplats.

Ett WordPress-plugin för tillgänglighet som vi rekommenderar är WP Accessibility. Några av de saker som detta plugin kan göra inkluderar:

• Lägga till en tillgänglighetsverktygsfält
• Upptäcka om ditt tema är tillgänglighetsklart
• Spåra hur tillgänglighetsfunktionerna på din webbplats används så att du kan utvärdera dem

Först måste du installera och aktivera pluginet på WordPress.

Vid aktivering måste du gå till Inställningar » WP Accessibility för att konfigurera plugin-programmet.

Låt oss titta på varje avsnitt på inställningssidan.

Lägg till hopplänkar

I den första sektionen av plugininställningarna kan du använda hopplänkar på din webbplats, och den här inställningen är aktiverad som standard. En hopplänk gör det möjligt för användare att hoppa direkt till innehållssektionen i ett inlägg eller en sida.

Detta är en extremt användbar funktion för personer som använder skärmläsare. Utan en "skip link" måste de lyssna på allt som visas på din webbplats, inklusive dina navigeringsmenyer, innan de når innehållsdelen.

Om ditt tema redan använder hopplänkar, kommer du att se en bekräftande avisering.

Tillgänglighetsverktygsfält

WP Accessibility-pluginet levereras med en tillgänglighetsverktygsfält.

När du aktiverar det lägger pluginet till ett verktygsfält på din webbplats där användare kan ändra teckenstorlek eller se din webbplats i högkontrastfärg.

Detta låter dina användare välja de alternativ de behöver för att göra sidan lättare att läsa.

För att aktivera verktygsfältet, markera helt enkelt kryssrutorna 'Teckenstorlek' och 'Kontrast'.

Det finns också inställningar där du kan styra verktygsfältets teckenstorlek och placering.

Om du gör ändringar i dessa inställningar, se till att du klickar på knappen 'Uppdatera verktygsfältinställningar' för att spara dina inställningar.

Så här ser verktygsfältet ut på vår testwebbplats.

Tillgänglighetskorrigeringar

WP Accessibility tillhandahåller också flera tillgänglighetsfixar som kan lösa potentiella problem på din webbplats. Du kan gå igenom varje alternativ och se om du behöver det.

Vissa rekommenderade inställningar kommer att vara markerade som standard. Dessa alternativ förhindrar att länkar öppnas i nya fönster, visar ett fel när du skickar in en tom sökning och tar bort HTML-attributet tabindex där det inte behövs för att förenkla tangentbordsnavigering.

Om du använder ett tillgänglighetsvänligt tema som redan har aktiverat några av dessa funktioner, kommer du att se ett meddelande som bekräftar detta högst upp i sektionen.

Glöm inte att klicka på knappen 'Uppdatera diverse inställningar' för att spara dina ändringar.

Tillgänglighetsfunktioner

Pluginet erbjuder också några alternativ för att göra ditt innehåll mer tillgängligt.

Den första gruppen inställningar gör bilder lättare att hantera för dem som använder skärmläsare.

Det finns också alternativ för att visa sammanfattningar högst upp på dina inlägg och sidor. Detta gör det möjligt för personer som använder skärmläsare att höra en sammanfattning av innehållet innan de bestämmer sig för att lyssna på hela artikeln.

Om du ändrar något av dessa alternativ, kom ihåg att klicka på knappen ‘Uppdatera tillgänglighetsfunktioner’.

Testning & Administratörsupplevelse

Därefter hittar du några inställningar som låter dig förbättra tillgängligheten för ditt WordPress adminområde och hjälper till med testning.

Det här avsnittet är mer tekniskt, så se till att du konsulterar pluginets dokumentation innan du markerar kryssrutorna.

Se till att du klickar på knappen 'Uppdatera tillgänglighetsverktyg' för att spara dina ändringar.

Ta bort titelattribut

Det här avsnittet låter dig ta bort titelattributet från taggmoln.

Titelattributet anses vara värdelöst av vissa tillgänglighetsexperter. De flesta skärmläsare ignorerar vanligtvis titelattributet och läser istället ankarlänken.

Denna inställning är aktiverad som standard, men om du ändrar den, se till att du klickar på knappen 'Uppdatera inställningar för titelattribut'.

4. Kontrollera din webbplats färgkontrast

Färgkontrast innebär skillnaden mellan textfärgen och bakgrundsfärgen. Det är en mycket viktig del av webbplatsens tillgänglighet eftersom det kan påverka hur läsbar ditt webbplatsinnehåll är för personer med nedsatt syn och färgblindhet.

För att uppfylla standarder för webbtillgänglighet bör vanlig text ha en hög kontrast på minst 4,5 till 1. Det innebär att texten måste vara 4,5 gånger ljusare än bakgrunden.

För större text är kravet lite lägre, 3 till 1. Det innebär att en något lägre kontrast är acceptabel. Samma regel gäller för grafik och användargränssnittselement, som kantlinjer för formulärfält.

WP Accessibility-pluginet har en inbyggd färgkontroll som du kan använda.

I plugininställningarna, scrolla helt enkelt ner till sektionen Färgkontrasttestare och välj en förgrundsfärg (färgen du kommer att använda för din text) och dess bakgrundsfärg.

Klicka sedan på 'Kontrollera färgkontrast'.

Pluginet kommer sedan att tala om för dig om färgerna klarar eller inte klarar kontrasttestet.

Här är hur resultatet ser ut:

Alternativt kan du använda den kostnadsfria WebAIM Contrast Checker. Precis som med det tidigare verktyget behöver du bara välja en förgrundsfärg och en bakgrundsfärg.

Detta verktyg testar inte bara din färgkontrast utan visar dig också hur färgerna kan se ut som normal och stor text, samt grafiska objekt och användargränssnittskomponenter.

För mer information kan du ta en titt på vår guide om hur du väljer ett perfekt färgschema för din WordPress-webbplats.

5. Lägg till alternativtext till bilder

Förutom att vara användbar för sökmotorer, är alt-text hjälpsam för skärmläsare för att beskriva bilder för personer med synnedsättning.

Tidigare nämnde vi att WordPress har en inbyggd funktion för att lägga till alt-text. Processen är ganska enkel, och du kan läsa allt om hur du ställer in den i följande guider:

• Nybörjarguide till bild-SEO – Optimera bilder för sökmotorer
• Bildens Alt-text kontra bildens titel i WordPress – Vad är skillnaden?

6. Lägg till etiketter till alla formulärfält

Om du har formulär på din webbplats, vill du se till att du använder lämpliga etiketter för varje formulärelement. Detta inkluderar formulärfält, knappar, menyer och så vidare.

WCAG rekommenderar att man lägger till etiketter till alla formulärelement för att göra det lättare för hjälpmedel att identifiera och förmedla information om vart och ett av dem till användarna.

Dessutom är det god webbdesignpraxis att lägga till tydliga och beskrivande etiketter. Genom att hjälpa användare att förstå vad varje formulärfält är till för, är det mindre troligt att användarfel uppstår, och fler personer kommer att kunna skicka in sina formulär.

Om du är osäker på hur du skapar bra formulär, rekommenderar vi att du tittar på WPForms. Det är den bästa WordPress-formulärbyggaren som gör det superenkelt att anpassa formulär efter dina exakta behov, inklusive att förbättra dem för tillgänglighet.

Du kan läsa mer om WPForms i vår WPForms-recension. Kolla även in dessa guider om hur du skapar formulär i WordPress:

• Hur man skapar ett kontaktformulär i WordPress (steg för steg)
• Hur man skapar ett bokningsformulär i WordPress
• Hur man skapar ett anpassat registreringsformulär för användare i WordPress

7. Använd korrekta rubrik-taggar i ditt innehåll

Rubrik-taggar är HTML-taggar som kan markera titlar eller undertitlar på en webbsida. På så sätt blir ditt innehåll mycket mer organiserat och lättare att följa.

Dessa taggar hjälper också verktyg som skärmläsare att generera en navigerbar disposition för användare med synnedsättning. Detta gör att de kan hoppa mellan sektioner och förstå ditt innehålls övergripande struktur.

Om du inte är säker på hur du utnyttjar rubrik-taggar, kan du läsa vår guide om hur man korrekt använder rubrik-taggar i WordPress.

8. Använd beskrivande ankaretext

Ankare eller länktext är i princip de klickbara orden eller fraserna i en länk. Du kan vanligtvis se vilken text som är länkad eftersom den kommer att ha en annan färg.

Ofta använder bloggare länktexten 'klicka här' eller 'läs mer' för att hänvisa besökare till en sida.

Detta är inte god praxis för tillgänglighet eftersom det inte ger någon information om vart länken leder. Detta gör det svårt för personer som använder hjälpmedelsteknik att förstå syftet med länken.

Därför är det bäst att använda beskrivande ankaretext istället. Det innebär att använda ord som beskriver vad innehållet handlar om när du klickar på länken.

Låt oss till exempel säga att du vill lägga till en länk till en artikel om den bästa WordPress-hosting i den här meningen: 'Följ den här guiden för att lära dig om de bästa WordPress-hosting-tjänsterna på marknaden.'

Istället för att lägga till länken till 'Följ den här guiden' eller någon annanstans i den meningen, bör du infoga den i 'bästa WordPress-värdtjänster'. På så sätt får användaren en överblick över vad de kommer att hitta i det länkade innehållet.

För mer information om länkar och ankartext, se vår nybörjarguide om länkar i WordPress.

9. Lägg till bildtexter eller transkriptioner till video- och ljudinnehåll

En av de största svårigheterna för användare med hörselnedsättning är oförmågan att förstå talat innehåll i videor och ljud. Det är därför många videokreatörer och poddare lägger till undertexter eller transkriptioner.

På WPBeginner avråder vi starkt från att ladda upp videor till din egen webbplats eftersom de kan sakta ner din webbplats. Istället är det bäst att använda tjänster som YouTube eller Vimeo, som båda har inbyggda verktyg för att lägga till undertexter.

När det gäller ljudinnehåll kan du överväga att använda en transkriberingstjänst för att enkelt konvertera tal till text. På så sätt behöver du inte manuellt skapa en skriftlig version av ditt ljudinnehåll.

Kolla in vår lista över de bästa transkriptionstjänsterna för mer information.

10. Utför användbarhets- och tillgänglighetstester

Om du har implementerat alla tips från den här guiden är nästa steg att göra användbarhets- och tillgänglighetstester på din WordPress-webbplats.

Denna testning kan hjälpa dig att identifiera eventuella kvarvarande problem och göra din webbplats användarvänlig och tillgänglig för alla.

WebAIM har ett Web Accessibility Evaluation Tool (WAVE) som du kan använda gratis.

Skriv bara in din webbplats domännamn, så identifierar verktyget eventuella tillgänglighetsrelaterade problem åt dig.

Du kan också använda en tillgänglighetsskanner. Vi rekommenderar att du tittar på Accessibility Checker från Equalize Digital. Den kommer också med en gratis pluginversion för att skanna obegränsat antal inlägg och sidor på din webbplats.

Efter att ha installerat pluginet kan du helt enkelt gå till blockredigeraren för din sida eller inlägg. Om du skrollar ner till avsnittet med metadata, hittar du en tillgänglighetskontroll som identifierar dina tillgänglighetsproblem.

Ett annat alternativ är att utföra en UX-audit, vilket i princip innebär att kontrollera din webbplats för att se om den har en bra användarupplevelse. Gå bara till vår UX-auditguide för mer information.

Sist men inte minst uppmuntrar vi dig att be om din användarfeedback. Medan testning kan ge dig resultat, kan feedback från faktiska besökare som använder din webbplats tillgänglighetsfunktioner ge mycket mer exakta insikter.

UserFeedback är det bästa pluginet för den här uppgiften. Det låter dig skapa undersökningar för att samla in dina användares åsikter och tankar. Det finns också mallar för feedback på webbdesign, så du behöver inte skapa undersökningen från grunden.

För mer information, se vår guide om hur man får feedback på webbplatsdesign i WordPress.

Experthandledningar om WordPress-tillgänglighet

Nu när du vet hur du förbättrar tillgängligheten på din webbplats, kanske du vill se några andra guider relaterade till WordPress-tillgänglighetsproblem:

• Hur man lägger till WordPress-widgets i tillgänglighetsläge
• Hur du väljer ett perfekt färgschema för din WordPress-webbplats
• Hur man lägger till en teckenstorleksändrare i WordPress för tillgänglighet
• Hur man enkelt lägger till titelattribut till bilder i WordPress
• Hur man markerar text i WordPress (nybörjarguide)
• Bildens Alt-text kontra bildens titel i WordPress – Vad är skillnaden?

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.