Maamerkkialue — saavutettavuuden sanasto

Maamerkkialueet ovat sivutason alueita, joiden välillä ruudunlukuohjelman käyttäjät voivat hypätä suoraan erityisillä pikanäppäimillä. Ne ovat sivulle mitä luvunjako on kirjalle: näkevä käyttäjä hahmottaa rakenteen visuaalisista vihjeistä (yläreunassa näkyvä otsikko, sivupalkki oikealla, alatunniste alhaalla); ruudunlukuohjelman käyttäjä hahmottaa rakenteen maamerkeistä.

Standardit maamerkit

Jokainen näistä on sekä HTML5-elementti että ARIA-rooli. Käytä HTML5-elementtiä aina kun mahdollista; ARIA-rooli on olemassa tilanteisiin, joissa natiivielementti ei ole mahdollinen.

Alue	HTML5-elementti	ARIA-rooli
Sivun otsikko (logo, päänavigaatio)	`<header>` (sivun yläosa)	`role="banner"`
Päänavigaatio	`<nav>`	`role="navigation"`
Pääsisältö	`<main>`	`role="main"`
Täydentävä sisältö (sivupalkki)	`<aside>`	`role="complementary"`
Sivun alatunniste (tekijänoikeus, toissijaiset linkit)	`<footer>` (sivun alaosa)	`role="contentinfo"`
Haku	`<search>` (HTML5) tai `<form role="search">`	`role="search"`
Tunnistamista vaativa geneerinen alue	—	`role="region"` (tunnisteen kanssa)
Lomake (jos ei ole haku)	`<form>`	`role="form"`

Huomaa, että <header> ja <footer> vastaavat banner- ja contentinfo-rooleja vain kun ne ovat suoria <body>-elementin lapsia. <header>-elementti <article>-elementin sisällä on vain artikkelin otsikko — siitä ei tule banner-maamerkki.

Miten ruudunlukuohjelman käyttäjät hyödyntävät maamerkkejä

Jokaisessa merkittävässä ruudunlukuohjelmassa on pelkästään maamerkkeihin perustuva navigointitila:

JAWS: R kierrättää maamerkit eteenpäin; Shift+R taaksepäin; Insert+F7 avaa kaikkien maamerkkien listan.
NVDA: D kierrättää maamerkit eteenpäin; Shift+D taaksepäin; Insert+F7 avaa elementtilistan.
VoiceOver (macOS): VO+U avaa roottorin; kierrä kohtaan “Landmarks”; nuolinäppäimillä läpi.
VoiceOver (iOS): kahden sormen pyöritys roottorin “Landmarks”-kohtaan; pyyhkäise ylös/alas.
TalkBack (Android): pyyhkäise ylös sitten oikealle avataksesi lukemisen hallintavalikko; valitse “Landmarks”-tila; pyyhkäise oikealle.

Sivulla, jossa on hyvät maamerkit, ruudunlukuohjelman käyttäjä saa yhden näppäinpainalluksen sisällysluettelon.

Yleisimmät maamerkkivirheet

<main>-elementti puuttuu. Ilman pääsisältömaamerkki ruudunlukuohjelman käyttäjien on Tabilla ohitettava otsikko jokaisella sivulatauksella. Jokaisella sivulla pitäisi olla täsmälleen yksi <main>.
Useita nimeämättömiä <nav>-elementtejä. Sivu, jolla on sekä ylänavigaatio että sivupalkin navigaatio, molemmat <nav>-elementteinä, pakottaa ruudunlukuohjelman käyttäjän valitsemaan kahden erottamattoman “navigointi”-merkinnän välillä. Nimeä jokainen aria-label-attribuutilla: <nav aria-label="Päänavigaatio">, <nav aria-label="Sivun sisältö">.
role="banner" sisäisessä elementissä. <header> elementin <main> tai <article> sisällä ei ole banner-maamerkki; se on artikkelin otsikko. Älä lisää siihen role="banner".
Kaksoismaamerkit. Kaksi <main>-elementtiä yhdellä sivulla rikkoo “landmark-no-duplicate-main” -säännön. axe ja Lighthouse kumpikin havaitsevat tämän.
Alue ilman tunnistetta. role="region" vaatii aria-label- tai aria-labelledby-attribuutin. Muuten ruudunlukuohjelmat ohittavat sen.

Maamerkkien auditointi

Avaa sivu missä tahansa nykyaikaisessa ruudunlukuohjelmassa, paina maamerkkilistauspikanäppäintä ja varmista:

Banner-maamerkki on täsmälleen yksi, main-maamerkki yksi, contentinfo-maamerkki yksi.
Jokaisella <nav>-elementillä on erillinen saavutettava nimi.
Maamerkkistruktuuri vastaa sivun visuaalista rakennetta.

Maamerkkien lista, jossa lukee “banner, navigation, navigation, main, complementary, contentinfo” ilman lisätunnisteita, tarkoittaa, että käyttäjä ei pysty erottamaan kahta navigaatiota toisistaan. Korjaa se.