Landmærke

et område på siden, en skærmlæser kan springe til

Hvad det er

Et landmærke, også kaldet en landmærkeregion eller på engelsk et ARIA landmark, er en del af en webside, som markup’en navngiver efter dens formål, for eksempel sidehovedet, hovedindholdet, navigationen eller sidefoden, så hjælpemidler kan liste de dele og gå direkte til en hvilken som helst af dem. En side har som regel flere landmærker, og tilsammen beskriver de layoutet for en person, der aldrig ser layoutet.

WAI-ARIA 1.2 definerer otte landmærkeroller: banner, navigation, main, complementary, contentinfo, search, form og region. En niende, selve landmark, er den abstrakte overrolle i specifikationens rollemodel, og forfattere får besked på ikke at bruge den. De fleste sider behøver aldrig attributten role for at få de andre, fordi HTML-elementerne allerede bærer dem:

  • main er landmærket main, og nav er et navigation-landmærke.
  • header og footer bliver kun til banner og contentinfo, når de hører til siden som helhed. Placeret inde i en article, en section eller main er de almindelig sidestruktur og slet ikke landmærker.
  • aside er complementary på sidens øverste niveau eller inde i main. Inde i andet sektionsindhold tæller den kun, når den har et navn.
  • section bliver kun et region-landmærke, når den har et tilgængeligt navn, fra aria-label eller fra en overskrift, der henvises til med aria-labelledby. En section uden navn er bare en gruppe.
  • form svarer til rollen form, og specifikationen kræver, at forfattere giver den en etiket. Det nyere element search svarer til search.

Specifikationen beder hjælpemidler om at lade folk nå disse områder hurtigt, og skærmlæsere gør det. I NVDA flytter D til næste landmærke, og elementlisten viser dem alle på én gang; VoiceOvers rotor har sin egen liste over landmærker. En bruger, der lander på en side, kan åbne listen, høre, at der er et sidehoved, en navigation, et hovedområde og en sidefod, og kende sidens form, før et eneste ord af indholdet er læst.

Hvorfor det betyder noget

Beslutningen bag landmærker er, om hver del af en side ligger et sted, en lytter kan navngive og nå. På en typisk side er det meste af indholdet gentaget: sidehovedet, menuen, sidefoden og ofte en sidebjælke er de samme på hver side af sitet, og det, der er nyt, ligger et sted i midten. En seende besøgendes øjne går direkte derhen. Uden landmærker må en skærmlæserbruger lytte sig forbi det samme sidehoved og den samme menu på hver side eller gætte på, hvor mange overskrifter der skal springes over.

WCAG’s egen teknik for landmærker, ARIA11, er opført som en tilstrækkelig måde at opfylde tre succeskriterier på. Et af dem kræver en måde at springe over indholdsblokke, der gentages på tværs af sider; et andet kræver, at den struktur, en seende læser aflæser af layoutet, også er tilgængelig for software. Det koster lidt at opfylde dem på den måde, når siden fra begyndelsen er bygget af header, nav, main og footer: semantikken følger med elementet, og der er intet ekstra at vedligeholde. At eftermontere landmærker i et layout af indlejrede div-elementer koster mere, men arbejdet er for det meste mekanisk.

Der er to grænser, det er værd at kende. Den første er, at specifikationen gør landmærkenavigation valgfri for almindelige browsere, så en tastaturbruger uden skærmlæser som regel ikke får noget ud af landmærkerne alene, og et synligt spring-til-indhold-link er stadig sin plads værd. Den anden er, at flere landmærker ikke gør en side lettere at bruge. Hvert landmærke er en post på en liste, som nogen skal høre, og en side, hvor hver blok er en navngiven region, lyder som en indholdsfortegnelse på halvtreds linjer. Specifikationen forbeholder region til indhold, der er vigtigt nok til at stå i en oversigt over siden, og beder forfattere bruge den, kun når ingen af de andre roller beskriver formålet.

