Checklista för redaktörer

Här kan du läsa en beskrivning av de vanligaste misstagen som redaktörer gör när det gäller webbtillgänglighet. Använd listan som en checklista om du vill säkerställa att din webbplats uppfyller kraven i lagen om webbtillgänglighet.

    Du kan använda den här listan som en checklista när du skapar en sida eller lägger till innehåll på din webbplats. Om du kan vara säker på, att du inte har gjort de misstag vi beskriver här, kommer du att vara bäst förberedd för eventuella webbtillgänglighetstester.

    Undvik fel i webbtillgängligheten

    Hierarkisk formatering av rubriker

    Det är viktigt att du kommer ihåg att strukturera rubriker i rätt hierarki och inte bara ändra teckenstorleken när du vill visa att det finns en skillnad mellan en rubrik och din brödtext. Rubriktaggar som används i rätt ordning ger en korrekt bild av vilket innehåll som finns på din webbplats.

    Därför bör rubriker inte hoppa över nivåer - undvik att lägga till en H3-rubrik efter en H1-rubrik. Skärmläsaren läser inte av sidan som dina ögon gör, utan hoppar från den översta rubriken (H1) till nästa (H2 till H3, H4 etc.).

    Det bör finnas minst en huvudrubrik (H1 eller WAI-ARIA role="heading" med aria level="1") på sidan och underrubriker för denna bör vara H2 eller WAI-ARIA role="heading" aria level="2" etc. Skärmläsare använder ofta en genväg som gör att användarna kan se en lista över alla rubriker på en sida. Skärmläsaren använder rubrikkoder (H1-H6 och WAI-ARIA-rubriker och deras "aria-nivå") för att skapa denna lista. Vissa användare använder också TAB-tangenten för att bläddra igenom sidans rubriker, så gör dina användare en tjänst och infoga rätt rubriktyper för titlarna på sidan.

    Rubriker i komponenter

    När du skapar en komponent på en sida, t.ex. ett Utfällbart fält, är komponentens rubrik vanligtvis en H2-rubrik. Om du vill ha en rubrik inuti Utfällbart fält-komponent använder du H3-formatering. Då vet skärmläsaren att den ska läsas efter H2-rubriken för det Utfällbara fältet.

    Se ett exempel på korrekt formatering här.

    En länktext som "läs mer" säger ingenting om destinationen. Tänk på länktexter som artikelrubriker: självförklarande och unika, inte "läs artikel". När du skriver vad du länkar till vet användare med skärmläsare vart länken tar dem.

    I en artikel om corona kan du t.ex. utveckla länkens destination i en "läs mer"-länk genom att skriva "läs mer om corona".

    Som användare av skärmläsare kan det vara förvirrande att läsa flera länkar som låter likadant. Det är inte klart om du kommer till samma destination via alla länkar eller till olika destinationer. 

    Det finns olika versioner av detta fel, t.ex:

    • länktexten är densamma, men hänvisar till olika externa sidor.
    • länktexten är densamma, men hänvisar till olika sidor på samma webbplats.
    • länktexten har samma namn som den sida användaren kommer från.

    Tänk på att länkarna ska vara självförklarande och unika, precis som rubrikerna i en artikel. Skriv till exempel "Sofiebergs Skolans hemsida" i länktexten istället för "Skolans hemsida".

    Nedan kan du se ett exempel där samma länktext (Jobnet.dk) används för olika destinationer på Jobnets huvudwebbplats - nämligen för en artikel om "Goda råd för din jobbsökning" och för Jobnets jobbsökningsfunktion. Detta är ett no-go:

    Nedan visas ett exempel på hur länktexten i det högra sidofältet har samma titel som sidans titel (båda heter " Livets slut"). Det innebär att skärmläsaranvändaren inte kan vara säker på om länken till höger leder till den aktuella sidan eller till en ny sida. Istället skulle länktexten kunna lyda "Guide: Livets slut" eller " Guide för livets slut".

    Formateringen avgör hur skärmläsaren läser innehållet, så se till att ta bort osynlig formatering som uppstår när du kopierar innehåll från en sida till en annan.

    Texter som skrivs i ett visst program har en "osynlig" formatering som blir synlig först när man kopierar texten till ett annat program, där texten plötsligt ser helt annorlunda och ofta mycket konstig ut på sidan. Detta beror på att formateringen läses annorlunda på den nya platsen där texten är placerad.

    Ibland ser texten likadan ut, men HTML-koden bakom texten har en annan typ av formatering. Denna formatering kallas för "ID". Den definierar texten, och som redaktör måste du se till att ID:t inte följer med texten när du kopierar innehåll till sidan. ID:t kan till exempel definiera vilken rubriktyp texten är i (H1, H2, H3, etc.) eller annan viktig formatering som påverkar hur skärmläsaren läser innehållet.

    Om du trycker på 'ctr [Windows] /cmd [Mac] + shift + v' när du klistrar in kopierat innehåll eller korrigerar det i HTML-vyn, kan du förhindra att osynlig formatering överförs.

    I HTML-vyn kan du se om det finns ett ID på det kopierade innehållet. HTML-vyn finns längst upp till vänster i textrutan i back office:

    Följande HTML-kod visas, där du kan se om det står "id" någonstans.