mardi 7 février 2017

How to make a tree-like structure accessible with aria attributes

Im trying to make a tree like structure accessible with WAI-ARIA attributes. I have the following structure.

  • Book
    • Chapter 1
      • Page 1.1
      • Page 1.2
      • Chapter 1.1
        • Page 1.1.1
        • Page 1.1.2
        • Chapter 1.1.1
          • Page 1.1.1.1
    • Chapter 2
      • Page 2.1
      • Page 2.2

And when I navigate the book only the nesting path and the items in the current chapter is visible. E.g. lets say that Chapter 1.1 is expanded then this is what I would see:

  • Book
    • Chapter 1
      • Chapter 1.1
        • Page 1.1.1
        • Page 1.1.2
        • Chapter 1.1.1

How can I make this accessible how can I create a semantic html structure to represent this? The main difference from a regular tree like structure described here http://ift.tt/2jXnY1R is the fact that all the pages in the parent nodes will be hidden. It's like you dig down deeper into the structure.




Aucun commentaire:

Enregistrer un commentaire