Landemerke

et område på en side som en skjermleser kan hoppe til

Hva det er

Et landemerke, også kalt en landemerkeregion eller et ARIA-landemerke, er en del av en nettside som markeringen navngir etter formålet, som toppfeltet, hovedinnholdet, navigasjonen eller bunnteksten, slik at hjelpemiddelteknologi kan liste opp disse delene og gå rett til hvilken som helst av dem. En side har som regel flere landemerker, og til sammen beskriver de oppsettet for en som aldri ser oppsettet.

WAI-ARIA 1.2 definerer åtte landemerkeroller: banner, navigation, main, complementary, contentinfo, search, form og region. En niende, landmark selv, er den abstrakte forelderen i spesifikasjonens rollemodell, og forfattere bes om ikke å bruke den. De fleste sider trenger aldri attributtet role for å få de andre, fordi HTML-elementene allerede har dem:

  • main er landemerket main, og nav er et navigation-landemerke.
  • header og footer blir banner og contentinfo bare når de hører til siden som helhet. Plassert inne i en article, en section eller main er de vanlig sidestruktur og ikke landemerker i det hele tatt.
  • aside er complementary på sidens øverste nivå eller inne i main. Inne i annet seksjoneringsinnhold teller den bare når den har et navn.
  • section blir et region-landemerke bare når den har et tilgjengelig navn, fra aria-label eller fra en overskrift det vises til med aria-labelledby. En section uten navn er bare en gruppe.
  • form svarer til rollen form, og spesifikasjonen krever at forfatteren gir den en etikett. Det nyere elementet search svarer til search.

Spesifikasjonen ber hjelpemidlene om å la folk nå disse områdene raskt, og skjermlesere gjør det. I NVDA flytter D til neste landemerke, og elementlisten viser alle på én gang; rotoren i VoiceOver har en egen liste over landemerker. En bruker som kommer til en side, kan åpne den listen, høre at det finnes et banner, en navigasjon, et hovedområde og en bunntekst, og kjenne formen på siden før et eneste ord av den er lest.

Hvorfor det er viktig

Avgjørelsen bak landemerker er om hver del av en side ligger et sted en lytter kan navngi og nå. På en typisk side er det meste av innholdet gjentatt: toppfeltet, menyen, bunnteksten og ofte et sidefelt er de samme på hver side av nettstedet, og den delen som er ny, ligger et sted midt i. Øynene til en seende besøkende går rett dit. Uten landemerker må en som bruker skjermleser, høre forbi det samme toppfeltet og den samme menyen på hver side, eller gjette hvor mange overskrifter som skal hoppes over.

WCAGs egen teknikk for landemerker, ARIA11, er oppført som en tilstrekkelig måte å oppfylle tre suksesskriterier på. Ett av dem krever en måte å hoppe over innholdsblokker som gjentas på flere sider; et annet krever at strukturen en seende leser får fra oppsettet, også er tilgjengelig for programvare. Prisen for å oppfylle dem på denne måten er liten når siden bygges av header, nav, main og footer fra starten av: semantikken følger med elementet, og det er ingenting ekstra å vedlikeholde. Å ettermontere landemerker i et oppsett laget av nøstede div-elementer koster mer, men arbeidet er stort sett mekanisk.

To begrensninger er verdt å kjenne. Den første er at spesifikasjonen gjør navigasjon mellom landemerker valgfri for vanlige nettlesere, så en tastaturbruker uten skjermleser får som regel ingenting ut av landemerker alene, og en synlig snarveilenke fortjener fortsatt plassen sin. Tilsynet for universell utforming av ikt tolker kravet om å hoppe over blokker slik at mekanismen skal ligge blant de fem første tabulatorstegene, være synlig eller bli det ved tastaturfokus, og flytte fokus både visuelt og i koden til hovedinnholdet. Den andre er at flere landemerker ikke gjør en side lettere å bruke. Hvert av dem er en oppføring i en liste noen må høre, og en side der hver blokk er en navngitt region, høres ut som en innholdsfortegnelse på femti linjer. Spesifikasjonen holder region av til innhold som er viktig nok til å stå i et sammendrag av siden, og ber forfattere bruke den bare når ingen av de andre rollene beskriver formålet.

