Testprotokoll - Ace it - Tillgänglighetsplattform från Useit

Roller:

Utvecklare.

Ämnen:

Kod.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Teknikerna som används måste kunna hålla tillgänglig information, exempelvis måste bilder kunna beskrivas med text. De ska också kunna tolkas av hjälpmedel.

Det här kravet matchar inte något enskilt krav i WCAG men är en förutsättning för att kunna möta kraven i WCAG.

Så här testar du

Java Applets:

Leta I html-koden efter <applet> elementet. Det kan se ut så här: <applet code="First.class" width="300" height="300"> Om det finns, kontrollera om det innehåller viktig information eller funktionalitet. Gör den det är punkten underkänd.

Lättast visar du koden genom att trycka F12 i Firefox, Chrome eller Internet Explorer. Sedan kan du söka på ordet "applet".

Flash:

Leta i koden efter <object> elementet. Om det finns och innehåller type="application/x-shockwave-flash" så är det en flash applikation. Om det finns, kontrollera att den inte innehåller viktig information eller viktig funktionalitet.

Lättast visar du koden genom att trycka F12 i Firefox, Chrome eller Internet Explorer. Sedan kan du söka på ordet "object".

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC All
EN 301 549: 9.All

Roller:

Utvecklare.

Ämnen:

Kod.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Koden bör följa standard till hundra procent men det kan ibland vara nödvändigt med avsteg. Dock får inga avsteg som bryter mot WCAG förekomma.

Från WCAG:

Innehåll som implementeras med kodspråk:

element ska ha kompletta start- och slut-taggar
element är nästlade i enlighet med standarden
element innehåller inte dubblerade attribut (ex inte två alt-texter på samma bild)
alla ID-värden som används ska vara unika

Så här testar du

Använd http://ace.useit.se för att testa sidorna. Verktyget kommer automatiskt att validera koden och skilja på fel som bryter mot WCAG från andra valideringsfel. Om det finns fel som bryter mot WCAG följer inte sidan den här riktlinjen.

Om du inte kan använda Ace it

Alternativt kan du validera webbplatsens sidor på https://validator.w3.org/ men notera att du då behöver validera den korrekta koden efter att sidan laddats. Om du bara matar in adressen i validatorn är det bara koden före att skript aktiverats som faktiskt blir validerad.

Visa sidan du ska validera i Chrome eller Firefox, visa koden genom att trycka F12, högerklicka på <html>-taggen, välja "Kopiera outer html" som du sedan klistrar in i validotarn. Du måste också se till att ange doctype manuellt eftersom det inte går att kopiera från webbläsarens utvecklarverktyg.

Resultat från det automatiska verktyget (2)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 4.1.1
EN 301 549: 9.4.1.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Bilder och animationer.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Ett meningsbärande grafiskt objekt är exempelvis foton, illustrationer och ikoner som används för att ge information eller visa något på sidorna. För användare som inte ser är det viktigt att få information om vad bilderna visar. Exakt var gränsen för meningsbärande bilder går är subjektivt, men om du använder bilder för att förstärka informationen bör de nästan alltid vara beskrivna.

Det finns undantag till detta, exempelvis om du har en utskriftsikon och texten "Skriv ut" i direkt anslutning till ikonen. Att då beskriva ikonen också skulle innebära dubbel information vilket kan bli tjatigt.

Använd alt-attributet på img-elementet när det är möjligt.

Du kan använda aria-label om det inte är möjligt att använda alt-attributet, om det exempelvis är en bild som lagts in med svg-elementet eller på något annat alternativt sätt.

Det viktiga är att all information som ges i form av bilder också är inlagd som text och nåbar för användare som inte kan se bilderna.

Så här testar du

Använd http://ace.useit.se för att testa sidorna. Klicka på fliken för bilder i resultattabellen och gå igenom listan med bilder. Kontrollera att alla bilder som inte är rent dekorativa har en alt-text som ger motsvarande information som bilden.

Ace it och listningen av bilder.

Vad som är en meningsbärande bild kan diskuteras, men vår rekommendation är att bilder som föreställer något och där texten bredvid inte ger motsvarande information ska ha en kort beskrivning. Beskrivningen ska vara kortfattad och beskriva vad bilden visar. Om bilden är en länk där det inte finns någon länktext till, då ska bildens alt-text i första hand redogöra för länkens mål och sedan bildens motiv. Exempelvis kan den länkade logotypen i sidhuvudet beskrivas med "Logotyp för Useit, till startsidan".

Om du inte kan använda Ace it på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv) för att inspektera alt-texterna på sidan.

Resultat från det automatiska verktyget (3)

Genomfört test:

<img> element utan alt-attribut

Verktyget har letat efter fel men inte hittat några. Detta är bra, men det kan finnas fel som verktyget inte har hittat så du bör kontrollera det maneullt också.

Antalet bilder (img-element) som helt saknar alt-attributet. Det kan leda till problem. Om bilden inte ska ha en alt-text ska attributet ändå finnas i koden och vara tomt.

Genomfört test:

Behöver den här bilden en alt-text?

Den här typen av potentiella fel finns på 40% av de undersökta sidorna. Du behöver kontrollera hur stort problemet är för användarna.

Antalet bilder som är minst 5 x 5 pixlar som saknar alt-text. Kontrollera om bilden borde ha en alt-text.
(i snitt för de sidor där felet återfinns)

Visar de 10 vanligaste avstegen av totalt 75:

