Saavutettavuuspuu

Saavutettavuuspuu on käyttöjärjestelmätason tietorakenne, jota ruudunlukuohjelmat ja muu avustava teknologia todella käyttävät. Kun avaat sivun selaimessa, selain rakentaa kaksi puuta: DOM-puun (tavallisen HTML-hierarkian) ja saavutettavuuspuun, rinnakkaisen rakenteen, joka on johdettu DOM:sta mutta sisältää saavutettavuuden metatiedot.

Saavutettavuuspuun ymmärtäminen selittää noin 80 % muuten hämmentävästä ARIA:n, ruudunlukuohjelmien ja „miksi tämä ei ilmoita mitään?“-vianetsinnän käyttäytymisestä.

Mitä se sisältää

Jokaisella saavutettavuuspuun solmulla on:

• Rooli — mitä elementti on: painike, linkki, otsikko, navigaatio, valintaikkuna. Se määräytyy HTML-elementtityypistä tai eksplisiittisestä ARIA-attribuutista role="...".
• Nimi — miten elementtiä kutsutaan. Lähteinä ovat nimilapputeksti, alt-attribuutti, aria-label, aria-labelledby tai laskettu tekstisisältö.
• Kuvaus — lisäkonteksti. Lähteenä ovat aria-describedby tai title-attribuutit.
• Tila — nykyinen tila: painettu, laajennettu, valittu, käsittelyssä. Määräytyy HTML-attribuuteista (disabled, required) tai ARIA:sta (aria-pressed, aria-expanded).
• Ominaisuudet — suhteet ja metatiedot: aria-controls, aria-owns, aria-haspopup.

Ruudunlukuohjelmat käyvät tämän puun läpi ja ilmoittavat jokaisen solmun näiden kenttien perusteella. Välilehti- ja nuolinäppäimistönavigointi kulkee puun, ei DOM:n kautta.

Miksi pelkästään visuaalinen sisältö katoaa näkyvistä

<div onclick="..."> jota tyylitellään näyttämään painikkeelta ei saa roolia saavutettavuuspuussa — selain näkee geneerisen <div>-elementin ja kirjaa sen tilaksi role="generic" (käytännössä näkymätön avustavalle teknologialle). onclick- käsittelijä ei siirry saavutettavuuspuuhun, koska saavutettavuuspuu heijastaa ainoastaan sen, mitä selain päättelee elementin olevan HTML-roolinsa perusteella.

Tästä syystä semanttinen HTML on tärkeää kaikkein perustavanlaatuisimmalla tasolla: ei tyylin tai käytännön vuoksi, vaan koska semanttiset HTML-elementit täyttävät saavutettavuuspuun oikeilla rooleilla automaattisesti. Ei-semanttinen merkintä luo div-viidakkopuun, josta ruudunlukuohjelmat eivät saa selvää.

ARIA:n tehtävä puussa

ARIA on olemassa nimenomaan täydentämään saavutettavuuspuuta tapauksissa, joissa natiivissa HTML:ssä ei ole vastaavaa elementtiä. role="combobox" käskee selainta lisäämään combobox-solmun puuhun elementille, joka muuten näkyisi geneerisenä. aria-expanded="true" asettaa tilaominaisuuden kyseiselle solmulle.

ARIA ei muuta DOM:a. Se muuttaa sen, mitä selain kirjoittaa saavutettavuuspuuhun.

Miten sitä tarkastellaan

Selainten kehittäjätyökalut paljastavat saavutettavuuspuun suoraan:

• Chrome / Edge DevTools — Elementit-paneeli → Saavutettavuus-välilehti (oikea sarake) näyttää valitun solmun lasketut saavutettavuusominaisuudet. „Koko sivun saavutettavuuspuu“-vaihtoehto (Chrome-lippu joissakin versioissa) näyttää puun sivupaneelina.
• Firefox DevTools — Saavutettavuus-paneeli (kuvake työkalurivillä) näyttää erillisen saavutettavuuspuunäkymän, samankaltaisen kuin Elementit-näkymä mutta saavutettavuuspuun käsittein esitettynä.
• Safari Web Inspector — Tarkistus / Saavutettavuus-välilehti tarjoaa vastaavan tarkistusmahdollisuuden.

Kun saavutettavuuspuu on nähtävissä, voidaan empiirisesti vastata kysymykseen „miksi tämä ei ilmoita mitään?“ Vastaus on lähes aina: puun solmulla on eri rooli kuin odotettiin, sen nimi on tyhjä tai sen tila on väärä.

Miksi „saavutettavuuspuu“ on parempi mentaalimalli kuin „ARIA“

Kehittäjät, jotka opiskelevat ARIA:n ymmärtämättä saavutettavuuspuuta, päätyvät lisäilemään ARIA-attribuutteja toivoen, että ruudunlukuohjelmat poimivat ne. Kehittäjät, jotka ymmärtävät saavutettavuuspuun, tietävät, että ARIA:n tehtävä on kirjoittaa tiettyjä kenttiä tiettyihin puun solmuihin, ja että puun suora tarkastelu on nopeampaa kuin arvaileminen.