Tillgänglighet del 3: Märk upp ditt innehåll

I våra två tidigare blogginlägg har du kunnat läsa om webbtillgänglighetsdirektivet som träder i kraft som lag 23 september 2020 samt hur du kan undvika enkla fel genom att nyttja Sitevisions inbyggda funktioner. Tillgänglighetsdirektivet handlar mycket om hur du märker upp innehåll och talar om vad som är vad i olika lägen. Detta blogginlägg är tänkt att hjälpa dig ytterligare på traven. Det finns en rad enkla saker du kan göra själv, utan att du behöver ta hjälp av en konsult.

Det finns dessutom en rad gratistjänster du kan nyttja för att kontrollera tillgänglighet på olika sätt i dina miljöer. Vi går djupare in i några funktioner i Sitevision och kikar sedan på var mer information finns att läsa.

Underlätta för besökaren genom uppmärkning av innehåll i formulär

I riktlinjerna går det utläsa att du bör hjälpa dina användare fylla i inmatningsfält i formulär. Detta genom att ange vilken typ av innehåll som förväntas i de olika fälten. Webbläsare eller hjälpmedel kan då ibland automatiskt föreslå en inmatning. Vilka värden som kommer fram baseras på exempelvis tidigare inmatningar i fält av samma typ. Det kan bland annat handla om besökarens namn, mejladress eller postadress.

Detta finns som inbyggd funktion i våra formulärsmoduler. Det är lätt att koppla ifyllnadsstöd till de frågor du ställer. Vi kallar detta för fältnamn i Sitevision och varje fråga du ställer kan du koppla olika fältnamn till. När en besökare så tidigare fyllt i ett formulär med samma frågetyper, kommer webbläsaren minnas och föreslå värden i nästa formulär.

Läs mer om vårt ifyllnadsstöd på vår hjälpwebb. Länk till annan webbplats.

Språk och avvikande språk på en sida

I WCAG2.1 kan du läsa att du som tar fram innehåll till en webbplats kan öka sannolikheten för skärmläsare och andra hjälpmedel att presentera innehållet korrekt om du i html-koden angett vilket språk innehållet är skrivet på. Detta ska göras med hjälp av ett lang-attribut. Sedan länge är detta standard i Sitevision. Lang-attributet läggs till automatiskt kopplat till vilket språk din webbplats är inställd till att vara på. Ibland kanske du dock behöver lägga till text på ett avvikande språk. Vi kan ta ett exempel; Din webbplats är satt till svenska, och ditt innehåll skrivs på svenska. Men så behöver du lägga till ett citat på din sida, skrivet på engelska. Detta ska också märkas upp i koden med ett lang-attribut. Genom att markera den del av texten som avviker, kan du sedan välja att ange vilket språk texten/stycket är genom att infoga språk.

Läs mer om hur du infogar avvikande språk på vår hjälpwebb. Länk till annan webbplats.

Ange vilken roll olika delar har med hjälp av elementtyper och ARIA-roller

Du förväntas ange i kod vad sidans olika delar har för roll. Anledningen är att du på så vis ökar chansen att informationen på din sida presenteras korrekt, oavsett vilket verktyg besökaren använder. Märks innehållet upp korrekt kan besökaren navigera mellan sidans olika delar på ett standardiserat sätt.

Här finns en grundregel att följa: Utnyttja html-språkets olika element så långt det är möjligt och komplettera med WAI-ARIA de gånger elementtyperna inte räcker till. Med hjälp av WAI-ARIA kan du uttrycklingen beskriva med text sånt som inte framgår av kodningen, men det finns också standardvärden du kan lägga in.

Det kan låta svårt, men detta stöttas också av Sitevision. Vissa funktioner kopplat till aria-rollerna finns redan korrekt angivna i sin mallkod, andra behöver du sätta ut själv. Här listar vi de elementtyper och aria-roller som bör anses som obligatoriska, och därför också bör finnas med i er struktur.

Elementtyperna Header, Footer, Nav och Main

Genom att märka upp vilka delar i din miljö som är sidhuvud, sidfot, meny och huvudinnehåll med hjälp av html-språkets elementtyper Header, Footer, Nav och Main anges det också i koden vilka roller de objekten har.

Många gånger har ni en grundmall i er struktur och där går det oftast lägga till dessa elementtyper. Ligger ert sidhuvud i ett eget grid? Då anger ni på gridet att det tillhör elementtypen Header och så vidare. Här kan ni behöva hjälp, och har ni inte någon att fråga kan ni alltid kontakta oss för lite vägledning.

Läs mer om elementtyper i HTML5 på vår hjälpwebb. Länk till annan webbplats.

Aria-rollen Search

Aria-rollerna ses som komplement till elementtyperna och läggs bara till när de behövs. Sökfunktionen på er webbplats saknar till exempel motsvarande elementtyp, varför ni istället märker upp sökfunktionen med aria-rollen Search.

Läs mer om aria-rollerna på vår hjälpwebb. Länk till annan webbplats.

Vilka hjälpmedel finns?

Direktivet finns tydligt dokumenterat och beskrivet hos DIGG som också är tillsynsmyndigheten som ansvarar för kontroller. De har en temawebbplats webbriktlinjer.se Länk till annan webbplats. som tydligt och tillgängligt tillhandahåller checklistor och information om direktivets alla delar.

Det finns också en rad webbtjänster, ofta kostnadsfria, där du kan testa tillgänglighet på olika sätt. Olika webbläsare erbjuder olika plug-ins för test, och detta är förstås något ni bör göra som i ett tidigt skede.

Glöm dock inte bort att göra enkla, egna tester. Går innehållet zooma in utan att det blir fel eller fult? Fungerar taltjänster, något många av er redan har installerat på din egen dator? Går det tabba sig fram i menyer och bland innehåll? Är texterna skrivna i klarspråk? Testa i olika webbläsare och säkerställ att det lirar bra. Känns strukturen logisk? Låt någon testa miljön och lösa ett problem. Hur blir upplevelsen av din webbplats om du föreställer dig att du inte kan se bilderna eller läsa texten som ligger mot en bakgrundsfärg?

Tillgänglighet kräver tankeverksamhet, tålamod och en hel del arbete, men i grund och botten är det förstås en självklarhet att alla ska kunna ta del av er information. Inte sant?

Mer i tillgänglighetsserien