Sådan ser det ud i praksis

Tre stykker arbejde på dette site viser den samme lære fra hver sin side: et manglende landmærke er en af de få tilgængelighedsfejl, som ingen nogensinde opdager ved at kigge.

Den første kom under arbejdet med at tage hele sitet til WCAG 2.2 niveau AA. Automatiseringen kører en tilgængelighedsregelmotor med dens bedste praksis-regler slået til, ikke kun konformitetsreglerne, hvilket er en forskel på tredive regler. En af de ekstra regler fejlede i det øjeblik, den blev slået til, fordi mærket lå uden for hvert landmærke på hver indre side. Intet på skærmen afslørede det.

Den anden forklarer, hvorfor den første var gået ubemærket hen. Blandt elleve tilgængelighedsfejl, som browseren meldte sunde, sad to i vagterne frem for i siderne, og den ene var, at regelmotoren havde kørt halvfjerds af sine hundrede og fem regler. Den regel, der ville have fanget det manglende landmærke, var simpelthen ikke i sættet. Læren, siden drager, er kort: et regelsæt, der ikke indeholder reglen, kan ikke håndhæve den.

Den tredje lå på en side uden for hovedsitet. Landingssiden foran virksomhedens egen git-forge havde været en håndholdt kopi af hovedsitets design, og hver eneste forskel, der blev fundet mellem de to, viste sig at være et uheld og ikke en beslutning. En af de fem var, at der intet hovedlandmærke eller overskrift på øverste niveau var på nogen side, og ikke én af de fem var synlig på et skærmbillede. Kopien blev slettet, og landingssiden bygges nu af hovedsitets egne skabeloner, så den arver den samme struktur i stedet for at efterligne den.

Hvor det går galt

Landmærkefejl er tavse på skærmen og tydelige at høre i en skærmlæser. Det er de almindelige.

Indhold havner uden for hvert landmærke. Et logo, en cookiemeddelelse eller en sprogvælger placeres før header eller efter footer, og en lytter, der bevæger sig efter landmærker, springer forbi den. Axe-reglen region melder alt indhold, der ikke ligger i et landmærke, men den er mærket som bedste praksis og ikke som et WCAG-brud, så en kørsel, der er begrænset til WCAG-mærkerne, udfører den aldrig. Slå bedste praksis-reglerne til, og flyt det løse element ind i det landmærke, det hører til.

Den samme rolle optræder to gange med samme navn. To nav-elementer, et i sidehovedet og et i sidefoden, annonceres begge som »navigation«, og lytteren må gætte, hvilken der er hvilken. Giv hver en kort, tydelig etiket med aria-label eller aria-labelledby, og lad rollen blive ude af etiketten: en navigation med etiketten »Site navigation« læses op som »Site navigation navigation«.

Et ekstra main eller banner dukker op. En div får role="main" eller role="banner" for at gøre en komponent vigtig, eller en skabelon pakker en underside ind i sit eget main, og siden annoncerer nu to af en rolle, den skulle have én af. Specifikationen beder om højst ét banner, ét main og ét contentinfo pr. side, og axe har en regel for hver. Tjek landmærkelisten efter hver ændring af layoutet, og lad de indbyggede elementer bære rollerne, hvor de kan.

Hver blok bliver en region. Et komponentbibliotek giver som standard hver section en aria-label, og landmærkelisten fyldes med korttitler. Navngiv kun en section, når en læser kunne ønske at springe til den fra et hvilket som helst sted på siden.

En side, der er bygget som skitsen herunder, giver en lytter fem stop, hvert med sit eget navn:

<header><!-- logo, søgning --></header>
<nav aria-label="Site"><!-- menu --></nav>
<main>
    <h1>Priser</h1>
    <section aria-labelledby="hosting">
        <h2 id="hosting">Hosting</h2>
    </section>
</main>
<footer><!-- kontakt, jura --></footer>

Læs mere

Ordliste