Det här avsteget förekommer på 3 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<img width="720" height="502" src="https://traineesundsvallsregionen.se/wp-content/uploads/2019/02/TraineeS%C3%B6draNorrland-EMP-tryck-720x502.jpg" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="">
```
Påverkade sidor:
Det här avsteget förekommer på 2 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<img width="594" height="502" src="https://traineesundsvallsregionen.se/wp-content/uploads/2018/12/skopetframsida-594x502.jpg" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="">
```
Påverkade sidor:
- Uncategorized | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/category/uncategorized/
- Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/2/
Det här avsteget förekommer på 2 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<img width="720" height="502" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/IMG_01841-e1485877592982-720x502.jpg" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="">
```
Påverkade sidor:
- Uncategorized | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/category/uncategorized/
- Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/3/
Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<img width="460" height="502" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/PoL_2_2014_stor4-460x502.png" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="">
```
Påverkade sidor:
- Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/4/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.

<img width="578" height="317" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/74A1293_small.jpg" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/74A1293_small.jpg 578w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/74A1293_small-300x165.jpg 300w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/74A1293_small-370x203.jpg 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/74A1293_small-185x101.jpg 185w" sizes="(max-width: 768px) calc(100vw - 1.875em), (max-width: 992px) 84vw, 740px">

Påverkade sidor:

Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/4/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.

<img width="578" height="385" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/sommarjobbsdagen.jpg" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/sommarjobbsdagen.jpg 578w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/sommarjobbsdagen-300x200.jpg 300w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/sommarjobbsdagen-370x246.jpg 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/sommarjobbsdagen-185x123.jpg 185w" sizes="(max-width: 768px) calc(100vw - 1.875em), (max-width: 992px) 84vw, 740px">

Påverkade sidor:

Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/4/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.

<img width="580" height="420" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/Mikaela.png" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/Mikaela.png 580w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/Mikaela-300x217.png 300w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/Mikaela-370x268.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/Mikaela-185x134.png 185w" sizes="(max-width: 768px) calc(100vw - 1.875em), (max-width: 992px) 84vw, 740px">

Påverkade sidor:

Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/5/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.

<img width="580" height="420" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/OskarochRobin.png" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/OskarochRobin.png 580w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/OskarochRobin-300x217.png 300w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/OskarochRobin-370x268.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/OskarochRobin-185x134.png 185w" sizes="(max-width: 768px) calc(100vw - 1.875em), (max-width: 992px) 84vw, 740px">

Påverkade sidor:

Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/5/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.

<img width="370" height="493" class="alignnone size-content-half wp-image-1435" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-370x493.jpg" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-370x493.jpg 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-225x300.jpg 225w, https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-768x1024.jpg 768w, https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-1152x1536.jpg 1152w, https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-740x987.jpg 740w, https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-185x247.jpg 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2020/05/IMG_3205-rotated.jpg 1512w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 2), 370px">

Påverkade sidor:

