treeitem

Milloin käyttää

role="tree" -elementin sisällä, jokaiselle näkyvälle solmulle. Jos solmulla on lapsia, aseta aria-expanded="true" tai "false" ja sisällytä tai omista role="group" -elementti, joka sisältää lapsi-treeitem-kohteet. Jos solmulla ei ole lapsia, jätä aria-expanded kokonaan pois (ÄLÄ aseta sitä arvoon "false" lehdellä — se ilmoittaa “kutistettu” ilman mitään laajennettavaa).

Aseta aria-level (1-indeksoitu syvyys), aria-posinset (sijainti sisarusten joukossa, 1-indeksoitu) ja aria-setsize (sisarusten kokonaismäärä) jokaiselle treeitem-kohteelle, kun visuaalista sisäkkäisyyttä ei voi päätellä DOM-hierarkiasta.

Navigointiin, joka on todellisuudessa vain “lista linkkejä sisäkkäisine alalinkkeineen”, <nav> sisäkkäisten <ul>- ja <a>-elementtien kanssa on parempi valinta. Käytä puunäkymää vain, kun kokemus on yksi sarkainpysähdyksen hierarkkinen selain.

Näppäimistö- ja kohdistussopimus

APG treeview -mallin mukaan:

• Sarkain siirtää kohdistuksen puuhun, nykyiselle treeitem-kohteelle; Sarkain siirtää kohdistuksen ulos.
• Ylös/Alas-nuolet siirtävät kohdistusta näkyvien solmujen välillä (ohittaen kutistetut lapset).
• Oikea nuoli: jos solmu on kutistettu, laajenna se; jos laajennettu, siirry ensimmäiseen lapseen.
• Vasen nuoli: jos solmu on laajennettu, kutista se; jos kutistettu, siirry vanhempaan.
• Home / End siirtää ensimmäiseen / viimeiseen näkyvään solmuun.
• Enter tai Välilyönti aktivoi (valitsee) nykyisen kohteen.
• Pikakirjoitus: kirjaimen kirjoittaminen siirtää kohdistuksen seuraavaan vastaavaan näkyvään solmuun.

Yleiset virheet

• aria-expanded="false" lehtisolmulla — ilmoittaa kuvitteellisen kutistettavan tilan.
• Jokaisella treeitem-kohteella on tabindex="0". Malli on yksi sarkainpysähdys; vain kohdistuneella kohteella on tabindex="0".
• Oikea/Vasen nuoli käytetään “seuraavaan sisareen / edelliseen sisareen” siirtymiseen laajentamisen/kutistamisen sijaan.
• Lapsi-treeitem-kohteet sijoitetaan suoraan vanhemman <li>-elementin sisään ilman koostavaa role="group" -elementtiä. Ruudunlukuohjelmat eivät voi ilmoittaa ryhmää kokonaisuutena.
• Puuttuva aria-level, kun DOM on tasainen (esimerkiksi kun puu renderöidään absoluuttisella sijoittelulla).

Esimerkki

<ul role="tree" aria-label="Files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    Documents
    <ul role="group">
      <li role="treeitem" tabindex="-1">Resume.pdf</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        Photos
        <ul role="group">
          <li role="treeitem" tabindex="-1">2025-summer.jpg</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">Downloads</li>
</ul>