Tillgänglighetsbrister och fel som automatiska tester kan och inte kan identifiera

Här kan du läsa exempel på vilka fel ett automatiskt testverktyg kan hjälpa dig att upptäcka men också vilka begräsningar ett automatiskt testverktyg har när det kommer till att identifiera tillgänglighetsbrister på en webbplats.

Semantik

Inom webbutveckling handlar semantik om att använda html-kod för att märka upp innehåll på rätt sätt.

Genom att använda rätt element i html-koden kan alla användare, oberoende av teknik så som enhet, webbläsare och hjälpmedel, förstå att till exempel en knapp just är en knapp, utifrån hur den är kodad.

Rubriker

Rubriker ska göras tillgängliga, bland annat genom att innehåll som är rubriker ska vara korrekt uppmärkta som rubriker i sidans html-kod.

Ett vanligt sätt att märka upp rubriker är med hjälp av html-elementen <h1>–<h6>. Rubriker ska också vara beskrivande för sitt syfte.

Rubriker – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta kontrollera:

  • om det finns uppmärkta rubrikelement och om dessa följer en logisk struktur
  • om innehåll som ser ut att vara formgivet som rubriker men som inte är uppmärkt som rubriker i koden
  • om det finns innehåll mellan en rubrik och nästa rubrik som följer
  • att rubriknivåer inte hoppas över.

Det är vanligt att få falska nedslag för utfällbara rubriker, så kallade ”accordions”, eftersom att verktyget inte alltid märker att det ligger utfällbart innehåll under rubriken. För en samling knappar med utfällbara rubriker kan verktyget tolka det som att det ligger flera rubriker på rad utan innehåll mellan rubrikerna.

Ett automatiskt verktyg kan aldrig avgöra om en rubrik är beskrivande för sitt syfte. Det måste alltid bedömas manuellt.

Listor

Listat innehåll ska vara uppmärkt som en ordnad (numrerad) eller oordnad (inte numrerad) lista i koden.

Detta kan göras med hjälp av html-elementen <ol>, <ul> och <li>. Listelement kan användas både för att märka upp listor i brödtext, men också för att märka upp andra typer av listinnehåll, till exempel navigationsmenyer.

Förmedla information, struktur och relationer i koden (Webbriktlinjer)

Listor – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta kontrollera:

  • om det finns innehåll som är uppmärkt som listinformation
  • om innehållet enligt förra punkten verkar vara korrekt uppmärkt och nästlat.

Vanliga fel som kan uppstå med listat innehåll är att fel sorts listelement används för ordnade (<ol>) och oordnade (<ul>) listor och att underordnade listelement (<li>) saknas eller inte är nästlade korrekt.

Andra fel kan handla om att man kopierar in listat innehåll från en annan källa, till exempel ett mejl eller ett Word-dokument, och att det innehållet inte ”översätts” till korrekt html när man klistrar in texten i gränssnittet för redigering av webbsidan. Då får man en lista som inte är semantiskt korrekt kodad och som därför inte går att tolka som listinformation trots att den kan ”se rätt ut” visuellt.

Länkar

För att länkar ska vara tillgängliga behöver de uppfylla en rad krav, bland annat de som här följer. Länkar och länkad text ska

  • vara uppmärkta som länkar i koden, vilket kan göras med elementet <a>
  • ha maskinläsbara namn, vilket är speciellt viktigt att tänka på om länken består av annat än enbart text
  • ska skilja sig visuellt från övrig brödtext, genom exempelvis en understrykning.

Syftet med varje länk måste som minst framgå i det omgivande sammanhanget, men det bästa är om det framgår i själva länktexten.

Länkar – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta kontrollera:

  • vad det finns för länkar på webbsidan
  • hitta, indikera och varna för långa länktexter
  • om det finns länkar som saknar textinnehåll, exempelvis länkar som består av endast en bild utan alt-attribut.
  • ibland se och varna för vissa formuleringar av länktexter som inte är beskrivande, till exempel länktexter som ”Klicka här” och ”Läs mer”.

Det behövs dock en manuell kontroll för att avgöra om länktexterna passar i sitt sammanhang eller om länktexter är för långa. Man bör även kontrollera att länkar skiljer sig visuellt från övrig brödtext.

Språk

För att hjälpmedel ska tolka sidan rätt, men även för att underlätta automatisk avstavning av ord, behöver webbsidans huvudsakliga språk vara maskinläsbart angivet i sidans html-kod. Ibland är delar av en webbsidas innehåll på ett annat språk än sidans angivna språk. Det behöver också anges maskinläsbart i koden.

Språk – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta avgöra om sidan har ett angivet maskinläsbart språk och om språkkoden är korrekt utformad.

