tree

Milloin käyttää

Todelliseen hierarkkiseen selaimeen: tiedostojärjestelmä, organisaatiokaavio, syvästi sisäkkäinen taksonomia. Lapset ovat role="treeitem" -elementtejä, ryhmiteltyinä tarvittaessa välitason role="group" -koontielementtien sisään.

Jos “puusi” on todellisuudessa kahden tai kolmen tason linkeistä koostuva navigointivalikko, älä käytä role="tree". Käytä sen sijaan <nav>-elementtiä sisäkkäisten <ul>- ja <a>-elementtien kanssa — käyttäjät odottavat navigoinnissa Sarkain + Enter -toimintoa; nuolinäppäinpuunavigointi sivustovalikossa on vierasta ja hidasta.

Puulla TÄYTYY olla saavutettava nimi. Aseta aria-multiselectable="true", jos useita treeitem-kohteita voidaan valita samanaikaisesti.

Näppäimistö- ja kohdistussopimus

APG treeview -mallin mukaan:

• Sarkain siirtää kohdistuksen puuhun, kohdistuneen (tai ensimmäisen) treeitem-kohteen päälle; Sarkain siirtää kohdistuksen ulos.
• Ylös/Alas-nuolet siirtävät kohdistusta näkyvien solmujen välillä, ohittaen kutistetut lapset.
• Oikea nuoli: jos kutistettu, laajenna; jos laajennettu, siirry ensimmäiseen lapseen.
• Vasen nuoli: jos laajennettu, kutista; jos kutistettu, siirry vanhempaan.
• Home / End siirtää ensimmäiseen / viimeiseen näkyvään solmuun.
• Enter tai Välilyönti valitsee nykyisen treeitem-kohteen.
• Pikakirjoitus: kirjainten kirjoittaminen hyppää vastaaviin näkyviin solmuihin.
• Monivalintapuissa: Shift+nuoli laajentaa yhtenäistä valintaa; Ctrl/Cmd+napsautus vaihtaa yksittäistä valintaa.

Käytä kiertävää tabindex-arvoa: vain nykyisellä kohdistuneella treeitem-kohteella on tabindex="0".

Yleiset virheet

• Jokaisella treeitem-kohteella on tabindex="0". Malli on yksi sarkainpysähdys.
• Puulla ei ole saavutettavaa nimeä. Ruudunlukuohjelman maamerkkinavigoinnilla ei ole mitään ilmoitettavaa.
• Lapsi-treeitem-kohteet ovat vanhemmassa ilman koostavaa role="group" -elementtiä. Ruudunlukuohjelmat eivät voi ilmoittaa ryhmää kokonaisuutena.
• aria-expanded="false" lehti-treeitem-kohteilla — ilmoittaa tyhjän kutistettavan tilan.
• Oikea/Vasen nuoli käytetään seuraavaan/edelliseen sisareen siirtymiseen laajentamisen/kutistamisen sijaan.

Esimerkki

<ul role="tree" aria-label="Project files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    src
    <ul role="group">
      <li role="treeitem" tabindex="-1">index.ts</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        components
        <ul role="group">
          <li role="treeitem" tabindex="-1">Button.tsx</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">README.md</li>
</ul>