Traineer 2020/2021 | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/traineegrupper/traineer-2020-2021/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<img width="720" height="502" src="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/Evelina-720x502.jpg" class="attachment-news-thumb-large size-news-thumb-large wp-post-image" alt="">
```
Påverkade sidor:
- Nyheter | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/nyheter/page/4/

Genomfört test:

Kontrollera om alt-texten är tillräckligt utförlig

Den här typen av potentiella fel finns på 2% av de undersökta sidorna. Detta är bra, men det kan finnas fel som verktyget inte har hittat så du bör kontrollera det maneullt också.

Antalet bilder som har alt-texter, men där alt-texten innehåller färre än 6 bokstäver. Det är ovanligt att en bild kan beskrivas så kort.
(i snitt för de sidor där felet återfinns)

Visar de 1 vanligaste avstegen av totalt 1:

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.

<img width="370" height="208" class="alignnone size-content-half wp-image-819" alt="image2" src="http://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-370x208.jpg" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-370x208.jpg 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-300x169.jpg 300w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-768x432.jpg 768w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-1024x576.jpg 1024w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-740x416.jpg 740w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2-185x104.jpg 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2017/01/image2.jpg 1706w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 2), 370px">

Påverkade sidor:

Planeringsdag i Hudiksvall | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/2017/01/18/planeringsdag-i-hudiksvall/

Punkten har fått en preliminär bedömning men du ska alltid kontrollera punkten manuellt.

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 1.1.1
EN 301 549: 9.1.1.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Bilder och animationer.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Exempelvis ska länkade bilder som även har en text i länken inte upprepa det som står i länktexten (exempelvis en länkad ikon av en skrivare med texten "Skriv ut" i länken, ska inte ha en alt-text).

Använd i första hand css för att lägga in dekorativa bilder. Om bilden ligger i html-koden ska den ha alt-attributet, men det ska då vara tomt. Du kan också använda aria-hidden eller role="presentation" på bilden.

Så här testar du

Använd http://ace.useit.se för att testa sidorna. Klicka på fliken för bilder i resultattabellen och gå igenom listan med bilder.

Ace it och lista med bilder.

Kontrollera att bilder som enbart används för dekoration har tomma alt-texter och ingen annan beskrivning (exempelvis aria-label). Om bilden är länkad kan den behöva ha en beskrivning för att göra länken begriplig för användare som inte kan se.

Om du inte kan använda Ace it på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv) för att inspektera alt-texterna på sidan.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.1.1
EN 301 549: 9.1.1.1

Roller:

Redaktörer.

Ämnen:

Ljud och video.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

En länk på sidan är ok, men den måste vara tydligt utpekad så att användarna förstår att det är en länk till en textversion av ljudklippet.

Så här testar du

Kontrollera om sidan har ljudinnehåll (ljud utan bild, exempelvis podcasts) som inte är livesänt.

Om det finns, kontrollera att det också finns en textbeskrivning som ger motsvarande information som ljudet i klippet. Textbeskrivningen ska ligga i nära anslutning till ljudklippet, eller vara länkat i nära anslutning till ljudklippet.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.2.1
EN 301 549: 9.1.2.1

Roller:

Redaktörer.

Ämnen:

Ljud och video.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Språket på textningen ska motsvara vad användarna förväntar sig i den givna situationen.

Textningen ska inte enbart innehålla dialogen utan all viktig ljudinformation.

Så här testar du

Kontrollera om sidorna har video som inte är livesänd.

Om det finns videor, kontrollera om de är textade. Antingen textade så att texten alltid visas, eller så att du som användare måste aktivera textremsan.

Kontrollera också att texten är på ett väntat språk. På en svensk sida i en engelskspråkig video bör inte textningen vara på tyska, om det inte finns särskilda skäl.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.2.2
EN 301 549: 9.1.2.2

Roller:

Redaktörer.

Ämnen:

Ljud och video.

Standarder:

WCAG 2.1 nivå AA.

Förklaring

Detta är inte ett krav i Europeisk lagstiftning för tillfället.

Så här testar du

Kontrollera om sidorna har livesänd video.

Om det finns livesända videor, kontrollera om de är textade. Antingen textade så att texten alltid visas, eller så att du som användare måste aktivera textremsan.

Kontrollera också att texten är på ett väntat språk. På en svensk sida i en engelskspråkig video bör inte textningen vara på tyska, om det inte finns särskilda skäl.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.2.4

Roller:

Redaktörer.

Ämnen:

Ljud och video.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

En syntolkning förklarar vad som händer visuellt i videon. Detta görs ofta som en separat video, men kan också göras som ett extra ljudspår som användaren kan välja att slå på och stänga av.

Om speakerrösten i videon ger all väsentlig information om vad som sker i bild behövs ingen separat syntolkning.

Exempel på syntolkad video https://www.youtube.com/watch?v=O7j4_aP8dWA

Så här testar du

Kontrollera om det finns videor som inte sänds live.

Om det finns, kontrollera om det finns syntolkade versioner, eller om syntolkning är inbyggd i videospelaren/videon.

Om det finns en syntolkning, kontrollera att den ger all väsentlig visuell information.

Om det inte finns en syntolkning, kontrollera om videon innehåller visuell information som inte förmedlas med ljud, med exempelvis en speakerröst. Om sådan information finns bryter videon mot den här riktlinjen.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 1.2.5
EN 301 549: 9.1.2.5

Roller:

Utvecklare.
UX.

Ämnen:

Formulär.

Standarder:

-

Förklaring

Informationen i placeholder texter återges även på andra sätt

Så här testar du

Kontrollera om det finns formulärsfält med placeholdertexter. I bildexemplet nedan visas ett fält för personnummer. I fältet finns en placeholder med texten "ååååmmddxxxx".

Fält för att mata in personnummer.

Eftersom texten i fältet även finns under fältet är den här punkten uppfylld för exemplet. Notera att texten under fältet måste kopplas till fältet på ett korrekt sätt, men det är en fråga för en annan punkt i checklistan och är inte relevant för den här punkten.

Om det finns, kontrollera att informationen även är tillgänglig när användaren börjat fylla i fältet. Försvinner informationen är inte den här riktlinjen uppfylld.

Ett acceptabelt undantag är små sökfält i sidhuvudet. Om det bara står "sök" eller "sök på webbplatsen" i sökfältet och inte bredvid är det ok, men det är givetvis bättre om det även står bredvid eller ovanför fältet.

Resultat från det automatiska verktyget (1)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

Ingen koppling

Roller:

Utvecklare.

Ämnen:

Formulär.
Länkar.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Det här gäller formulärsobjekt, länkar, knappar och andra interaktiva objekt. Alla sådana objekt måste vara möjliga att förstå även för användare som inte kan se. Exempelvis ska länkar har tydliga länktexter som förklarar länkens funktion, knappar ska ha tydliga knapptexter, och formulärsobjekt ska beskrivas i ledtexter som kopplas med label-element. Om det inte är möjligt så kan även attributet aria-label användas för att ge en beskrivning.

Kravet innebär också att status ska vara beskrivet om det är relevant, exempelvis om en kryssruta är vald eller inte, om ett expanderbart område är utfällt eller inte.

Den här punkten angränsar till flera andra punkter i checklistan, syftet här är att fånga upp alla fall som inte tydligt hör in under en annan punkt.

Det är viktigt att du testar att alla objekt är beskrivna med en skärmläsare, både på dator och mobil.

Så här testar du

Lättast kontrollerar du detta genom att testa webbplatsen med skärmläsare.

Säkerställ att alla interaktiva objekt som formulärsobjekt (textfält, kryssrutor, datepickers…), knappar och länkar beskrivs på ett bra sätt till användarna.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Resultat från det automatiska verktyget (3)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 4.1.2
EN 301 549: 9.4.1.2

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Ramar.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Iframe används för att visa innehåll från en annan websida i den aktuella webbsidan. Detta görs ofta när man exempelvis vill lägga in en videospelare, ett Twitterflöde eller någon annan form av applikation eller tredjepartslösning.

Gravt synskadade användare kan välja att låta hjälpmedlet tolka innehållet i ramen eller hoppa över den. För att de ska ha en aning om innehållet krävs det då ett title-attribut som förklarar innehållet.

Så här testar du

Använd http://ace.useit.se för att testa sidan. Om det finns iframe-element utan en beskrivande title-text kommer det att rapporteras som ett fel.

Klicka på fliken för ramar i resultattabellen för att se vilka ramar som finns och vilka title-texter de har. Varje ram ska ha en kort text i attributet title som förklarar vad ramen har för innehåll.

Resultat från det automatiska verktyget (2)

Genomfört test:

Verktyget har hittat det här felet på 6% av de undersökta sidorna. Detta innebär att det finns avsteg, men du måste bedöma hur allvarliga de är.

Antalet ramar som saknar beskrivning. En beskrivning kan läggas i title-attributet, eller i aria-label, eller kopplas till ramen med aria-labelledby eller aria-describedby.
(i snitt för de sidor där felet återfinns)

Visar de 4 vanligaste avstegen av totalt 4:

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<iframe src="https://www.google.com/maps/d/embed?mid=1pcmEwIHTGLY4N2jPV6VLVO-eezzD3pGv&amp;hl=sv" width="520" height="520">
```
Påverkade sidor:
- Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se
Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker bara upp innan skript har aktiverats.
```
<iframe width="500" height="281" src="https://www.youtube.com/embed/TVeijwWITLc?feature=oembed" frameborder="0" allowfullscreen>
```
Påverkade sidor:
- Tema Kommunen som arbetsgivare, Ånge kommun | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/2017/02/05/kommunen-som-arbetsgivare/
Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker bara upp efter att skript aktiverats.
```
<iframe width="500" height="281" src="https://www.youtube.com/embed/TVeijwWITLc?feature=oembed" frameborder="0" allowfullscreen="">
```
Påverkade sidor:
- Tema Kommunen som arbetsgivare, Ånge kommun | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/2017/02/05/kommunen-som-arbetsgivare/
Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker upp före att skript aktiverats och finns kvar efteråt.
```
<iframe width="560" height="315" src="https://www.youtube.com/embed/6qDtcwbaBCs" frameborder="0" allowfullscreen="allowfullscreen">
```
Påverkade sidor:
- Tjänster 2020 | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/ansokan/tjanster-2019-2020/

