tree

Hvornår skal det bruges

Til en egentlig hierarkisk browser: filsystem, organisationsdiagram, dybt indlejret taksonomi. Underordnede elementer er role="treeitem", grupperet efter behov i mellemliggende role="group"-omslag.

Hvis dit “træ” i virkeligheden er en navigationsmenu med to-tre niveauer af links, bør du ikke bruge role="tree". Brug <nav> med indlejrede <ul> og <a> i stedet — Tab + Enter er det, brugere forventer til navigation; piletastersnavigation i en sitemenu er uvant og langsom.

Et træ SKAL have et tilgængeligt navn. Sæt aria-multiselectable="true", hvis flere treeitems kan vælges på én gang.

Tastatur- og fokuskontrakt

Ifølge APG treeview-mønstret:

• Tab flytter fokus ind i træet til det fokuserede (eller første) treeitem; Tab flytter fokus UD.
• Op/ned piletaster flytter fokus mellem synlige noder og springer over sammenfoldede underordnede.
• Højre pil: hvis sammenfoldet, udvid; hvis udvidet, flyt til første underordnede.
• Venstre pil: hvis udvidet, sammenfold; hvis sammenfoldet, flyt til overordnet.
• Home / End flytter til første / sidste synlige node.
• Enter eller mellemrum vælger det aktuelle treeitem.
• Bogstavssøgning: indtastning af bogstaver springer til matchende synlige noder.
• For træer med multivalg: Shift+Pil udvider sammenhængende valg; Ctrl/Cmd+Klik skifter individuelt valg.

Brug et glidende tabindex: kun det aktuelt fokuserede treeitem har tabindex="0".

Typiske fejl

• Hvert treeitem har tabindex="0". Mønstret er ét tab-stop.
• Træ uden tilgængeligt navn. Skærmlæserens landmærkenavigation har intet at annoncere.
• Underordnede treeitems placeret direkte i den overordnede node uden et omsluttende role="group". Skærmlæsere kan ikke annoncere gruppen som en enhed.
• aria-expanded="false" på bladnoder treeitems — annoncerer en tom sammenfoldstilstand.
• Højre/venstre piletaster bruges til næste/forrige søskende i stedet for udvid/sammenfold.

Eksempel

<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>