Tree Example 1

Example

Example using in-line ARIA markup | HTML source with in-line ARIA
Example using ARIA markup from CLASS attribute information | HTML source of ARIA markup from CLASS attribute

Foods

Fruits
- Oranges
- Pineapples
- Apples
- - Macintosh
  - Granny Smith
  - - Washington State
    - Michigan
    - New York
  - Fuji
- Bananas
- Pears
Vegetables
- Brocolli
- Carrots
- Lettuce
- - Romaine
  - Iceberg
  - Butterhead
- Spinach
- Squash
- - Acorn
  - Ambercup
  - Autumn Cup
  - Hubbard
  - Kabocha
  - Butternut
  - Spaghetti
  - Sweet Dumpling
  - Turban

Keyboard Shortcuts

Up: Select previous tree item
Down: Select next tree item
Left: Collapse node if possible
Right: Expand node if possible
Tab: Navigate away from tree

ARIA Roles and Properties

Role: role="tree"
Role: role="treeitem"
Role: role="group"
States and properties:
- aria-describedby
- aria-labeledby
- aria-expanded

ARIA Examples