I was playing around a few months go create the best way to build an organizational chart that are accessible and thought it was time to publish this blog post. So I created what I’m hoping is an accessible organizational charts page. The charts are text based, and I hope they make sense visually as well to assistive technology users like screen readers.

The first chart is built using nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people. The second example organizational chart is built using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.

I’m hoping creating organizational charts one of these ways work. I’m thinking by making organizational charts this way might not work out well if you have a large organization, but could be useful to smaller teams or companies.

If you use assistive technology can you please tell me if these organizational charts are helpful in conveying an organization’s structure.