Verktyget kan däremot aldrig avgöra om det är rätt språkkod som är angiven för innehållet.

Bilder

Bilder behöver ha ett textalternativ för att kunna tolkas av användare som inte kan se bilden.

Bilder som är uppmärkta med <img>-elementet behöver beskrivas med en alternativtext, som anges i alt-attributet. Dekorativa bilder, det vill säga bilder som inte tillför någon information till användaren, ska döljas för hjälpmedel som exempelvis skärmläsare.

För <img>-elementet kan detta göras genom att ha ett tomt alt-attribut (alt=””). Detta gör att de döljs för uppläsande hjälpmedel.

Textinnehåll ska inte presenteras i form av bild. Det innebär att text som är tänkt att bli läst av användaren ska vara riktig text och inte en avbildning av texten. Detta gäller oavsett om man lagt in texten maskinläsbart i ett textalternativ, eftersom text i form av bild kan vara mycket svårläst vid förstoring, och heller inte går att anpassa av användaren som vanlig text gör.

Bilder – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta bara kontrollera om det finns ett textalternativ eller inte och om textalternativet verkar vara rimligt långt.

Verktyget kan inte avgöra om textalternativet ger likvärdig information som bilden, eller om bilden är dekorativ och därför bör döljas för hjälpmedel. För det krävs alltid en manuell kontroll och bedömning. Verktyget kan heller inte kontrollera om det finns bilder som innehåller text.

Ledtexter och maskinläsbara namn

För att alla användare, med och utan hjälpmedel, ska få rätt information om vad till exempel ett inmatningsfält är till för, eller vad en knapp utför för typ av funktion, behöver alla interaktiva element ha både synliga ledtexter och maskinläsbara namn. Interaktiva element är alla saker på en webbsida som användarna kan interagera med, till exempel klicka på.

Ett interaktivt element, exempelvis en knapp, kan ha ett visuellt namn vilket är knappens ledtext. Ledtexten hjälper seende användare att identifiera vad knappen utför för funktion. För att användare med hjälpmedel, exempelvis skärmläsare, också ska förstå vad knappen utför för typ av funktion behöver knappen även ha ett maskinläsbart namn. Ett maskinläsbart namn anges i koden så att hjälpmedel kan läsa av det.

Förutom att det ska finnas ett maskinläsbart namn, behöver det maskinläsbara namnet innehålla den synliga ledtexten. Det är exempelvis inte godkänt att en knapp har den visuella ledtexten ”Skicka” och det maskinläsbara namnet ”Sänd”. Det blir inte bra för exempelvis personer som använder sig av röststyrning för att navigera på webbplatsen.

Ledtexter och maskinläsbara namn – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta kontrollera om interaktiva element har maskinläsbara namn och ledtexter kopplade till sig.

Verktyget kan däremot inte avgöra om ett maskinläsbart namn eller en ledtext är beskrivande för det interaktiva elementets syfte. Där krävs det en manuell kontroll.

Validering av kod

Kodvalidering av webbsidors html-kod ingår inte längre i Diggs granskningar till följd av uppdateringar i WCAG 2.1.

Att validera koden på en webbplats kan dock ändå vara användbart då det kan ge en indikation på vilken typ av problem som förekommer på webbplatsen. En korrekt kodad webbplats tolkas med större sannolikhet på samma sätt oavsett vilken webbläsare och vilket hjälpmedel som används, även om det ändå kan förekomma individuella skillnader mellan dessa.

Det finns specifika valideringsverktyg som validerar koden efter den givna standarden för exempelvis html eller CSS, men som inte kontrollerar andra tillgänglighetsrelaterade brister. Dessa verktyg används främst för felsökning och kvalitetskontroll vid utveckling.

Se till att koden validerar (Webbriktlinjer)

Kod – vad kan ett verktyg testa automatiskt?

Ett automatiskt testverktyg kan ofta kontrollera:

  • kodens struktur och uppbyggnad
  • att alla ID:n som används är unika och således bara förekommer på ett ställe i koden
  • att alla element har korrekta start- och sluttaggar
  • att koden är korrekt nästlad, vilket bland annat innebär att element kommer i rätt ordning, att attribut som krävs för specifika element finns på plats och att över- och underordnade element som är beroende av varandra ligger på rätt plats i koden.

Html-standarden är en standard som ständigt utvecklas, därför behöver verktygen vara uppdaterade enligt den senaste standarden för att inte ge missvisande resultat.

Läs mer

Webbriktlinjer

På Webbriktlinjer beskriver vi de lagkrav som gäller för att digital offentlig service ska vara webbtillgänglig. Vi beskriver lagkraven i första hand och ger i viss mån tips, exempel och rekommendationer för hur du kan göra din webbplats, app och e-tjänst ännu mer tillgänglig.

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: