Ett formulärfält utan korrekt kopplad etikett är det vanligaste fel vi stöter på i kontaktformulär, beställningssteg och inloggningsskärmar. Etiketten finns ofta där, visuellt snyggt placerad ovanför eller bredvid indatafältet, men den är inte tekniskt kopplad till fältet i källkoden. En skärmläsare läser då upp fältet som "redigera, tomt" utan att berätta vad fältet är till för.
Problemet uppstår oftast för att en etikett och ett indatafält ser ut att höra ihop visuellt, men programmeraren (eller byggssystemet) har inte upprättat någon teknisk relation mellan dem. För en användare som ser gör det ingen skillnad: den ser bara etiketten stå där. För någon som använder en skärmläsare existerar inte denna visuella närhet. Det som spelar roll är kopplingen i koden, och den saknas oftare än du skulle förvänta dig, även på webbplatser som ser väl utformade ut.
Tre varianter av samma fel
Den vanligaste formen är etiketten som finns på skärmen men lever löst från fältet i koden, utan teknisk koppling. Den andra formen är användningen av platshållartext i själva fältet som den enda förklaringen: så snart användaren börjar skriva försvinner texten, och en skärmläsare behandlar dessutom inte alltid en platshållare som en giltig etikett. Den tredje formen ser du framför allt med ikoner: ett sökfält med endast en förstoringsglas-ikon, eller en knapp med bara en piktogram, utan text som en skärmläsare kan läsa upp.
Alla dessa varianter har gemensamt att felet vanligtvis inte är avsiktligt. Ingen bygger ett formulär för att göra det otillgängligt. Det sker för att en etikett är visuellt korrekt och byggaren antar att det är klart, medan den tekniska kopplingen är ett separat steg som lätt glöms över, särskilt under tidsbrist eller när det gäller en mall som ursprungligen inte byggdes med tillgänglighet i åtanke.
Varför detta väger tyngre än det verkar
Ett formulär är ofta den punkt där en besökare faktiskt vill göra något: slutföra en beställning, skapa ett konto, ta kontakt. Om etiketten saknas på just det ögonblicket stannar processen för en del av dina besökare, medan resten av webbplatsen fungerar utmärkt. Tillsynsmyndigheter och utvärderare fokuserar därför ofta på formulär först när de letar efter sådana här flaskhalsar, eftersom de direkt påverkar om någon kan använda en tjänst.
Dessutom sprids detta fel lätt. En etikett utan koppling i en mall för ett adressfält dyker ofta upp på dussintals sidor samtidigt, eftersom samma komponent används överallt. En missad koppling i grunden påverkar således hela beställningssteget eller hela inloggningsskärmen.
Hur du testar det, och var en automatisk skanning har sina gränser
En automatisk skanning identifierar en del av dessa fel bra: den ser om en etikett är tekniskt kopplad till ett fält och om ett indatafält saknar namn helt. Det som en skanning bedömer svårare är om en etikett är innehållsmässigt korrekt, om en platshållare som enda förklaring är tillräckligt tydlig, och om läsordningen för en skärmläsare känns logisk. Det är precis därför vi i varje rapport beskriver vad en automatisk test granskar och inte granskar; så vet du vad som fortfarande måste granskas manuellt.
Vill du själv få ett första intryck är det enklaste testet att gå igenom formuläret med bara tangentbordet och kontrollera att varje fält får ett tydligt namn när du tabbar till det. För en mer grundlig bild, inklusive beställningssteget och inloggningsflödet, hjälper den fullständiga granskningen som tittar längre än startsidan att se var etikett saknas eller står löst från sitt fält.
Vad en overlay-widget inte löser här
En tillgänglighetswidget som klistras på webbplatsen kan inte reparera en saknad koppling mellan en etikett och ett fält; kopplingen ligger i själva källkoden och måste ändras där. Detta är en av anledningarna till varför vi inte säljer overlays: de döljer denna typ av fel för ögat, men en skärmläsare märker ingen skillnad.
Lösningen i sig är vanligtvis begränsad i omfattning: utvecklaren kopplar etiketten till fältet, ersätter en platshållare-som-etikett med en verklig etikett eller lägger till osynlig text till en ikonknapp. Det är ingen större ombyggnad, men det är arbete som måste göras på ett strukturerat sätt, per formulär och per mall. I kunskapsbanken med förklaring per ämne läser du hur dessa och liknande fel förhåller sig till kraven i EN 301 549.
Efter reparationen: dokumentera och övervaka
En etikett som du reparerar nu kan försvinna igen vid nästa ändring av mallen, till exempel när en designer omformaterar formuläret utan att kontrollera kopplingen på nytt. Därför bör en åtgärd inte bara lösas tekniskt, utan också tas med i handlingsplanen så att det är klart vem som är ansvarig och när det ska kontrolleras på nytt. Hur vi organiserar den kontrollen och upprepningen förklaras på sidan om hur bedömningen görs.
Om du är osäker på om dina egna formulär innehåller det här felet kan det ofta ses med några minuters tangentbordsnavigering. Om du vill ha det strukturerat med en prioriterad lista börjar det med den kostnadsfria snabbsökningen, eller läser du först de vanliga frågorna om vad en sökning kontrollerar och inte kontrollerar.