Checklista för tillgänglighet

Alla informativa bilder ska ha alt-attribut med beskrivande text.

Alt-text ska förmedla samma information som bilden visar.

Var koncis – max 150 tecken om möjligt.

Beskriv vad bilden visar, inte att det är en bild. Undvik ”bild av…” eller ”Foto på”. Däremot kan du ange ”Illustration:” för illustrationer.

Dekorativa bilder ska ha tomt alt-attribut: alt=””.Eller använd CSS background-images istället.

Använd role=”presentation” eller aria-hidden=”true” för dekorativa bilder som bårdar.

Ikoner som bara är visuella ska också döljas.

Diagram, grafer och komplexa illustrationer behöver utförliga beskrivningar.

Använd aria-describedby eller longdesc för längre beskrivningar. Alternativt: ge samma information i tillgänglig text på sidan.

Exempel: datatabell för statistikdiagram, textförklaring för infografik.

När bild är en länk, beskriver alt-text vart länken leder. Inte vad bilden visar, utan vad som händer vid klick.

Exempel: alt=”Gå till startsidan” inte alt=”Företagslogotyp”.

Om både bild och text är samma länk, använd alt=”” på bilden.

Funktionella ikoner (som knappar) ska ha aria-label eller synlig text. Exempel: <button aria-label=”Meny”>☰</button>.

Om ikon är tillsammans med text, använd aria-hidden=”true” på ikonen.

Font-ikoner behöver också tillgängliga namn om de är funktionella.

Använd <title> och <desc> inuti SVG för beskrivningar. Eller använd aria-label på SVG-elementet.

För dekorativa SVG: använd aria-hidden=”true” och role=”presentation”.

Testa att SVG läses korrekt av skärmläsare.

GIF-animationer och automatiskt uppdaterande bilder ska kunna pausas.

Ge användare kontroll över animering (paus-knapp).

Animationer som är längre än 5 sekunder ska kunna stoppas.

Undvik blinkande innehåll (mer än 3 gånger per sekund).

Använd <figure> och <figcaption> för att koppla bildtext till bild.

Bildtext ska komplettera alt-text, inte duplicera den.

Alt-text = vad bilden visar, Bildtext = kontext eller extra information.

Testa att skärmläsare förstår kopplingen mellan bild och text.

Använd inte CSS background-images för informativt innehåll.

Bakgrundsbilder har ingen alt-text och är osynliga för skärmläsare.

Om bakgrundsbild måste användas, ge textalternativ i HTML.

Använd <img> för bilder med viktig information.

Bild-CAPTCHA ska ha ljudalternativ eller annan modalitet.

Förklara syftet med CAPTCHA.

Överväg moderna alternativ som hCaptcha eller reCAPTCHA v3.

Ge flera alternativ för olika funktionsnedsättningar.

Använd riktig text istället för bilder av text när det är möjligt.

Text i HTML är skalbar, sökbar och översättningsbar.

Undantag: logotyper, text som är en väsentlig del av bilden.

Om text i bild används, säkerställ tillräcklig kontrast och läsbarhet.

Om text måste vara i bild, säkerställ minst 4.5:1 kontrast.

Testa kontrast mellan texten och bakgrunden i bilden.

Använd kontrastverktyg för att verifiera.

Större text (18pt+) behöver minst 3:1 kontrast.

Bilder ska förbli synliga och användbara vid 200% zoom.

Använd responsiva bilder (srcset, sizes) för olika skärmstorlekar.

’Bildtext och bilder ska inte överlappa eller klippas av vid zoom.

Testa bildvisning på små skärmar och vid inzoomning.

Varje formulärfält (input, textarea, select) ska ha en synlig label.

Labels ska vara beskrivande och tydligt kopplade till rätt fält. Använd <label for=”id”> eller aria-labelledby.

Placera labels ovanför eller till vänster om fältet för bäst läsbarhet.

Använd <label for=”id”> för att koppla label till formulärsfält.

Eller använd aria-labelledby eller aria-label.

Skärmläsare ska kunna identifiera vilket fält som hör till vilken label.

Klick på label ska fokusera på tillhörande fält.

Markera obligatoriska fält med text (inte bara asterisk). Exempel: ”E-post (obligatoriskt)” eller ”Namn *” med förklaring.

Använd aria-required=”true” på obligatoriska fält.

Förlita dig inte bara på färg för att visa obligatoriska fält.

Felmeddelanden ska tydligt beskriva vad som är fel.

Visa vilket fält som har fel och varför.

