3.2.1
Förändringar vid fokus
När ett element får fokus ska inte större förändringar ske. Exempel på större förändringar är att formulär skickas, fönster öppnas eller att fokus flyttas till ett annat element.
Användare som navigerar med hjälp av tangentbordet använder ofta tab-tangenten för att flytta fokus mellan olika element. När en användare exempelvis vill ta sig till element lite längre ner på sidan behöver alla element innan “tabbas igenom”. Om det sker förändringar av innehållet bara av att ett element får fokus blir det svårt att navigera till rätt plats.
Exempel
Testa att navigera med tangentbordet från knapp 1 till knapp 3. Klicka på knapp 1 för att sätta fokus i knappen och använd sedan tangentbord för att flytta fokus.
- Tab-tangenten flyttar fokus till nästa element.
- Shift + tab flyttar fokus till föregående element.
- Enter aktiverar knappen som fokus är i.
Den här rutan skapar en stor förändring på sidan, bara genom att sätta fokus på en knapp. Ett bättre sätt skulle vara att den här rutan endast kommer fram när knappen aktiveras med antingen klick eller enter-tangenten.
”Öppna ruta”-knappen öppnar en ruta direkt när den får fokus och flyttar fokus in i den nya rutan. Rutan måste stängas ner genom att aktivera stäng-knappen. Det gör att det inte blir lätt att navigera till knapp 3. Är skärmen inzoomad kanske alla inte ser stäng-knappen och ser bara att skärmen helt plötsligt blir mörkare.
Låt istället användare behöva aktivera knappen för att öppna rutan
Den här rutan öppnas endast när man aktiverat ”öppna ruta”-knappen. Det gör att det går att navigera förbi knappen utan att en stor förändring sker.
Dessa knappar är mycket lättare att navigera mellan eftersom rutan endast öppnas när knappen aktiveras.
Testa riktlinjen
Testa riktlinjen genom att helt enkelt navigera på webbplatsen med tangentbordet och se till att inga oväntade händelser sker bara av att flytta fokus till olika element.
Läs mer om riktlinje 3.2.1 på W3Cs webbplats.