3.2.1 Förändringar vid fokus A
När ett element får fokus ska inga större förändringar ske. Exempel på större förändringar är att ett formulär skickas, ett 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 ett element lite längre ner på sidan behöver alla element innan “tabbas igenom”. Om innehållet ändras bara för 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 på knappen och använd sedan tangentbordet för att flytta fokus.
- Tab-tangenten flyttar fokus till nästa element.
- Shift + Tab flyttar fokus till föregående element.
- Enter eller mellanslag aktiverar knappen som har fokus.
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 genom att aktivera stäng-knappen. Detta gör det svårt att navigera till knapp 3. Om skärmen är inzoomad kanske alla inte ser stäng-knappen och ser bara att skärmen plötsligt blir mörkare.
Låt istället användaren 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.
Läs mer om riktlinje 3.2.1 på W3Cs webbplats.