Exempel: ”E-postadress saknar @-tecken” istället för bara ”Fel”.

Använd aria-describedby för att koppla felmeddelande till fält.

Använd <fieldset> och <legend> för att gruppera relaterade fält. Exempel: Adressfält, kontaktuppgifter, betalningsinformation.

Legend ska beskriva gruppens syfte. Särskilt viktigt för radioknappar och checkboxar.

Alla fält ska vara nåbara med Tab-tangenten.

Enter ska skicka formuläret (om det finns submit-knapp).

Space ska aktivera checkboxar och radioknappar.

Använd standard HTML-element (input, select, textarea).

Om formulär har tidsgräns, varna användaren i förväg.

Ge möjlighet att förlänga tiden innan timeout.

Minst 20 sekunder varning innan session löper ut.

Spara användarens data om möjligt vid timeout.

Ge instruktioner för komplexa fält (format, krav, begränsningar).

Placera instruktioner innan fältet, inte bara efter.

Använd aria-describedby för att koppla hjälptext till fält.

Exempel: ”Lösenord: Minst 8 tecken, en siffra och en stor bokstav”.

Placeholder försvinner när användaren börjar skriva.

Använd alltid en synlig label utöver placeholder.

Exempel på placeholder: placeholder=”[email protected]”.

Förlita dig aldrig bara på placeholder för att beskriva fältet.

Ge konkreta förslag på hur användaren kan rätta felet. Exempel: ”Lösenordet måste vara minst 8 tecken långt”.

Föreslå korrekta format (t.ex. ”Använd format: YYYY-MM-DD”).

Visa exempel på korrekt ifyllnad när det är lämpligt.

Formulärfält ska ha synlig fokusindikator vid tangentbordsnavigering.

Ta inte bort outline helt med CSS.

Fokusindikatorn ska ha minst 3:1 kontrast mot bakgrunden.

Fokusindikatorn ska vara minst 2 CSS-pixlar bred.

För juridiska, finansiella eller datarelaterade formulär: visa bekräftelsesida.

Låt användare granska inmatning innan slutgiltig bekräftelse.

Ge möjlighet att ångra eller ändra inskickade uppgifter. Exempel: Visa sammanfattning före köp, ”Är du säker?”-dialog.

Använd autocomplete-attribut för vanliga fält (name, email, tel, address). Exempel: <input type=”email” autocomplete=”email”>.

Hjälper användare med kognitiva funktionsnedsättningar.

Gör det enklare att fylla i formulär med assistansteknik.

Använd aria-live för att annonsera felmeddelanden dynamiskt.

Använd role=”alert” för viktiga felmeddelanden.

Fokusera på första fältet med fel efter validering.

Summera alla fel överst i formuläret om det finns flera. Summeringen bör ha en rubrik. Felen bör vara i en lista där varje punkt består av: fältnamnet som är en länk till fältet och felmeddelande som förklarar fel och lösning.

Text i formulärfält ska ha minst 4.5:1 kontrast.

Labels ska ha minst 4.5:1 kontrast mot bakgrund.

Placeholder-text ska också ha tillräcklig kontrast (men förlita dig inte på den).

Felmeddelanden ska ha tillräcklig kontrast.

Knappar ska ha synlig text eller aria-label.

Undvik knappar med bara ikoner utan text eller alternativ text.

Knapptext ska beskriva vad som händer när man klickar (t.ex. ”Skicka formulär” inte bara ”Skicka”).

Knapptext ska vara unik och beskrivande på sidan.

Använd <button> eller <input type=”button/submit”> istället för klickbara div:ar.

Knappar ska vara nåbara med Tab-tangenten.

Knappar ska aktiveras med Enter eller Space.

Ta inte bort fokus programmatiskt när användaren interagerar med knappen.

Knappar ska ha synlig fokusindikator vid tangentbordsnavigering.

Ta inte bort outline helt med CSS (använd istället anpassad fokusindikator).

Fokusindikatorn ska ha minst 3:1 kontrast mot bakgrunden.

Fokusindikatorn ska vara minst 2 CSS-pixlar bred.

Använd <button> för knappar som utför åtgärder på sidan.

Använd <a> för navigering till andra sidor.

Använd aldrig <div> eller <span> med onClick som knappar.

Om du måste använda annat element, lägg till role=”button” och tangentbordshantering.

Använd inte bara färg för att visa primär/sekundär knapp.

Lägg till ikoner, text eller border för att differentiera knapptyper.

