Back in 2016 I was looking for the best way to code an organizational chart that was accessible and thought it was time to publish an update blog post with an additional examples and some updates. My organizational chart example page now has three examples instead of the two examples from before.
I’m hoping the accessible organizational charts page using text and are code based (HTML and CSS) instead of graphics make sense visually, but more importantly to those using assistive technology users like screen readers.
Example Charts
The first example organizational chart was created using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.
The second version uses unordered lists that contain headings within list items that have built in indentation.
The third chart uses nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people.
Conclusion
I’m hoping one of these organizational charts works better for those using assistive technologies like a screen reader.
NOTE – I think making organizational charts this way might not work 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 or confusing.
Thanks in advance for your help.