Så här förbättrar du tillgängligheten på din site i WordPress

Tänk dig att besöka en website bara för att upptäcka att du inte kan läsa texten, navigera i menyerna eller förstå innehållet. Tyvärr är detta en daglig verklighet för många enskilda inaktiverade.

När du bygger en website blir tillgängligheten ofta bortglömd, vilket skapar en vägspärr mellan ditt content och många av dina besökare. Enligt vår erfarenhet kan detta kännas ovälkomnande och exkluderande.

Att se till att din website är tillgänglig är inte ej enbart en fråga om efterlevnad av lagar och regler, utan säkerställer också en exceptionell användarupplevelse (UX) för alla besökare, oavsett deras behov eller förmåga.

I den här artikeln visar vi dig hur du kan förbättra tillgängligheten på din website i WordPress.

Varför är tillgänglighet viktigt för min site i WordPress?

Inom webbdesign avser tillgänglighet tekniker som används för att göra en website användarvänlig för personer med inaktiverade funktioner. Vissa visitor använder tekniska hjälpmedel för att navigera på webben, gillar screen reader för personer med synnedsättning och tangentbordsnavigation 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 websites mer tillgängliga. De bidrar till att göra webbplatserna 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 website och utforska ditt content. Om du run en online store, då kommer du också att öka dina chanser att konvertera användare till customers.

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

Om du dessutom är ägare till en webbplats för företag och front-enden på din site är otillgänglig kan det få rättsliga konsekvenser för dig.

I Americans with Disabilities Act (ADA) anges att konsumenter kan lämna in ett klagomål om en webbplats inte uppfyller riktlinjerna för tillgänglighet. What more more, your reputation could get ruined, which could result in financial losses.

Hur kan WordPress göra min website mer tillgänglig?

WordPress har flera inbyggda funktioner som hjälper användare att göra sina WordPress websites tillgängliga. Som standard kan du till exempel add to alternativ text (alt text) och titelattribut till images så att screen reader kan läsa upp dem för användare med synnedsättning.

WordPress har också gjort det obligatoriskt för all new och updating kod i WordPress att följa dess kodningsstandarder för tillgänglighet. Detta för att säkerställa att utvecklare av WordPress följer bästa praxis för tillgänglighet när de skapar teman och tillägg.

Utöver detta innehåller WordPress funktioner som gör det enkelt för inaktiverade användare att bygga sina egna webbplatser, som gillar tillgänglighetsläget för att lägga till widgetar.

För mer information rekommenderar vi att du håller dig uppdaterad med taggen Accessibility på Make WordPress Core page för mer information.

Med allt detta i åtanke är WordPress inte helt tillgängligt från första början. Som ägare av en website är det viktigt att vidta extra åtgärder för att hjälpa din site att uppfylla tillgänglighetsstandarder.

Vi har delat upp den här guiden i några enkla tips för att förbättra tillgängligheten på din WordPress website. Du kan använda dessa länkar för att navigera till en viss section:

1. Bekanta dig med riktlinjerna för tillgänglighet till web content (WCAG)

Först och främst rekommenderar vi att du läser riktlinjerna för tillgänglighet till webbinnehåll (WCAG). Det är de standarder som W3C Web Accessibility Initiative (WAI) har tagit fram för att användare ska kunna göra sina websites mer tillgängliga.

You can check out the WCAG 2.1 and WCAG 2.2 updates for starters. Om båda dokumenten verkar för långa att läsa, är du välkommen att bokmärka den här snabbreferensen istället.

2. Använd ett tillgänglighetsanpassat WordPress Theme

Tillgänglighetsklara themes har uppfyllt de minimistandarder för tillgänglighet som WordPress Theme Review Team har fastställt.

Att använda ett tillgängligt WordPress theme innebär inte att din website automatiskt kommer att uppfylla alla tillgänglighetskrav, eftersom you fortfarande måste göra vissa tweaks på egen hand. Det kan dock ge dig en bra start på arbetet med att göra din website mer tillgänglig.

