Detta är en ganska lång sida, så ta en kopp kaffe eller ett glas juice, så kör vi.

Webbplatsen ska vara tillgänglig för alla!

Det betyder att alla, oavsett vilken typ av funktionsnedsättning man kan tänkas ha, ska kunna ta till sig information och handla på din webbplats. 

Om man är blind, döv eller färgblind. Om man har dyslexi eller kognitiva nedsättningar. Om man har rörelsehinder. Alla ska ha samma tillgång.

Det här är ju också fantastiskt bra för alla som är äldre, har språksvårigheter eller har tillfälliga funktionsnedsättningar exempelvis efter en operation. Det är helt enkelt bra för alla!

Direktivet säger att en hemsida ska vara: 

Uppfattningsbar
Information och komponenter i användargränssnitt måste presenteras för användare på sätt som de kan uppfatta.
Till exempel ska informationsbärande bilder ha textalternativ som förmedlar samma information.

Hanterbar
Komponenter i användargränssnitt och navigering måste vara hanterbara.
Det ska till exempel gå att navigera på en webbplats enbart med hjälp av ett tangentbord.
 
Begriplig
Information och hantering av användargränssnitt måste vara begriplig.
Till exempel genom inmatningsstöd som hjälper användare att undvika eller rätta till misstag i formulär.
 
Robust
Innehåll måste vara robust nog för att kunna tolkas på ett pålitligt sätt av ett brett spektrum av olika användarprogram, inklusive hjälpmedel.


Så, låt oss titta på vad ni kan göra för att uppfylla tillgänglighetskraven.

Först och främst några självklara saker...

Ge all information på enkel och begriplig svenska (om det är en svensk sida).
Fundera även på om allt på sidorna och i gränssnittet faktiskt behövs.
Var tydlig i information och instruktioner.

Utveckla webbplatsen enligt en standard

Följ webbstandarder som HTML5 och CSS3 när ni utvecklar er webbplats. Då är det större chans att koden kommer fungera även i kommande webbläsare. Det underlättar också för dem som använder webbplatsen med andra verktyg än de vanligaste.

Text, färg och kontrast

Detta är stora delar när det gäller tillgänglighet. Här är vi ute efter tydlighet och kontrast, både vad det gäller text, bild och grafik.

Texter ska vara lätta för alla att läsa.

• Välj teckensnitt som är enkla och tydliga utan onödiga krusiduller. Undvik ”hårtunna” teckensnitt och ”skrivstilstypsnitt”.
• Välj ett typsnitt där siffertecknen är skiljer sig från bokstavstecknen. Siffran ett och bokstaven l kan till exempel se likadana ut i vissa teckensnitt.
• Använd 14 punkters textstorlek eller större i brödtexten. Tänk dock på att tydlighet och storlek kan skilja sig mellan olika teckensnitt.
• Radavstånd bör vara minst 2 punkter större än teckengraden. Dock kan alltför stora radavstånd göra det svårt att hitta till nästa rad.
• Radlängd mellan cirka 6 och 13 cm är behagligt att läsa och underlättar för personer med synnedsättning. Går du upp mycket i grad på texten så behövs förstås längre rader. Det är viktigt att det är proportionerligt.
• Mellanrummen mellan bokstäverna bör vara tydliga så att bokstäverna inte trängs ihop.
• Undvik enbart versaler i hela meningar då det ger en ”staketverkan” som gör det svårt att foga ihop bokstäverna till ord.
• Undvik kursiv stil då personer med synnedsättning upplever detta som svårläst. Använd hellre fet stil om du vill framhäva något i texten.
• Dela upp text i mindre stycken med mellanrubriker eller ingångar i fet stil. 

Färger är bra för att höja användbarhet och upplevelse.

• Tänk på att vissa användare inte kan uppfatta färgskillnader, till exempel på grund av färgblindhet eller för att de använder en monokrom skärm eller skärmläsare.
• Välj mörk textfärg mot ljus bakgrund eller tvärtom. Vissa personer med synnedsättning föredrar att läsa svart text på vit botten medan andra hellre läser vit text mot svart botten. Det viktiga är att färgerna kontrasterar mot varandra.
• Bäst kontrast ger svart, mörkblått eller grönt mot vit bakgrund, samt vitt eller gult mot svart bakgrund.
• Var försiktig med kombinationer av färgerna grön, röd och brun. Personer med färgblindhet har svårt att särskilja dem.
• Två olika kulörer med liknande nyans kan vara väldigt svåra att se skillnad på. Prova att kisa och se om du som fullt seende tycker att det är läsbart.
• Kontrollera gärna hur funktionen "Inverterade färger" i webbläsaren fungerar på din webbplats. Det finns även vertyg på webben för att testa kontrast, t.ex.Contrast Checker
• Låt inte färgskillnader vara det enda sättet att urskilja information. Komplettera med exempelvis text, mönster eller ikoner.
• Hänvisa inte till färger i text. Skriv alltså inte "klicka på den röda knappen".

