Navigering med landmärken: så tar sig användare runt

En seende användare kastar en blick över en sida. En skärmläsaranvändare hoppar i stället mellan områden med hjälp av de landmärken du har definierat.

De flesta skärmläsare erbjuder en tangent för att gå igenom landmärken. I NVDA hoppar tangenten D till nästa område utan att musen behöver användas.

Användare kan också öppna en lista över landmärken, en meny med alla områden på sidan, och välja ett för att hoppa direkt dit.

Den stora vinsten är att kunna hoppa över innehåll. Användarna passerar header och nav som de redan har hört och hamnar direkt på det nya innehållet.

På en Mac öppnar VoiceOver-användare rotor och väljer Landmärken för att navigera mellan dina områden efter namn och roll.

I listan över landmärken blir dina aria-label-värden menyalternativen, så bra namn är det som gör hoppnavigering användbar.

Landmärken besöks i den ordning de förekommer i source, så en logisk HTML-ordning ger alla en logisk hoppordning.

Om varje ruta är ett område blir listan bara brus. Använd landmärken för verkliga sidavsnitt, inte för generell layout.

Helst ska allt synligt innehåll ligga inuti något landmärke. Innehåll som står ensamt utanför alla områden är svårare att nå genom hoppnavigering.

Öppna en skärmläsare och tryck på landmärkestangenten. Om du kan hoppa smidigt genom sidan fungerar dina områden. 🎧

Att hoppa mellan landmärken är snabbare än att trycka på Tab dussintals gånger. Några tangenttryckningar ersätter en lång och tröttsam genomgång av varje länk.

Du har lärt dig hur användare hoppar mellan landmarks med en tangent eller rotor, varför namngivna områden och DOM-ordningen spelar roll och hur du testar med hörseln. 🙌