De vanligaste tillgänglighetsfelen i kassan och hur du rättar dem
Sju tillgänglighetsfel som ofta stoppar köp i webbutikens kassa, med WCAG-kriterium och exempel på hur de rättas i HTML.
Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om tillgänglighetslagen, vänd dig till Post- och telestyrelsen (PTS).
Kassan är den del av en webbutik där ett tillgänglighetsfel kostar mest, eftersom kunden är på väg att betala. Nedan finns sju fel som ofta återkommer, vilket WCAG-kriterium de bryter mot (WCAG 2.1, nivå A och AA, som EN 301 549 hänvisar till) och hur de rättas. Termerna är desamma som i rapporterna från AccessAudit.
1. Formulärfält utan etikett
Kriterium: 1.3.1 Information och relationer, 3.3.2 Etiketter eller instruktioner, 4.1.2 Namn, roll, värde.
Ett fält med bara platshållartext ("E-post") har ingen etikett. Platshållaren försvinner när man skriver, och många skärmläsare läser inte upp den på ett pålitligt sätt.
<!-- Fel -->
<input type="email" placeholder="E-post">
<!-- Rätt -->
<label for="epost">E-postadress</label>
<input type="email" id="epost" name="epost" autocomplete="email">
Attributet autocomplete hjälper kunder som fyller i uppgifter med hjälp av webbläsaren och uppfyller kriterium 1.3.5 för fält som rör personuppgifter.
2. Felmeddelanden som bara syns med färg
Kriterium: 1.4.1 Användning av färg, 3.3.1 Felidentifiering, 4.1.3 Statusmeddelanden.
Ett rött streck runt fältet säger ingenting till den som inte ser färgen. Ett felmeddelande som dyker upp utan att något annonserar det når inte heller en skärmläsare.
<label for="postnr">Postnummer</label>
<input id="postnr" name="postnr" aria-invalid="true" aria-describedby="postnr-fel">
<p id="postnr-fel" role="alert">Fyll i postnummer med fem siffror, till exempel 111 22.</p>
Skriv vad som är fel och hur det rättas. "Ogiltigt värde" hjälper ingen.
3. Fokus som försvinner i stegen
Kriterium: 2.4.3 Fokusordning, 2.4.7 Synligt fokus, 2.1.2 Ingen tangentbordsfälla.
Går man från steg 1 till steg 2 i kassan och fokus ligger kvar på en knapp som inte längre finns, börjar tangentbordsanvändaren om från sidans topp. Det händer ofta när kassan byter innehåll utan att ladda om sidan. Ett modalt fönster där man inte kan komma ut med tangentbordet är en fokusfälla.
Flytta fokus till rubriken i det nya steget:
<h2 id="steg2" tabindex="-1">Leverans</h2>
<script>
document.getElementById('steg2').focus();
</script>
Ta aldrig bort fokusmarkeringen utan att ersätta den:
/* Fel */
button:focus { outline: none; }
/* Rätt */
button:focus-visible { outline: 3px solid #1a4f8b; outline-offset: 2px; }
4. Knappar och länkar utan namn
Kriterium: 4.1.2 Namn, roll, värde, 2.4.4 Syfte med länk, 1.1.1 Innehåll som inte är text.
En knapp med bara en ikon, till exempel en papperskorg för att ta bort en vara, har inget namn för den som inte ser ikonen. Skärmläsaren säger bara "knapp".
<!-- Fel -->
<button class="ta-bort"><svg>...</svg></button>
<!-- Rätt -->
<button class="ta-bort" aria-label="Ta bort Linnepåse, 2 st ur varukorgen">
<svg aria-hidden="true">...</svg>
</button>
Namnet ska säga vad knappen gör och gärna vilken vara den gäller, eftersom en varukorg kan ha flera likadana knappar.
5. För låg kontrast
Kriterium: 1.4.3 Kontrast (minimum), 1.4.11 Kontrast för icke-textuellt innehåll.
Vanlig text behöver kontrasten 4,5:1 mot bakgrunden, stor text 3:1. Gränser på fält, ikoner och fokusmarkeringar behöver 3:1. Grå hjälptext på vit botten och ljusa knappar med vit text är de vanligaste felen. Kontrollera också hur knappar ser ut när muspekaren är över dem och när de har fokus, eftersom färgen ofta byts då.
Rättningen är att mörka texten eller bakgrunden tills kvoten klarar gränsen. Ett kontrastverktyg i webbläsarens utvecklarverktyg visar kvoten för valfritt element.
6. Tidsgräns utan varning
Kriterium: 2.2.1 Justerbar tidsgräns.
Har kassan en tidsgräns, till exempel att varukorgen töms efter 15 minuter, måste kunden kunna förlänga eller stänga av den, eller åtminstone få en varning innan tiden går ut och minst 20 sekunder på sig att förlänga. Annars förlorar den som behöver längre tid för att fylla i formulär, till exempel på grund av en motorisk funktionsnedsättning, sin varukorg.
<div role="alertdialog" aria-labelledby="tid-rubrik" aria-describedby="tid-text">
<h2 id="tid-rubrik">Sessionen går snart ut</h2>
<p id="tid-text">Din varukorg töms om 2 minuter.</p>
<button>Förläng med 20 minuter</button>
</div>
Kan man undvara tidsgränsen helt är det enklast.
7. Captcha utan alternativ
Kriterium: 1.1.1 Innehåll som inte är text, 2.1.1 Tangentbord.
En bildbaserad captcha ("markera alla bilder med trafikljus") går inte att lösa för den som inte ser bilderna. Kriteriet kräver att det finns ett alternativ som använder en annan sinnesmodalitet, och att captchan går att använda med tangentbord.
Rättning: använd en lösning som inte kräver att användaren löser en uppgift alls, till exempel ett dolt fält som bara skräppost fyller i (honeypot) eller en kontroll på serversidan, eller erbjud ett fungerande alternativ som en ljudvariant. Granska den captcha du använder: leverantörerna skiljer sig mycket åt.
I vilken ordning du rättar
Börja med det som stoppar ett köp helt: fält utan etikett, knappar utan namn, fokusfällor och captcha utan alternativ. Då kan en kund som använder tangentbord eller skärmläsare ta sig igenom kassan över huvud taget. Därefter kommer felmeddelanden, tidsgränser och fokus mellan stegen, som gör köpet svårare men sällan omöjligt. Kontrast och synlig fokus går ofta att rätta på ett ställe i stilmallen och slår då igenom i hela butiken.
Om kassan kommer från en plattform som Shopify eller WooCommerce är det ofta temat eller ett tillägg som orsakar felet. Kontrollera först om det finns en uppdatering eller en inställning, och kontakta annars leverantören med en konkret beskrivning av felet och kriteriet. Ett fel som du inte själv kan rätta ska ändå finnas med i din tillgänglighetsinformation, tillsammans med hur kunden kan nå dig om något inte fungerar.
Kontrollera själv med tangentbordet
Gå igenom hela köpresan med bara Tab, Skift+Tab, Enter och Esc. Kommer du ända till bekräftelsesidan, ser du var fokus är hela tiden, och går det att rätta ett fel utan musen, har du kommit förbi flera av de fel som listas ovan. Automatiska tester hittar bara en del av bristerna, och det som kräver bedömning, som om en alternativtext är rimlig, måste en människa granska.
Gratistestet på /tillganglighet
AccessAudits gratis test på butik.nightwave.se/tillganglighet läser källkoden på upp till fem sidor i din webbutik och rapporterar sådant som syns där, till exempel fält utan etikett, knappar utan namn, saknade alt-texter och språkmarkering. Det tar några minuter. Testet kontrollerar inte färgkontrast, synlig fokus eller tangentbordsnavigering, och det ersätter inte en fullständig granskning. Det är teknisk granskning mot WCAG, inte juridisk rådgivning.