Mer om WCAG

 

Syntolkning: En stor brun hund sitter på en stubbe. I bakgrunden syns kala träd och en blå himmel.

Under vecka tolv hade vi återigen lektioner med Johan från Funka och vi fortsatte prata om olika framgångskriterier inom WCAG.

 

Måndag

Vi började med att prata om kriteriet 2.4.1, som vi arbetade med under vecka 10. Då fick vi en uppgift att titta på några webbplatser och kontrollera om det fanns möjlighet att hoppa över grupperat innehåll. Detta är en funktion för seende användare som navigerar med tabbtangenten på tangentbordet. Ska man tabba sig igenom hela navigeringen på en webbplats (länkarna i överkant) så tar det lång tid. Trycker man på tabb en gång ska det komma upp en ruta där man kan välja att gå till sidans huvudinnehåll. Detta kallas att hoppa över grupperat innehåll, för att användaren ska kunna ta sig fram snabbare på hemsidan. Johan berättade att det är bättre att användaren får godkänna Cookies innan man kan hoppa över grupperat innehåll. Annars riskerar man att missa informationen om Cookies.

Under vecka 10 fick vi relativt oklara instruktioner för uppgiften, vilket ledde till att vi deltagare hade uppfattat den lite olika. Under måndagens lektion fick vi bättre information. Därför gjorde jag om uppgiften och la till några saker som jag missade förra gången.

 

Uppgift – 2.4.1

·         Gå in på minst fem webbplatser

·         Minst en kommun, en myndighet och ett elbolag

·         Se om du kan hoppa över grupperat innehåll

Godkänt:
Tangentbordsgenväg finns och fungerar

Underkänt:
Tangentbordsgenväg finns men fungerar inte
Tangentbordsgenväg finns inte.

Tangentbordsgenväg är inte aktuellt om tabbstoppen för att komma till sidans huvudinnehåll är lägre än fem.

 

Resultat:

·         Försäkringskassan
Godkänt.

·         Arbetsförmedlingen
Godkänt.

·         Diskrimineringsombudsmannen
Godkänt.

·         Stockholms stad
Godkänt.

·         Helsingborgs kommun
Underkänt. Funktionen finns inte, när jag trycker tabb en gång så kommer jag till logotypen och via den kan jag ta mig till startsidan.

·         Öresundskraft
Underkänt. När jag trycker tabb en gång kommer jag till chatten.

 

Framgångskriteriet 1.3.1

Sedan pratade vi om ett nytt framgångskriterium, 1.3.1. Det är ett stort kriterium som ligger på nivå A, alltså innefattas det av lagen. Det handlar om hur vi strukturerar upp innehåll i en artikel. Det innefattar rubriksättning, styckesindelning, punktlistor och tabeller, sådant som gör sidan lättare att hitta på. Det finns ytterst få människor som skrollar på en myndighetswebbplats för skojs skull, man vill hitta det man söker och därför är strukturen väldigt viktig. Eftersom punkten är omfattande så innehåller den fyra testmoment, vilka benämns som A -D.

Denna vecka fokuserade vi på rubriker och 1.3.1 A handlar om huvudrubriker. Alla sidor och artiklar ska inledas med en huvudrubrik. Dessa ska vara tydliga rent visuellt, men de ska också vara kodade som huvudrubriker, med elementet H1, så det även fungerar för skärmläsaranvändare. I WCAG står det att rubriksättningen ska vara logisk, vilket kan anses som en tolkningsfråga. Om det ska vara logiskt så bör man dock ha en huvudrubrik överst, vilket också benämns som rubrik på nivå 1.

 

Uppgift – 1.3.1

Inför onsdagens lektion fick vi en uppgift om kriteriet 1.3.1.

·         Gå in på minst fem webbplatser.

·         Minst en kommun, en myndighet och ett elbolag.

·         Besök en undersida, alltså inte startsidan.

·         Se om sidan har en huvudrubrik som är rätt kodad

Vi i klassen fick olika sätt att lösa uppgiften. Mina seende kamrater skulle titta i koden, men vi som använder skärmläsare behövde inte göra det. I JAWS trycker man snabbkommandot H för att hoppa mellan rubriker. När man fått fokus på en rubrik säger JAWS vilken nivå rubriken är på, vilket gör att vi får reda på om den är rätt kodad.

 

Resultat:

·         Försäkringskassan ”Arbetssökande”
Godkänt. Rubriken är rätt kodad, det är dessutom svart text mot vit bakgrund, alltså en optimal kontrast.