Error-knappar ska inte bara vara röda utan även ha varningsikon eller text.

Använd form, position eller typografi tillsammans med färg.

Knapptext ska ha minst 4.5:1 kontrast mot knappbakgrund.

Ikoner i knappar ska ha minst 3:1 kontrast.

Testa kontrast för alla knapptillstånd (normal, hover, focus, disabled).

Använd kontrastverktyg för att verifiera

Länktext ska beskriva vart länken leder.

Undvik generiska texter som ”Klicka här”, ”Läs mer”, ”Här”.

Länktext ska vara begriplig även utan omgivande kontext.

Om samma länktext används flera gånger ska de leda till samma destination.

Använd <a href=””> för länkar, inte klickbara div:ar eller span:ar.

Länkar ska vara nåbara med Tab-tangenten.

Länkar ska aktiveras med Enter.

Ta inte bort tangentbordfokus eller hindra tangentbordsnavigering.

Använd inte bara färg för att visa att något är en länk.

Lägg till understrykning, fetstil, ikoner eller annan visuell indikator.

Om färg används, måste det finnas ett annat sätt att identifiera länken.

Besökta länkar kan ha annan färg men behöver också annan indikator.

Lägg till ”Hoppa till huvudinnehåll”-länk som första element på sidan. Kallas även för skipplänk.

Skipplänk ska vara synlig vid tangentbordsfokus.

Skipplänk ska länka till main-elementet eller huvudinnehållet.

Testa att skipplänken fungerar med tangentbord (Tab + Enter).

Länkar i brödtext ska vara understrukna eller ha annan visuell markör.

Om länkar bara är färgade ska kontrasten vara minst 3:1 mot omgivande text.

Vid hover/focus ska det finnas tydlig visuell förändring.

Understrykning är det säkraste sättet att markera länkar i text.

Länkar ska ha synlig fokusindikator vid tangentbordsnavigering.

Ta inte bort outline helt med CSS utan att ersätta med annan synlig indikator.

Fokusindikatorn ska ha minst 3:1 kontrast mot bakgrunden.

Fokusindikatorn ska vara minst 2 CSS-pixlar bred.

Länktext ska ha minst 4.5:1 kontrast mot bakgrunden.

Testa kontrast för alla länktillstånd (normal, hover, focus, visited).

Använd kontrastverktyg för att verifiera.

Om länken bara markeras med färg måste kontrasten vara 3:1 mot omgivande text.

Länktext ska vara begriplig helt utan omgivande text.

Användare ska förstå vart länken leder bara genom att läsa länktexten.

Särskilt viktigt för skärmläsaranvändare som navigerar mellan länkar.

Om flera ”Läs mer”-länkar finns, gör dem unika (t.ex. ”Om tjänsten”).

Länkar ska vara minst 44×44 CSS-pixlar (eller 24×24 för WCAG 2.2 Level AA).

Lägg till padding runt länktext för större klickområde.

Ge tillräckligt avstånd mellan länkar (minst 8px mellanrum).

Särskilt viktigt för touch-skärmar och användare med motoriska funktionsvariationer.

Varna användare om länkar öppnas i nytt fönster eller flik.

Lägg till text eller ikon som indikerar externa länkar.

Använd aria-label för att kommunicera ”öppnas i nytt fönster”.

Exempel: ”Läs mer (öppnas i nytt fönster)”.

Rubriker ska använda rubrikselement (h1-h6), inte bara formaterad text.

Rubrikshierarkin ska följa en logisk ordning (h1 → h2 → h3).

Hoppa inte över rubriknivåer (t.ex. h1 direkt till h3).

Varje sida ska ha exakt en h1.

Rubriker ska inte bara förlita sig på färg för att markeras.

Använd storlek, vikt (bold), eller spacing för att differentiera rubriker.

Kontrasten mellan rubrik och bakgrund ska minst vara 4.5:1.

Typsnitt ska vara läsbart även vid olika zoomnivåer.

Rubriker ska tydligt beskriva innehållet i det avsnitt de tillhör.

Undvik generiska rubriker som ”Mer information” eller ”Klicka här”.

Rubriker ska vara unika inom samma sida när det är möjligt.

Användare ska kunna förstå sidans struktur genom att bara läsa rubrikerna.

Dela upp långt innehåll i avsnitt med rubriker.

Använd rubriker för att organisera sidans struktur.

Varje meningsfullt innehållsavsnitt ska ha en rubrik.

Gör det enkelt att skanna och navigera sidan med skärmläsare.