Begreber

Landmark

Se også: ARIA landmark, landmark region

Et område på en side identificeret med et HTML5-element eller en ARIA-rolle, som skærmlæserbrugere kan navigere direkte til. Landmarks (banner, navigation, main, complementary, contentinfo) udgør sidens strukturelle skelet.

Landmarks er sideomfattende regioner, som skærmlæserbrugere kan hoppe direkte imellem via dedikerede tastaturgenveje. De er sidens ækvivalent til kapiteldeling i en bog: en seende bruger får strukturen fra visuelle signaler (den synlige header øverst, sidebjælken til højre, footeren nederst); en skærmlæserbruger får strukturen fra landmarks.

De standardiserede landmarks

Hvert af disse er både et HTML5-element og en ARIA-rolle. Brug HTML5-elementet, hvor det er muligt; ARIA-rollen findes til tilfælde, hvor du ikke kan bruge det native element.

RegionHTML5-elementARIA-rolle
Sideheader (logo, primær nav)<header> (øverst på siden)role="banner"
Primær navigation<nav>role="navigation"
Primært indhold<main>role="main"
Supplerende indhold (sidebjælke)<aside>role="complementary"
Sidefooter (copyright, sekundære links)<footer> (nederst på siden)role="contentinfo"
Søgning<search> (HTML5) eller <form role="search">role="search"
Generisk region med behov for identifikation—role="region" (med label)
Formular (hvis ikke søgning)<form>role="form"

Bemærk, at <header> og <footer> kun afbildes som banner og contentinfo, når de er direkte underelementer af <body>. Et <header> inde i en <article> er blot en artikel-header — det bliver ikke et banner-landmark.

Sådan bruger skærmlæserbrugere landmarks

Alle større skærmlæsere har en landmarksudelukkende navigationstilstand:

  • JAWS: R cykler igennem landmarks; Shift+R cykler baglæns; Insert+F7 åbner en liste over alle landmarks.
  • NVDA: D cykler igennem landmarks; Shift+D baglæns; Insert+F7 åbner elementlisten.
  • VoiceOver (macOS): VO+U åbner rotoren; drej til „Landmarks“; naviger med piletasterne.
  • VoiceOver (iOS): drej med to fingre til „Landmarks“ i rotoren; swipe op/ned igennem dem.
  • TalkBack (Android): swipe op og derefter til højre for at åbne læsekontrolmenuen; vælg „Landmarks“-tilstand; swipe til højre igennem dem.

En side med gode landmarks giver skærmlæserbrugeren en indholdsfortegnelse med ét tastetryk.

Typiske landmarkfejl

  • Ingen <main>. Uden et main-landmark skal skærmlæserbrugere tabbe forbi headeren ved hvert sideindlæsning. Enhver side bør have præcis én <main>.
  • Flere umærkede <nav>-elementer. En side med både en topnavigation og en sidebjælkenavigation, begge som <nav>, får skærmlæserbrugeren til at vælge mellem to ens „navigation“-indgange. Mærk begge med aria-label: <nav aria-label="Primary">, <nav aria-label="Page contents">.
  • role="banner" på et indre element. Et <header> inde i <main> eller <article> er ikke et banner; det er en artikelheader. Tilføj ikke role="banner" til det.
  • Duplikerede landmarks. To <main>-elementer på én side bryder reglen „landmark-no-duplicate-main“. Både axe og Lighthouse opdager dette.
  • Region uden label. role="region" kræver aria-label eller aria-labelledby. Ellers ignorerer skærmlæsere det.

Sådan auditerer du landmarks

Åbn siden i en moderne skærmlæser, tryk på landmarklistens genvejstast, og verificer:

  1. Der er præcis ét banner, én main og ét contentinfo.
  2. Hver <nav> har et entydigt tilgængeligt navn.
  3. Landmarkstrukturen stemmer overens med den synlige sidestruktur.

En landmarkliste, der lyder „banner, navigation, navigation, main, complementary, contentinfo“ uden yderligere labels, betyder, at brugeren ikke kan skelne de to navigationer fra hinanden. Ret det.