Ett tema som är redo för tillgänglighet har kl:

• Menyer som kan navigeras enbart med hjälp av tangentbordet.
• Bra färgkontrast som gör att innehållet blir läsbart för användare med nedsatt syn.
• Semantiskt korrekt HTML, som hjälper hjälpmedel att förstå innehållet och strukturen på en page.

Om du vill ta saker ett steg längre kan du också kontrollera om temat har ARIA-attribut i sig. Dessa attribut gillar extra information som kompletterar ditt temas HTML för att göra en website ännu enklare att navigera för hjälpmedel.

Det enklaste sättet att leta efter ett tillgänglighetsklart tema är genom att gå till Appearance ” Themes på din WordPress dashboard. Sedan klickar du på ”Add New Theme”.

Härifrån väljer du ”Feature Filter” och väljer ”Accessibility Ready”.

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

Nu rullar du ner och klickar på ”Tillämpa filter”.

You will then see some accessibility-ready themes on the screen.

Om du vill ha fler rekommendationer om teman kan du kontrollera våra expertval av de bästa WordPress-temana.

3. Installera ett tillägg för tillgänglighet i WordPress

Ett plugin för tillgänglighet i WordPress addar till funktioner som gör det lättare för inaktiverade besökare att navigera på din website.

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

• Lägga till en toolbar för tillgänglighet
• Detektera om your theme är tillgänglighetsanpassat
• Tracking av hur de utvalda funktionerna på din website används så att du kan utvärdera dem

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

Efter aktivering måste du gå till Settings ” WP Accessibility för att konfigurera pluginet.

Låt oss ta en titt på varje section på settings page.

Add Skip Links

I det första avsnittet av plugin-inställningarna kan du använda hoppa över länkar på din website, och den här inställningen är aktiverad som standard. En skip link allow users to jump directly to the content section of a post or page.

Detta är en mycket användbar funktion för personer som använder screen readers. Utan en skip link måste de lyssna på allt som visas på din website, inklusive dina navigation menus, innan de kommer till delen med content.

Om ditt theme redan använder skip links kommer du att se en notification som bekräftar detta.

Toolbar för tillgänglighet

WP Accessibility plugin kommer med en toolbar för tillgänglighet.

När du aktiverar det kommer pluginet att lägga till en toolbar på din webbplats där användare kan resize font eller visa din site i högkontrastfärgläge.

På så sätt kan dina användare selecta de alternativ de behöver för att göra sidan mer lättläst.

För att aktivera toolbaren behöver du bara kontrollera checkboxarna ”Font size” och ”Contrast”.

Det finns också Settings där du kan control toolbarens fontstorlek och placering.

Om du gör ändringar i dessa inställningar, se till att du klickar på knappen ”Update Toolbar Settings” för att lagra dina inställningar.

Så här gillar vi toolbaren på vår test website.

Fixar för tillgänglighet

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

Vissa rekommenderade inställningar kommer att kontrolleras som standard. Dessa alternativ förhindrar att links öppnas i new windows, visar ett error när you submit en tom search och remove tabindex HTML-attributet där det ej behövs för att förenkla navigation på tangentbordet.

Om du använder ett tillgänglighetsanpassat tema som redan har aktiverat några av dessa funktioner kommer du att se ett message som bekräftar detta högst upp i section.

Glöm inte att klicka på knappen ”Update Miscellaneous Settings” för att lagra dina ändringar.

Funktioner för tillgänglighet

Tillägget ger också några alternativ som hjälper till att göra your content mer tillgängligt.

Den första gruppen av inställningar gör att images blir lättare att hantera för dem som använder screen readers.

Det finns också alternativ för att visa sammanfattningar högst upp på dina posts och pages. Detta allow dem som använder screen reader att höra en summary av innehållet innan de bestämmer sig för att lyssna på hela artikeln.

Om du ändrar något av dessa alternativ, kom vänligen ihåg att klicka på knappen ”Update Accessibility Features”.

Erfarenhet av testning och administration