·         Arbetsförmedlingen ”Yrken och framtid”
Godkänt. Rubriken är rätt kodad, den har en stor teckenstorlek och bra kontrast.

·         Diskrimineringsombudsmannen ”Vad är diskriminering?”
Godkänt. Rubriken är rätt kodad, har bra kontrast och teckenstorlek.

·         Helsingborgs kommun ”Omsorg och stöd”
Godkänt. Rubriken är rätt kodad. Den har inte lika bra kontrast som de tidigare, men ändå fullt godkänd. Jag tittade på kontrastvärdet via CCA och det var 6,8:1.

·         Stockholms stad ”Vaccinera dig mot covid-19”
Godkänt. Rubriken är rätt kodad, den har fet text och bra kontrast.

·         Öresundskraft ”Oresundskraft.se är till för alla” (Tillgänglighetsredogörelse)
Underkänt. Det är en tydlig rubrik med bra kontrast, men den är kodad som rubrik på nivå 2.

 

Onsdag

Lektionen började med att vi gick igenom uppgiften som handlade om huvudrubriker och vi i klassen fick berätta hur det hade gått för oss.

Johan berättade om hur det var när internet var helt nytt. Då var webbplatserna relativt tillgängliga, men däremot tråkiga och enbart textbaserade. I slutet av 1990-talet blev det populärt att designa webbplatserna för att de skulle vara snygga att se på. Johan förklarade att programmerarna kodade helt fel, vilket gjorde webbplatserna otillgängliga för personer som använde hjälpmedel. Skärmläsaren JAWS gjorde så gott den kunde med de webbplatser som fanns. Än idag försöker JAWS hjälpa webbplatserna , genom att anpassa sig efter vanliga fel. NVDA, som är en annan skärmläsare, gör inte det och är därför mer korrekt. Däremot ligger NVDA efter JAWS när det gäller funktionaliteten.

 

 

Fyra punkter i riktlinje 1.3.1 angående rubriker:

A.      Alla sidor på en webbplats ska börja med en huvudrubrik, alltså en rubrik på nivå 1.

B.      Allt som ser ut som rubriker ska också vara kodat som rubriker.

C.      Rubriker ska ha en korrekt hierarki, H1 ska följas av H2 som ska följas av H3. Programmerare får inte hoppa över nivåer i denna hierarki. Det kan finnas flera huvudrubriker på en hemsida, då kan två H1:or förekomma efter varandra. Om alla underrubriker är kopplade till huvudrubriken så ska dessa vara kodade som H2.

D.      Rubriknivåerna ska skilja sig visuellt samt vara rätt kodade.

Under punkten C hittade vi i klassen ett problem gällande rubrikerna i sidfoten. Denna finns på alla undersidor, vilket gör det svårt att koda rubrikerna på rätt nivå. Rubrikerna kan vara H2:or i förhållande till en H1:a på startsidan, men det stämmer inte på andra sidor på webbplatsen.

På vissa sidor är löpande text kodat som rubriker, vilket är fel.

Johan berättade om tomma H-element. Det innebär att programmeraren skrivit en text och lagt dit ett utrymme för en rubrik. Sedan har personen valt att inte skriva någon rubrik, men glömt ta bort utrymmet. Det gör att det blir ett stort tomt utrymme på sidan, ett så kallat tomt H-element.

 

Uppgift om rubriker

Uppgiften till fredagen handlade om att testa de resterande tre punkterna gällande rubriker. Vi skulle granska en undersida hos minst fem webbplatser, minst en kommun, en myndighet, ett elbolag samt en turistbyrå hos en kommun. Vi deltagare med synnedsättning har svårt att granska punkterna B och D, eftersom det handlar om hur rubrikerna ser ut rent visuellt. Därför skulle vi endast granska punkten C i denna uppgift.

 

Resultat:  

·         Försäkringskassan ”Funktionsnedsättning”
Godkänt (punkt C). Rubriken ”Funktionsnedsättning” är på nivå 1 som den ska , därefter är följande underrubriker på nivå 2. Det är korrekt , eftersom de är underrubriker till huvudrubriken. Även när man klickar på underrubriken ”Aktivitetsersättning och sjukersättning” ser det bra ut, huvudrubriken är kodad som H1 och underrubrikerna är kodade som H2.