Genomfört test:

Verktyget har letat efter möjliga fel men inte hittat några sådana.

Antalet ramar som inte har en beskrivning i title-attributet, aria-label eller aria-labelledby. Att lägga en beskrivning i aria-describedby eller med andra metoder är inte lika robust och risken är att användarna missar informationen.

Punkten har fått en preliminär bedömning men du ska alltid kontrollera punkten manuellt.

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 4.1.2
EN 301 549: 9.4.1.2

Roller:

Utvecklare.
UX.

Ämnen:

Bilder och animationer.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Serverbaserade bildkartor är gränssnitt där användaren kan flytta runt i en yta, eventuellt zooma in och ut, och där ytan visar nya vyer beroende på användarens interaktioner. Ett vanligt exempel är förstås Google maps, men det behöver egentligen inte handla om traditionella kartor.

Den här typen av lösningar kan vara utmanande för användare med hjälpmedel, främst användare som är gravt synskadade. Det bör därför finnas alternativ till den här typen av tjänst. Om du exempelvis har en karta som visar adressen för ert kontor bör du också ge adressen i form av text i anslutning till kartan. I mer komplexa lösningar kan du kombinera bildkartan med en sökfunktion där användaren kan söka fram information som både visas i kartan och som text.

Så här testar du

Om det finns en serverbaserad bildkarta, säkerställ att all viktig information går att få fram i text också.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.1.1
EN 301 549: 9.1.1.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Rubriker.
Texter.

Standarder:

-

Förklaring

Rubrikstrukturen på alla sidor inleds med en rubrik kodad med elementet h1

Så här testar du