Slik ser det ut i praksis

Landemerker er usynlige på skjermen, så et landemerke som mangler, er en av de få feilene i universell utforming som ingen noen gang vil oppdage ved å se på siden. Arbeidet her har møtt den feilen tre ganger, fra hver sin retning.

Den første kom under arbeidet med å ta hele nettstedet til WCAG 2.2 på nivå AA. Automatiseringen kjører en regelmotor for universell utforming med reglene for beste praksis slått på, ikke bare samsvarsreglene, en forskjell på tretti regler. Én av de ekstra reglene feilet i det øyeblikket den ble slått på, fordi merkevaresymbolet lå utenfor alle landemerker på hver underside. Ingenting på skjermen røpet det.

Den andre forklarer hvorfor den første hadde gått upåaktet hen. Blant elleve feil som nettleseren hadde kalt friske, lå to i vaktene og ikke i sidene, og den ene av dem var at regelmotoren hadde kjørt sytti av sine hundre og fem regler. Regelen som ville ha fanget det manglende landemerket, var rett og slett ikke med i settet. Lærdommen siden trekker, er kort: et regelsett som ikke inneholder regelen, kan ikke håndheve den.

Den tredje gjaldt en side utenfor hovednettstedet. Landingssiden foran selskapets egen git-forge hadde vært en håndvedlikeholdt kopi av hovednettstedets design, og hver forskjell som noen gang ble funnet mellom de to, viste seg å være et uhell og ikke en beslutning. Én av de fem var at ingen side hadde et main-landemerke eller en overskrift på øverste nivå, og ikke én av de fem var synlig i et skjermbilde. Kopien ble slettet, og landingssiden bygges nå av hovednettstedets egne maler, så den arver den samme strukturen i stedet for å etterligne den.

Hvor det går galt

Feil med landemerker er tause på skjermen og tydelige å høre i en skjermleser. Dette er de vanlige.

Innhold havner utenfor alle landemerker. En logo, et varsel om informasjonskapsler eller en språkvelger plasseres før header eller etter footer, og en lytter som beveger seg fra landemerke til landemerke, hopper forbi den. Regelen region i axe melder alt innhold som ikke ligger i et landemerke, men den er merket som beste praksis og ikke som et brudd på WCAG, så en kjøring som er begrenset til WCAG-merkene, kjører den aldri. Slå på reglene for beste praksis, og flytt elementet som har kommet på avveie, inn i landemerket det hører til.

Den samme rollen dukker opp to ganger med det samme navnet. To nav-elementer, ett i toppfeltet og ett i bunnteksten, leses begge opp som «navigasjon», og lytteren må gjette hvilken som er hvilken. Gi hver av dem en kort, tydelig etikett med aria-label eller aria-labelledby, og la rollen være ute av etiketten: en navigasjon med etiketten «Nettstedsnavigasjon» leses opp som «Nettstedsnavigasjon navigasjon».

Et ekstra main eller banner dukker opp. En div får role="main" eller role="banner" for at en komponent skal virke viktig, eller en mal pakker en underside inn i sin egen main, og siden melder nå to av en rolle den skulle hatt én av. Spesifikasjonen ber om høyst ett banner, ett main og ett contentinfo per side, og axe har en regel for hver av dem. Sjekk listen over landemerker etter hver endring i oppsettet, og la de innebygde elementene bære rollene der de kan.

Hver blokk blir en region. Et komponentbibliotek gir hver section en aria-label som standard, og listen over landemerker fylles opp med titler på kort. Gi en section et navn bare når en leser vil hoppe til den fra et hvilket som helst sted på siden.

En side formet som skissen nedenfor gir en lytter fem stopp, hvert av dem tydelig:

<header><!-- logo, search --></header>
<nav aria-label="Site"><!-- menu --></nav>
<main>
    <h1>Prices</h1>
    <section aria-labelledby="hosting">
        <h2 id="hosting">Hosting</h2>
    </section>
</main>
<footer><!-- contact, legal --></footer>

Les mer

Ordliste