Därefter hittar du några Settings som gör att du kan förbättra tillgängligheten i din WordPress admin area och hjälpa till med testning.

Detta avsnitt är mer tekniskt, så se till att du läser pluginets dokumentation innan du kontrollerar boxarna.

Se till att du klickar på knappen ”Update Accessibility Tools” för att save your changes.

Remove Attribut för rubriker

I denna section kan du remove title-attributet från etikettmoln.

Attributet Rubrik anses av vissa tillgänglighetsexperter vara värdelöst. De flesta screen readers ignorerar vanligtvis title-attributet och läser istället ankartexten.

Denna inställning är aktiverad som standard, men om du ändrar den, se till att du klickar på knappen ”Update Rubrik Attributes Settings”.

4. Kontrollera färgkontrasten på din website

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äsbart innehållet på din webbplats är för personer med nedsatt syn och färgblindhet.

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

För större text är kravet lite lägre, kl. 3 till 1. Det innebär att en något lägre kontrast kan godkännas. Samma regel gäller för grafik och element i användargränssnittet, t.ex. gränser för inmatning i formulär.

Pluginet WP Accessibility har en built-in färgkontrastkontroll som du kan använda.

I plugin-inställningarna rullar du helt enkelt ner till Color Contrast Tester Section och väljer en förgrundsfärg (den färg du kommer att använda för din text) och dess bakgrundsfärg.

Klicka sedan på ”Kontrollera färgkontrast”.

Tillägget talar sedan om för you om färgerna klarar eller ej klarar kontrasttestet.

Här är hur resultatet gillar att se ut:

Alternativt kan du använda den gratis WebAIM Contrast Checker. Precis som med det föregående tools behöver du bara välja en förgrundsfärg och en bakgrundsfärg.

Detta tool testar inte ej bara din färgkontrast utan visar dig även hur färgerna kan gillas som normal och stor text, samt grafiska object och komponenter i användargränssnittet.

För mer details, you may like to see our guide on how to pick the perfect color scheme for your WordPress website.

5. Add Alternative Text to Images

Förutom att vara användbar för search engines är alt-text användbar för screen readers för att beskriva images för enskilda personer med synnedsättning.

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

• Beginner’s Guide to Image SEO – Optimera images för search engines
• Image Alt Text vs Image Rubrik i WordPress – Vad är skillnaden?

6. Add Labels to All Form Fields (etiketter till alla formulärfält)

Om du har formulär på din website är det bra att se till att du använder rätt 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 vidarebefordra information om varje element till användarna.

Dessutom är det bra webbdesign att lägga till tydliga och beskrivande etiketter. Genom att hjälpa användarna att förstå vad varje formulärfält är till för, är det mindre troligt att error uppstod och fler kommer att kunna submita sina formulär.

Om du ej är säker på hur man skapar bra formulär, rekommenderar vi att du kontrollerar WPForms. Det är den bästa WordPress form builder som gör det superenkelt att customize formulär till dina exakta behov, inklusive att förbättra dem för tillgänglighet.

Du kan läsa mer om WPForms i vår WPForms review. Kontrollera också dessa guider om hur du skapar formulär i WordPress:

• Så här skapar du ett Contact Form i WordPress (Step-by-Step)
• Så här skapar du ett bokningsformulär i WordPress
• Så här skapar du ett customize registreringsformulär för användare i WordPress

7. Använd rätt taggar för rubriker i ditt content

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

Dessa tags hjälper också tools som screen readers att generera en navigerbar översikt för användare med synnedsättning. This will allow them to jump between sections and understand your content’s overall structure.

Om du ej är säker på hur du ska använda dig av taggar för heading kan du läsa vår guide om hur du använder taggar för heading på rätt sätt i WordPress.

8. Använd beskrivande ankartext

Ankar- eller länktext är i princip de klickbara orden eller fraserna i en link. Du kan vanligtvis se vilken text som är links eftersom den kommer att vara i en annan färg.

Ofta använder bloggare länktexten ”click here” eller ”read more” för att hänvisa besökare till en page.

Det här är inte en bra metod för tillgänglighet eftersom den inte ger någon information om vart länken går. Det gör det svårt för personer som använder tekniska hjälpmedel att förstå syftet med länken.

Det är därför det är bäst att använda beskrivande ankartext istället. Det innebär att du använder 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 add to en länk till en artikel om det bästa webbhotellet för WordPress i den här meningen: ”Följ this link to learn about the best WordPress hosting services on the market.

Istället för att lägga till länken till ”Följ denna guide” eller någon annanstans i den meningen, bör du infoga den i ”bästa WordPress webbhotell tjänster”. På så sätt får användaren en överblick över vad de kommer att hitta i det linkade innehållet

Mer information om links och ankartext finns i vår guide för nybörjare om links i WordPress.

9. Add to Captions or Transcripts to Video and Audio Content

Ett av de största problemen för användare med inaktiverad hörsel är att de inte kan förstå talat content i videoklipp och ljud. Det är därför många skapare av videoklipp och podcasters add to captions eller kopia, utskrift.

På WPBeginner avråder vi dig starkt från att uppladdare videoklipp till din egen website eftersom de kan göra din site långsammare. Istället är det bäst att använda tjänster som YouTube eller Vimeo, som båda har built-in tools för att lägga till captions.

När det gäller innehåll i ljud kan du överväga att använda en tjänst för kopia, utskrift för att enkelt konvertera tal till text. På så sätt behöver du inte manuellt skapa en skriftlig version av ditt ljud content.

Kolla in vår lista över de bästa tjänsterna för kopia, utskrift för mer information.

10. Utföra tester av användbarhet och tillgänglighet

Om du har implementerat alla tips i den här guiden är det sista steget att göra användbarhets- och tillgänglighetstester på din WordPress website.

Denna testning kan hjälpa dig att identifiera eventuella återstående issues och hjälpa dig att göra din website användarvänlig och tillgänglig för alla.

WebAIM har ett verktyg för utvärdering av webbtillgänglighet (WAVE) som du kan använda gratis.

Skriv bara in din websites domain name, så kommer verktyget att identifiera alla tillgänglighetsrelaterade issues åt you.

You can also use an accessibility scanner. Vi rekommenderar att du kontrollerar Accessibility Checker av Equalize Digital. Det finns också ett gratis plugin för att skanna ett obegränsat antal posts och pages på din website.

När du har installerat pluginet kan du helt enkelt gå till block editor på din page eller post. Om du rullar ner till Meta box section, hittar du en Accessibility Checker som identifierar dina tillgänglighets issues.

Ett annat alternativ är att utföra en UX-revision, vilket i princip innebär att kontrollera din website för att se om den har en bra användarupplevelse. För mer information, heada över till vår guide för UX-revision.

Sist men ej minst uppmuntrar vi you att be om återkoppling från era användare. Även om tester kan ge dig resultat, kan återkoppling från faktiska besökare som använder webbplatsens utvalda funktioner ge dig mycket mer exakta insikter.

UserFeedback är det bästa tillägget för detta jobb. Det låter dig skapa undersökningar för att samla in dina användares åsikter och tankar. Det finns också templates för återkoppling av website-design, så du behöver inte skapa undersökningen from scratch.

För mer information, se vår guide om hur du får återkoppling på designen av en website i WordPress.

Expertguider om tillgänglighet för WordPress

Nu när du vet hur du förbättrar tillgängligheten på din site kanske du gillar att se några andra guider relaterade till WordPress tillgänglighet issues:

• Så här addar du widgetar till WordPress i tillgänglighetsläge
• Så här väljer du ett perfekt färgschema för din site i WordPress
• Så här addar du en Font Resizer i WordPress för tillgänglighet
• Så här lägger du enkelt till attributet Rubrik till images i WordPress
• Hur man markerar text i WordPress (Beginner’s Guide)
• Image Alt Text vs Image Rubrik i WordPress – Vad är skillnaden?

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.