Använd ACE (http://ace.useit.se för att testa sidorna.

Klicka på fliken Rubriker i tabellen och kontrollera rubrikstrukturen.

Inleds strukturen med en <h1> rubrik som inte är tom?

Om du inte kan använda ACE på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv

Resultat från det automatiska verktyget (1)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

Ingen koppling

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Rubriker.
Texter.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Använd i första hand html-elementen h1 till h6. Om det inte är möjligt går det att istället använda WAI-ARIA.

Så här testar du

Använd ACE (http://ace.useit.se för att testa sidorna.

Klicka på fliken Rubriker i tabellen och kontrollera rubrikstrukturen.

Kontrollera de texter som markerats som misstänkta rubriker. Kontrollera också att rubrikstrukturen som återges i verktyget matchar den visuella rubrikstrukturen på sidan. Alla rubriker i innehållet och sidfoten ska vara kodade som rubriker. Finns det flera undantag eller undantag där viktiga rubriker inte kodats som rubriker är inte den här riktlinjen uppfylld.

Om du inte kan använda ACE på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv

Resultat från det automatiska verktyget (2)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Rubriker.
Texter.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

H1 ska följas av H1 eller H2. En H2 rubrik ska följas av H1, H2 eller H3 och så vidare. Hoppa exempelvis inte direkt från H1 till H4.

Så här testar du

Använd ACE (http://ace.useit.se för att testa sidorna.

Klicka på fliken Rubriker i tabellen och kontrollera rubrikstrukturen.

Kontrollera att rubrikstrukturen inte hoppar över nivåer, exempelvis går direkt från <h1> till <h3>.

Om du inte kan använda ACE på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv

Resultat från det automatiska verktyget (1)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Texter.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Punktlistor kodas med elementen ul och li.

Numrerade listor kodas med elementen ol och li.

Definitionslistor kodas med elementen dl, dt och dd.

Så här testar du

Kontrollera att information som listas också har kodats som listor. Använd ett verktyg för att visa listornas kod direkt i sidan.

Du kan exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Texter.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

https://www.w3.org/WAI/tutorials/page-structure/content/#blockquote

https://www.w3.org/TR/WCAG20-TECHS/H49

Så här testar du

Om sidorna innehåller citat behöver du kontrollera hur de är kodade.

Visa sidans html-kod genom att exempelvis trycka F12 i Firefox, Chrome eller Internet Explorer. Välj verktyget för att välja objekt på sidan uppe till vänster, klicka på citatet och kontrollera hur det är kodat i HTML-koden.

Korta citat, citat som utgör en mening eller mindre, är kodade med <q>.

Längre citat som utgör egna stycken är kodade med <blockquote>

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Tabeller.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

...eller

Så här testar du

Använd http://ace.useit.se för att testa sidorna.

Klicka på flikarna under Tabeller i resultattabellen.

Kontrollera att alla tabeller har korrekta rubriker (alla rad- och kolumnrubriker ska vara kodade med elementet <th>). Kontrollera också att <th> elementen har scope som anger om de avser raden eller kolumnen.

I mer komplexa tabeller med flera rader med kolumnrubriker, eller flera kolumner med radrubriker behöver varje rubrik identifieras med ett unikt id-värden. Varje datacell måste sedan referera till sina rubriker med attributet headers.

<th id=”th1”>…

Den här tekniken kan också användas på mindre tabeller, så även en liten tabell kan vara korrekt om den saknar scope, så länge alla th-element har id värden och alla dataceller refererar korrekt till sina rubriker.

Om du inte kan använda ACE på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv för att skriva ut tabellkoden direkt i sidan och kontrollera att tabellerna är korrekt kodade.

Resultat från det automatiska verktyget (3)

Genomfört test:

Tabellcell som har en felaktig referens till en rubrik

Verktyget har letat efter fel men inte hittat några. Detta är bra, men det kan finnas fel som verktyget inte har hittat så du bör kontrollera det maneullt också.

Antalet felaktiga id-referenser i attributet headers i tabellcellerna. Attributet headers ska används för att referera till id-värden på rubrikceller i tabellen.

Genomfört test:

Rubrikcell i en tabell utan koppling till dataceller

Verktyget har letat efter fel men inte hittat några. Detta är bra, men det kan finnas fel som verktyget inte har hittat så du bör kontrollera det maneullt också.

Antalet rubrikceller som varken har scope eller id-värde, då finns det inget som kan ange vilka dataceller de avser.

Genomfört test:

Tabellen har ingen rubrikcell i översta raden

Verktyget har hittat det här felet på 2% av de undersökta sidorna. Detta är bra, men det kan finnas fel som verktyget inte har hittat så du bör kontrollera det maneullt också.

Antalet tabeller utan rubrikceller i den översta raden. Om det varken finns en rad- eller några kolumnrubriker är det inte en korrekt datatabell.
(i snitt för de sidor där felet återfinns)

Visar de 2 vanligaste avstegen av totalt 2:

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker bara upp innan skript har aktiverats.

<table class=" alignleft" style="width: 725px;" cellspacing="210" cellpadding="0"> <tbody> <tr style="height: 75px;"> <td style="width: 235px; height: 75px; text-align: left;"> <img width="185" height="264" class="alignnone wp-image-1133 size-portrait" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-185x264.png" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-185x264.png 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-210x300.png 210w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-370x529.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder.png 529w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 4), 185px"> <div class="sv-text-portlet-content"> <h3 class="subheading" id="h-AnnelieASundstrom">Annelie A. Sundström</h3> </div> <div class="sv-text-portlet sv-use-margins" id="svid12_4b88eae5143003b91d51041"> <div id="Roll"></div> <div class="sv-text-portlet-content"> <p class="normal">Verksamhetsutvecklare<br> Ånge kommun</p> </div> </div> </td> <td style="width: 235px; height: 75px; text-align: left;"> <img width="185" height="264" class="alignnone wp-image-1137 size-portrait" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-185x264.png" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-185x264.png 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-210x300.png 210w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-370x529.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh.png 529w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 4), 185px"> <div class="sv-text-portlet-content"> <h3 class="subheading" id="h-DouglasHelsing">Douglas Helsing</h3> </div> <div class="sv-text-portlet sv-use-margins" id="svid12_4b88eae5143003b91d510ce"> <div id="Roll-0"></div> <div class="sv-text-portlet-content"> <p class="normal">Planarkitekt<br> Nordanstigs kommun</p> </div> </div> </td> <td style="width: 235px; height: 75px; text-align: left;"> <img width="185" height="264" class="alignnone wp-image-1135 size-portrait" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-185x264.png" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-185x264.png 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-210x300.png 210w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-370x529.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh.png 529w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 4), 185px"> <div class="sv-text-portlet-content"> <h3 class="subheading" id="h-JimHolmlund">Jim Holmlund</h3> </div> <div class="sv-text-portlet sv-use-margins" id="svid12_4b88eae5143003b91d51412"> <div id="Roll-1"></div> <div class="sv-text-portlet-content"> <p class="normal">Inköp och upphandling<br> Sundsvalls kommun</p> </div> </div> </td> </tr>

Påverkade sidor:

Traineer 2018/2019 | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/traineegrupper/traineer2018-2019/

Det här avsteget förekommer på 1 av totalt 50 undersökta sidor.
Felet dyker bara upp efter att skript aktiverats.

<table class=" alignleft" style="width: 725px;" cellspacing="210" cellpadding="0"> <tbody> <tr style="height: 75px;"> <td style="width: 235px; height: 75px; text-align: left;"> <img width="185" height="264" class="alignnone wp-image-1133 size-portrait" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-185x264.png" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-185x264.png 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-210x300.png 210w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder-370x529.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-placeholder.png 529w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 4), 185px"><p></p> <div class="sv-text-portlet-content"> <h3 class="subheading" id="h-AnnelieASundstrom">Annelie A. Sundström</h3> </div> <div class="sv-text-portlet sv-use-margins" id="svid12_4b88eae5143003b91d51041"> <div id="Roll"></div> <div class="sv-text-portlet-content"> <p class="normal">Verksamhetsutvecklare<br> Ånge kommun</p> </div> </div> </td> <td style="width: 235px; height: 75px; text-align: left;"> <img width="185" height="264" class="alignnone wp-image-1137 size-portrait" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-185x264.png" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-185x264.png 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-210x300.png 210w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh-370x529.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-dh.png 529w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 4), 185px"><p></p> <div class="sv-text-portlet-content"> <h3 class="subheading" id="h-DouglasHelsing">Douglas Helsing</h3> </div> <div class="sv-text-portlet sv-use-margins" id="svid12_4b88eae5143003b91d510ce"> <div id="Roll-0"></div> <div class="sv-text-portlet-content"> <p class="normal">Planarkitekt<br> Nordanstigs kommun</p> </div> </div> </td> <td style="width: 235px; height: 75px; text-align: left;"> <img width="185" height="264" class="alignnone wp-image-1135 size-portrait" alt="" src="http://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-185x264.png" srcset="https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-185x264.png 185w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-210x300.png 210w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh-370x529.png 370w, https://traineesundsvallsregionen.se/wp-content/uploads/2019/04/trainee-jh.png 529w" sizes="(max-width: 544px) calc(100vw-1.875em), (max-width: 992px) calc(84vw / 4), 185px"><p></p> <div class="sv-text-portlet-content"> <h3 class="subheading" id="h-JimHolmlund">Jim Holmlund</h3> </div> <div class="sv-text-portlet sv-use-margins" id="svid12_4b88eae5143003b91d51412"> <div id="Roll-1"></div> <div class="sv-text-portlet-content"> <p class="normal">Inköp och upphandling<br> Sundsvalls kommun</p> </div> </div> </td> </tr>

Påverkade sidor:

Traineer 2018/2019 | Trainee Sundsvallsregionen - https://traineesundsvallsregionen.se/traineegrupper/traineer2018-2019/

Punkten har fått en preliminär bedömning men du ska alltid kontrollera punkten manuellt.

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Tabeller.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Använd html-elementen table, thead, tbody, caption, tr, th, td eller om det inte är möjligt, motsvarande WAI-ARIA roller.

Så här testar du

Använd http://ace.useit.se för att testa sidorna.

Klicka på flikarna under Tabeller i resultattabellen.

Se på sidan om det finns information som ser ut att vara en datatabell. Kontrollera att den också är med i listan över sidans tabeller i ACE. Om så är fallet är riktlinjen uppfylld.

Om den inte är det, så är den inte kodad som en tabell. Då måste du testa sidan med skärmläsare för att verifiera att informationen är enkel att förstå ändå.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Säkerställ att informationen är enkel att förstå.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Om du inte kan använda ACE på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv för att skriva ut tabellkoden direkt i sidan.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.
UX.

Ämnen:

Tabeller.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Använd <caption> elementet.

Så här testar du

Kontrollera om det finns en överskrift direkt före tabellen.

Om det finns, visa sidans html-kod genom att exempelvis trycka F12 i Firefox, Chrome eller Internet Explorer. Välj verktyget för att välja objekt på sidan uppe till vänster, klicka på överskriften och kontrollera att det antingen är en <caption> eller en rubrik (elementen <h1> till <h6>).

Om tabellerna har en beskrivande överskrift, och den inte är kodad med <caption> eller rubrikkod är riktlinjen inte uppfylld.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.

Ämnen:

Tabeller.

Standarder:

-

Förklaring

Använd css för att skapa en layout. Använd enbart tabeller för riktig tabelldata.

Så här testar du

Använd ett verktyg i stil med Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv för att skriva ut tabellkoden direkt i sidan. Kontrollera om tabellen innehåller information som inte är tabelldata. Om så är fallet är riktlinjen inte uppfylld.

Resultat från det automatiska verktyget (1)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

Ingen koppling

Roller:

Utvecklare.
UX.

Ämnen:

Formulär.

Standarder:

-

Förklaring

Undvik exempelvis select listor för stora datamängder eller när det är mycket få val.

Använd type="number" när det är tal som ska matas in.

Använd radioknappar när endast ett alternativ ska väljas, och använd kryssrutor när användaren kan komma att välja flera alternativ samtidigt.

Använd lämpliga input types, exempelvis number, password, email, date and time.

Så här testar du

Om det finns formulär på sidan, kontrollera att rätt typer av formulärsobjekt valts för att underlätta för användaren. Om det finns flera problematiska objekt, exempelvis en <select>-lista med över 50 alternativ och utan möjlighet att enkelt hoppa i listan, eller ett fält för e-postadress som inte kodats med type=”email”, är riktlinjen underkänd.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

Ingen koppling

Roller:

Utvecklare.
UX.

Ämnen:

Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Felmeddelandet måste klargöra var felet återfinns.

Så här testar du

Om det finns formulär, posta dem med tydliga fel och kontrollera att du får meddelanden i text som förklarar att det blivit fel och var felet återfinns (exempelvis: ”Du har angivit en felaktig e-postadress”).

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 3.3.1
EN 301 549: 9.3.3.1

Roller:

Utvecklare.

Ämnen:

Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Detta kan göras genom att lägga felmeddelandet i label-elementet som avser formulärsobjektet, eller med exempelvis aria-describedby.

Så här testar du

Lättast kontrollerar du detta genom att testa webbplatsen med skärmläsare.

Säkerställ att alla felmeddelanden som avser specifika formulärsobjekt, läses upp när du har fokus på det formulärsobjektet.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Utvecklare.

Ämnen:

Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Tänk på att elementet legend måste vara det första elementet i det fieldset det avser.

Så här testar du

Se på varje formulär och kontrollera om det finns grupper av objekt, exempelvis en grupp med radioknappar eller kryssrutor, eller om det finns en grupp inmatningsfält för en leveransadress eller fakturaadress. Alla sådana grupper ska kodas med <fieldset> och ha en <legend> överst i fieldsetet som klargör gruppens syfte.

Visa sidans html-kod genom att exempelvis trycka F12 i Firefox, Chrome eller Internet Explorer. Välj verktyget för att välja objekt på sidan uppe till vänster, klicka på det första formulärsobjektet i gruppen och se efter i koden om det finns ett fieldset och en legend för gruppen.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Utvecklare.

Ämnen:

Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Detta görs primärt genom att lägga ledtexten i ett label-element och associera det med formulärsobjektet.

Det kan, om nödvändigt, också göras med aria-label om beskrivningen inte ska synas visuellt.

Så här testar du

Använd http://ace.useit.se för att testa sidorna.

Klicka på flikarna under Formulär i resultattabellen.

Kontrollera att alla formulärsobjekt har beskrivningar inlagda med label-element, aria-labelledby eller aria-label. Beskrivningarna ska vara tillräckliga för att användaren ska kunna använda formulärsobjektet.

Om du inte kan använda ACE på din webbplats kan du istället exempelvis använda Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv för att kontrollera formulärsobjekten och ledtexterna.

Resultat från det automatiska verktyget (3)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Utvecklare.

Ämnen:

Kod.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Detta är viktigt för skärmläsaranvändare eftersom hjälpmedlets läsordning bestäms av ordningen i koden.

En bra utgångspunkt är att innehållet ska vara logiskt och begripligt även när css stängts av i webbläsaren.

Så här testar du

Använda ett verktyg som Web Developers toolbar för Firefox (https://addons.mozilla.org/en-US/firefox/addon/web-developer/ eller Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=sv för att blockera all css kod.

När css är blockerat, kontrollera ordningen som innehållet presenteras i på sidan och verifiera att ordningen är logisk.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.2
EN 301 549: 9.1.3.2

Roller:

Utvecklare.

Ämnen:

Kod.
Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Om det finns en synlig text som beskriver ett interaktivt objekt på sidan så ska den texten också inkluderas i den beskrivning som tillgängliggörs för hjälpmedel.

Så här testar du

Lättast kontrollerar du detta genom att testa webbplatsen med skärmläsare.

Säkerställ att den visuella instruktionen/ledtexten upprepas av skärmläsaren när du har fokus på formulärsobjektet. Uppläsningen ska innehålla hela den visuella texten, men kan även innehålla mer information.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 2.5.3
EN 301 549: 9.2.5.3

Roller:

Utvecklare.

Ämnen:

Kod.
Struktur.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Aria-expanded="true" anger att ytan är utfälld.

Aria-expanded="false" anger att ytan är ihopfälld.

Så här testar du

Du måste kontrollera sidan både i smalt fönster och i stort webbläsarfönster för att säkerställa att du både kontrollerar objekt som bara visas i mobilvyn och objekt som bara visas i bred vy.

Leta efter knappar och länkar som expanderar ytor. Det kan exempelvis vara en meny-knapp.

Visa sidans html-kod genom att exempelvis trycka F12 i Firefox, Chrome eller Internet Explorer. Välj verktyget för att välja objekt på sidan uppe till vänster, klicka på de länkar/knappar som expanderar/kollapsar ytor och säkerställ att de har attributet aria-expanded, och att det sätts till true när ytan är utfälld, och false när den är kollapsad.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 4.1.2
EN 301 549: 9.4.1.2

Roller:

Utvecklare.
UX.

Ämnen:

Kod.
Struktur.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Detta måste göras på ett sätt så att det inte blir störande för användarna. Viktiga uppdateringar och meddelanden måste förmedlas så fort som möjligt, medan mindre viktiga uppdateringar kanske inte alls ska förmedlas till användaren.

Attributet aria-live kan användas för en del sådana här situationer.

Du kan också överväga att använda WAI-ARIA rollerna "alert" och "alertdialog" för att markera meddelanden som ska avbryta användaren.

Så här testar du

Lättast kontrollerar du detta genom att testa webbplatsen med skärmläsare.

Säkerställ att alla statusmeddelanden som visas, exempelvis om antalet sökresultat uppdateras dynamiskt när du fyller i ett sökfält, eller ett meddelande om att en vara lagts till en kundvagn, också presenteras av hjälpmedlen. Det kan finnas undantag när det skulle bli för störande, exempelvis om en sida visar aktieinformation för många aktier och dessa konstant uppdateras.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 4.1.3
EN 301 549: 9.4.1.3

Roller:

Utvecklare.

Ämnen:

Kod.
Struktur.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Ett exempel kan vara en chat.

Du ser att meddelanden som ligger till vänster i ytan är från den andra parten i chatten. Meddelanden till höger är dina.

Den här informationen måste också finnas i koden så att en användare som inte ser presentationen förstår vilka meddelanden som kommer från vilken part i chatten.

Så här testar du

Lättast kontrollerar du detta genom att testa webbplatsen med skärmläsare.

Säkerställ att informationen och relationer mellan objekt på sidan är begriplig även om du inte ser hur informationen är placerad visuellt.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Utvecklare.

Ämnen:

Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Detta handlar inte om vanliga ledtexter/etiketter utan om hjälptexter och fördjupade beskrivningar. Om användaren ska mata in sitt personnummer och det under fältet framgår på vilket format det ska göras så är det den typen av information som den här punkten avser.

Du kan använda aria-labelledby eller aria-describedby för att koppla samman en hjälptext med ett formulärsobjekt.

Använd aria-labelledby när beskrivningen ger en fullständig beskrivning av syftet med formulärsobjektet.

Använd aria-describedby när hjälptexten ger en utökad beskrivning, och där det redan finns en korrekt kopplad ledtext.

Så här testar du

Lättast kontrollerar du detta genom att testa webbplatsen med skärmläsare.

Säkerställ att alla hjälptexter och instruktioner presenteras i den kontext de avser (om de exempelvis avser en specifik funktion ska de presenteras när användaren är vid den funktionen).

Om det exempelvis finns en fördjupande förklaring under fältet, så ska den informationen också läsas upp va en skärmläsare när användaren har fokus i fältet.

Exempel på fördjupningsförklaring.

Det ska inte krävas att användaren läser texter mellan formulärsfälten eftersom få användare navigerar på det sättet i formulär. Sätt fokus på fältet med skärmläsaren och lyssna efter vad skärmläsaren säger.

Det här gäller även för instruktioner som ligger inne själva fältet:

Placeholder text för ett personnummerfält.

De ska alltså läsas av hjälpmedlen när användaren satt fokus i fältet.

Om hjälptexter och instruktioner är inlänkade/eller placerade bakom ikoner, säkerställ att de också är enkla att få fram/öppna.

Testa med åtminstone följande:

NVDA (https://www.nvaccess.org/ med Firefox och Chrome. Testa både i ett brett fönster och ett smalt fönster som tvingar webbplatsen in i mobilläget.
VoiceOver på en iPhone med Safari.

Lär dig hur skärmläsarna fungerar:

Introduktion till NVDA (YouTube-video på engelska): https://www.youtube.com/watch?v=Jao3s_CwdRU
Introduktion till VoiceOver på iOS (YouTube-video på engelska): https://www.youtube.com/watch?v=bCHpdjvxBws

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.1
EN 301 549: 9.1.3.1

Roller:

Redaktörer.
Utvecklare.
UX.

Ämnen:

Texter.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Undvik instruktioner som "klicka på knappen till höger" och liknande.

Du kan använda riktning i dina instruktioner, men du måste ha något mer, exempelvis "Klicka på knappen 'Ja' till höger".

Så här testar du

Sök efter “till höger” och ”till vänster” i gränssnittet. Om det finns sådana texter, kontrollera att det finns något mer än bara riktning som klargör var ett objekt eller en funktion återfinns. Det är exempelvis ok om det står ”Du hittar länken till e-tjänsten till höger under rubriken ’E-tjänster’.”.

Instruktioner som, "du hittar rapporten nedanför" fungerar.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.3.3
EN 301 549: 9.1.3.3

Roller:

Redaktörer.
Designers.

Ämnen:

Färg och form.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Färg används inte som det enda sättet att förmedla information eller särskilja objekt

Så här testar du

Kontrollera att all information är begriplig även om användaren inte uppfattar färg. Det kan exempelvis handla om diagram, instruktioner eller illustrationer. Är du osäker kan du prova att skriva ut sidan i gråskala.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Kopplingar till standarder

WCAG 2.1 SC 1.4.1
EN 301 549: 9.1.4.1

Roller:

Designers.

Ämnen:

Länkar.
Färg och form.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Du kan använda understrykning, ikoner, fetad text eller andra metoder som du enbart använder på länkar.

Det räcker inte med understrykning när muspekaren hovrar över länken.

Så här testar du

Börja med att säkerställa att inte webbläsaren automatiskt stryker under länkar. Öppna inställningarna, sedan kan det se lite olika ut beroende på webbläsare, men i Firefox går du till "Språk och utseende" och klickar på knappen "Färger...".
Gå tillbaka till webbplatsen, surfa runt och kontrollera att länkar skiljer sig med mer än färg från vanlig text. Bilderna nedan visar en länk som bara skiljer sig med färg, Det här är ett exempel på en underkänd länk.

Resultat från det automatiska verktyget (0)

Motivering till bedömning av punkten

Max 2000 tecken

Lista med registrerade avsteg/problem

Det finns inga problem eller rekommendationer registrerade på den här punkten.

Åtgärder

Ska åtgärdasHar åtgärdatsSka inte åtgärdas

Kommentar (Max 2000 tecken):

Ansvarig:

Datum tidsfrist/åtgärdat (åååå-mm-dd):

Kopplingar till standarder

WCAG 2.1 SC 1.4.1
EN 301 549: 9.1.4.1

Roller:

Utvecklare.

Ämnen:

Formulär.

Standarder:

EN 301 549.
WCAG 2.1 nivå AA.

Förklaring

Autocomplete används för att underlätta för hjälpmedel och webbläsare att hjälpa användaren att fylla i information. De vanligaste uppgifterna som användare burkar fylla i har fördefinierade autocompletevärden. Genom att använda dem gör man det tydligt för webbläsare och hjälpmedel att det är just den informationen som ska matas in. Information om attributet och möjliga värden finns här: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Så här testar du

Om ett formulär innehåller objekt som ber användaren om information som nämns i listan på den här sidan:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Då måste formulärsobjektet använda attributet autocomplete i enlighet med standarden.

Visa sidans html-kod genom att exempelvis trycka F12 i Firefox, Chrome eller Internet Explorer. Välj verktyget för att välja objekt på sidan uppe till vänster, klicka på respektive formulärsobjekt du vill kontrollera och verifiera att autocomplete används korrekt.