Vad som går fel vid tangentbordsstyrning
Det vanligaste misstaget vid tangentbordsstyrning är att interaktiva element är synliga men inte åtkomliga med Tab-tangenten. Tänk på en meny som bara öppnas med ett musklick, en knapp som inte får fokus, eller ett popup-fönster som inte går att stänga utan mus. För människor som på grund av motoriska begränsningar inte kan använda mus, eller som använder en skärmläsare som förlitar sig på tangentbordnavigering, betyder det här att en del av webbplatsen helt enkelt är oanvändbar.
Orsaken ligger nästan alltid i anpassade element: en utvecklare bygger en vacker dropdown, en anpassad datumväljare eller ett utfällbart filter med egen HTML och JavaScript, men glömmer bort den tangentbordssupport som en vanlig HTML-knapp eller -länk får gratis. Elementet ser bra ut och fungerar med musen, så ingen märker under testningen att Tab-tangenten helt enkelt hoppar över det.
Varför detta ofta förbises
Det här misstaget är hårdnackat eftersom det inte märks för blotta ögat. Den som klickar sig genom en webshop med en mus ser inget problem någonstans. Först när du glömmer musen och bara navigerar genom sidan med Tab, Skift+Tab, Retur och piltangenterna blir det tydligt var navigeringen slutar fungera. Eftersom denna testning sällan är en standard del av en leveransprocess förblir problemet ofta oupptäckt i flera år — tills en besökare eller en tillsynsmyndighet stöter på det.
En andra anledning är att många av dessa brister uppstår just på de ställen som är mest framträdande vid användning: beställningsprocessen, inloggningsskärmen, ett sökfilter. Det här är precis de delar som ofta byggs separat från resten av webbplatsen, med egna komponenter som inte alltid får samma omsorg som huvudnavigationen.
Hur du känner igen detta själv
En enkel första kontroll är att släppa musen och gå igenom ett sidflöde med bara tangentbordet. Notera tre saker: är varje klickbar element åtkomligt via Tab, är det tydligt synligt vid varje tillfälle vilket element som har fokus, och kan varje del som öppnas — en meny, ett filter, ett popup-fönster — också stängas utan mus. Om fokus fastnar i ett popup-fönster, hoppar till en oväntad plats eller försvinner helt från skärmen, är det ett tecken på att det behövs åtgärdas.
En automatiserad scan kan upptäcka en del av dessa problem, till exempel saknade fokusindikatorer eller element utan tangentbordstillgång som är tekniskt identifierbara i källkoden. Men huruvida en dropdown också kan hanteras logiskt och förutsägbart är något som en scan inte helt kan bedöma — det förblir i själva verket en manuell bedömning. Det gäller för övrigt för fler WCAG-krav, och vi nämner det alltid i rapporten. starta den kostnadsfria snabbsökningen av dina viktigaste sidor för att se vilken del av den här typen av problem som redan kommer fram automatiskt.
Hur du förhindrar detta
Lösningen ligger vanligtvis inte i extra teknik ovanpå webbplatsen, utan i rätt användning av befintliga byggstenar. En vanlig HTML-knapp eller -länk är naturligtvis åtkomlig med Tab och kan hanteras med Retur; den som i stället gör en textbit eller en bild klickbar med JavaScript måste själv lägga till den tangentbordssupport. Med anpassade komponenter som menyer, filter och popup-fönster bör det finnas en tydlig överenskommelse med utvecklaren: varje del måste kunna öppnas, hanteras och stängas med tangentbordet, och fokus måste förbli synligt och förutsägbart.
Det som inte hjälper här är en åtkomstwidget som påstår sig kunna åtgärda sådana brister med ett separat skript. En sådan överklistring ändrar ingenting i den underliggande koden och därmed ingenting i den faktiska användningen; lagen kräver en tillgänglig webbplats, inte ett lager ovanpå den. Vi säljer medvetet inte sådan widgetar.
Vill du veta vilka delar av din webbplats eller app som innehåller denna typ av strukturella problem, och hur viktigt det är på prioriteringslistan för din förbättringsplan? I kunskapsbanken sorterad per ämne läser du per typ av brist vad som är aktuellt, och hur vår kontroll faktiskt går till väga ser du vilken del som testats automatiskt och vilken del som kräver manuell uppmärksamhet.
Har du fler frågor om vad som faller under detta krav eller om resten av kontrollramverket? Svaren på vanliga frågor besvarar de flesta av dem redan.
Den kostnadsfria snabbgranskningen från axessia.eu ger omedelbar indikation på om denna typ av tangentbordsproblem förekommer på din webbplats, utan att du behöver ett konto.