·         Diskrimineringsombudsmannen ”Kunskap, stöd och vägledning”
Godkänt, tror jag (punkt C). Sidan börjar med en huvudrubrik som följs av en kort ingress. Därefter följer en lista med fem objekt, dessa rubriker är på nivå två, som det ska vara. En av underrubrikerna heter ”DO:s webbinarier” och under den finns en länk med namnet ”Så deltar du i DO:s webbinarier”. Denna benämns som en lista med ett objekt på nivå 1. Det är ingen rubrik utan en länk, därför kan jag inte svara på om det stämmer, eller om den bör vara på nivå 3. Jag kontrollerade kontrasten på huvudrubriken genom CCA och den hade ett kontrastvärde på 5:1. Det är klart godkänt på nivå AA, men jag trodde att diskrimineringsombudsmannen skulle ha bättre kontrast.

·         Helsingborgs kommun ”Uppleva och göra”
Godkänt (punkt C), men med en missvisande utformning enligt mig. Sidan börjar med en huvudrubrik och en kort ingress. Därefter finns en grupp med länkar, några av dessa är ” Aktivitetskalendern”, ”Gemensamma villkor” och ”Offentliga toaletter i Helsingborg”. Nedanför dessa länkar finns en rubrik på nivå två som heter ”I aktivitetskalendern finns massor att göra för dig som är ung i Helsingborg”. Under rubriken följer ingen text, utan rubriker med förslag på olika aktiviteter. Dessa är också på nivå 2. Dessa rubriker ser ut att tillhöra rubriken om aktivitetskalendern, , samtidigt som aktiviteterna verkar passa personer i alla åldrar. Jag gick in i aktivitetskalendern och fick ta del av ett annat innehåll som var riktat till unga. Alltså var de andra rubrikerna åtskilda från aktivitetskalendern, men jag tyckte att sidans utformning gjorde det missvisande.

Syntolkning: En bild på Helsingborgs kommuns hemsida. Bilden visar uppbyggnaden som jag upplever som missvisande. 

·         Öresundskraft ”Startsida”
Underkänt (punkt C). Jag hade egentligen inte tänkt välja startsidan, men eftersom jag fastnade där på grund av att den var konstigt uppbyggd, så valde jag den ändå. På sidan finns en huvudrubrik som heter ”Så funkar regeringens elpriskompensation”. Därefter följer en rubrik på nivå två som heter ”Välkommen till oss på Öresundskraft!”, denna borde också vara på nivå 1, eftersom den inte har någon koppling till den förra huvudrubriken. Därefter följer rubriken ”Få ett stabilt elpris och gör en viktig skillnad via ditt elavtal”, även denna på nivå 2. Enligt min mening bör denna vara en underrubrik till ”Välkommen till oss på Öresundskraft!”, eller eventuellt en egen huvudrubrik.  Därefter följer rubriken ”Just nu hos oss” på nivå 2, vilken också bör vara en underrubrik till ”Välkommen till oss på Öresundskraft!”. Därunder följer flera underrubriker, vilka också är på nivå 2, alltså på fel nivå.
Rubrikerna på startsidan är inte klickbara. Under varje rubrik finns en kort ingress och sedan en knapp/länk med texten ”Läs mer” eller något liknande. Detta försvårar navigeringen för skärmläsaranvändare, eftersom vi behöver använda andra kortkommandon för att komma åt det, istället för att bara hoppa mellan de olika rubrikerna genom att klicka H på tangentbordet.
Som ni säkert förstår finns det mer att önska från Öresundskraft, när jag klickade runt på startsidan märkte jag att vissa bilder var syntolkade, men inte alla.

·         Visit Helsingborg ”H22 CITY EXPO”
Underkänt (punkt B och C). Överst på denna sida finns huvudrubriken på en bild. Det ser ut som en rubrik men är inte kodad som en, därför bryter den mot punkt B, att sådant som ser ut som rubriker också ska vara kodat som rubriker. Eftersom detta ser ut som en bild så kom jag inte åt den med min skärmläsare, det tog en stund innan jag lyckades hitta den med hjälp av min förstoring. Därefter följer rubriken ”Att uppleva och göra på H22 CITY EXPO” på nivå två. Detta hade varit korrekt om huvudrubriken varit kodad som H1. Nedanför denna rubrik finns flera underrubriker på nivå 4, men de borde vara på nivå 3.

 

Fredag

Under fredagen hade vi en lite kortare lektion, där vi gick igenom uppgiften och hur det hade gått för oss.

 

/Emelie