Bilder ska också vara tillgängliga.

• Bilder ska ha god skärpa och kontrast och inte vara alltför röriga.
• Använd inte bilder som text.
• Undvik att lägga brödtext ovanpå bilder. En större rubrik eller titel kan placeras på ett lugnt, enfärgat parti i bilden eller på en infälld tonplatta.
• Förklarande bildtexter i anslutning till bilden bör sättas med normalstor rak text, undvik liten kursiv stil.
• Vill man ha något mindre bildtext kan man kompensera med att feta stilen.

Rubriker

• Skapa rubriker med h-element.
• Använd rätt rubriknivå. Först H1, sedan H2, H3, osv.
• Skriv tydliga och beskrivande rubriker.

Innehåll som inte är text

Allt innehåll på sidan som inte är text ska ha ett textalternativ med samma syfte. Till exempel för tidsberoende media, som ljud och video. Det finns mycket att tänka på gällande detta. Här hittar du mer information om textalternativ.

Alternativtext för bilder

• Informationsbärande och klickbara bilder ska ha alternativtext (Alt). Beskriv bilden med en kort text, högst 12 ord.
• Dekorativa bilder (ej klickbara) bör inte beskrivas. Ange istället ett tomt text-alternativ, dvs. (alt=””).

Här finns bra tips om hur du skriver textalternativ.

Klickbara ytor – textlänkar, bilder och knappar

• Gör klickbara ytor tillräckligt stora så att även personer med sämre precision och finmotorik träffar rätt. Du kan t.ex. inkludera ett större område runt det som är länkat.
• Har du en ikon eller bild ihop med text (t.ex. i en meny) så gör dem till en sammansatt länk (ett A-element), inte två.
• Lägg inte klickbara saker för nära varandra.
• Länkar i text bör vara understrukna. Text som inte är länkad bör aldrig vara understruken.
• Använd kort tydlig text på knappar, såsom ”Skicka”, ”Lägg i varukorgen” eller ”Sök produkter”.

Utformning av länkar

Tydliga länkar är bra för alla, men är särskilt viktigt för personer som använder vissa hjälpmedel. Skärmläsaranvändare kan till exempel navigera genom att enbart läsa upp länkarna på en sida. Då behöver man utifrån länktexten förstå vart länken går.

• Försök skriva länktexten så det går att förstå vart länken leder. Man ska kunna förutse vad som händer när man klickar på den.
• Ibland är det bättre att placera en del av beskrivningen av länkens syfte i den omgivande texten än att ha allting i själva länktexten.
• Skriv hellre ”Information om företaget” än ”För information om företaget, klicka här”. Alla vet att det går att klicka på länkar.
• Använd gärna en och samma länktext för alla länkar som går till samma sida.
  Och omvänt: Länkar på samma sida som leder till olika sidor bör inte ha samma länktext. T.ex. ”Läs mer”-länkar som upprepas många gånger men leder till olika destinationer.
• Om du vill ange att länken går till en annan webbplats kan du skriva ut organisationens eller webbplatsens namn i slutet av länktexten, till exempel:
  "Handla studsmattor på North Trampolines webbplats".
• När du länkar till dokument som inte är webbsidor, ange dokumentets format: pdf, doc eller liknande. Då blir det tydligare att länken inte går till en webbsida.
• I e-postlänkar bör det tydligt framgå vem som är mottagare av e-postmeddelandet, t.ex: kundtjanst@organisation.se. Du kan även, om det behövs, lägga in syftet i länken: ”Skicka e-post till kundtjanst@organisation.se för att anmäla dig".

Läs mer om riktlinjer för länkar hos webbriktlinjer.se. 

Textfält och andra formulärelement

• Använd så få fält som möjligt i formulär.
• Låt formulärelementen behålla standardutseendet. Undvik helst att ändra färg och form med css.
• Om ni trots allt ändrar utseendet, gör användningstester för att kontrollera att allt fungerar.
• Anpassa storleken/längden på textfält till den information som användaren ska fylla i. Man ska tydligt kunna se vad man har skrivit in.  
• Gör så att textfält där man ska fylla i t.ex. siffror öppnar siffer-tangentbordet.
• Skapa tydliga och klickbara fältetiketter, vanligtvis med elementet "label" kopplat med for-attributet.
• Ange tydligt vilka fält som är obligatoriska.
• Skriv tydliga instruktioner innan formuläret, om sådana behövs.
• Formuläret ska inte vara beroende av title-attribut och placeholder-texter.
• Använd inmatningsstöd. Försök hjälpa användaren att rätta till misstag när ett fel upptäcks, till exempel genom att ge förslag på rätt format i felmeddelandet.

Zoom

• Kontrollera att det går att zooma på mobilen med två fingrar.
• Kontrollera att sidan ser bra ut när den inbyggda zoomfunktionen i webbläsaren används.

Navigera med tangentbordet

På en tillgänglig webbplats ska man kunna navigera enbart med tangentbordet. 
Se till att man kan komma åt all information på sajten och även lägga varor i kundvagnen och genomföra en beställning med tangentbordet.

Kompletterande program och verktyg

Man ska kunna använda skärmläsare, punktskriftsdisplay och OCR-program som komplement till webbläsaren. 
Olika operativsystem har inbyggda skärmläsare som aktiveras i inställningarna (Hjälpmedel). Om du inte vill använda dessa skärmläsare finns separata program.
Utför tester för att säkerställa att dessa verktyg fungerar på din webbplats.

Erbjud möjlighet att hoppa förbi återkommande innehåll

Skapa genvägar för att hoppa över delar av sidan, till exempel menyn, för att komma direkt till innehållet. Här finns flera metoder att använda:

• Skapa rubriker med h-element då skärmläsare låter användare snabbnavigera med hjälp av sidans rubriker.
• Använd strukturelement i HTML5 som main, aside, header, footer och nav för att definiera olika delar av sidan.
• Använd WAI-ARIA landmark roles – till exempel main, search, navigation, banner, contentinfo, osv. Exempelvis skärmläsare kan då navigera mellan sidans olika delar på ett standardiserat sätt.

Läs om HTML5 och motsvarande ARIA-attribut hos https://webbriktlinjer.se.

Genvägar som syns
Du kan också använda synliga genvägar för att tydliggöra möjligheten att t.ex. hoppa direkt till innehållet. Om detta inte passar in i webbplatsens design så kan ni dölja dem med hjälp av css. Gör i så fall så att genvägarna blir synliga och aktiva när man tabbar till dem.

Gör tabeller på rätt sätt 

Tabeller kan vara svåra att tolka. Skärmläsare och lyssnatjänser läser en tabell som löpande text, rad för rad. Var noga med att bygga tabellerna på rätt sätt så att de blir tillgängliga för alla.
Läs om tillgängliga tabeller hos webbriktlinjer.se.

Javascript på rätt sätt

Alla kan eller vill inte använda Javascript. Se därför till att det går att använda webbplatsens viktigaste funktioner även utan Javascript. Implementation på fel sätt kan göra webbplatsen otillgänglig. 
Läs om javascript och tillgänglighet hos webbriktlinjer.se. 

Gör det lätt att komma i kontakt med er

Ibland vill man bara snabbt i kontakt med ett företag eller organisation. Gör det därför lätt för användarna att hitta kontaktinformation.

Webbplatsens kontaktsida bör innehålla:

• Organisationens namn
• Information om organisationen
• Adresser
• Telefonnummer till växel eller kundtjänst
• E-postadress
• Eventuella öppettider
• Eventuella sociala mediekanaler

Skapa en "Om webbplatsen"-sida 

En sida om webbplatsen kan innehålla information om hur webbplatsen fungerar. Vad era besökare kan behöva veta för att sajten ska fungera så bra som möjligt. Struktur, söktjänst, osv. 

Beskriv vilka webbstandarder ni följer och hur ni uppfyller tillgänglighetskraven (samt vilka krav ni i dagsläget inte uppfyller).

Om webbplatsen använder javascript, beskriv vilka konsekvenser det får om användarna har javascript avslagna i sin webbläsare. 

Vilka eventuella externa tjänster är integrerade i webbplatsen och vad kan det få för konsekvenser för användarna?

Skriv hur och vem användarna ska kontakta för att lämna synpunkter på webbplatsen.

Samla även juridisk information här, till exempel hur ni hanterar personuppgifter och kakor.
Här berättar vi mer om personuppgifter (GDPR) och om kakor (cookies).

Puh! Det var en hel del att tänka på det. Lycka till i ditt tillgänglighetsarbete!

(Image by wayhomestudio on Freepik)