Accessibility: Organizational Charts
Most organizational charts are visual diagrams that are not accessible. They depend on visual layout to show relationships, which can prevent some users from understanding the content.
Visual charts should therefore be supplemental, not the main way information is presented.
- Screen readers navigate it perfectly.
- It reflows easy on phones and tablets.
- Search engines can index names and titles.
- Updates take seconds — no redesign needed.
- Blackboard Ally for Websites gives it a green accessibility score.
Anytime that a organizational chart might be used, instead use a visual chart.
- Use proper heading structures (H1, H2, H3 and beyond if needed) in a logical order.
- Use nested, bulleted lists to show reporting relationships.
Example
SDSU uses structured text organizational charts on external sites, such as those maintained by University Marketing and Communications (UMC).
Accessible organizational charts are not visual charts, but rather hierarchical text structures.
Start With a Text Outline (Required)
Create a text-based version of your organizational chart using a nested list that shows departments and roles in hierarchical order. Include any joint or dual reporting relationships. This text version is the accessible foundation of your org chart.
Create a Visual Chart (Optional)
If needed, use your text outline to create a visual org chart using your preferred diagramming tool. Follow institutional branding and accessibility standards. The visual chart should support—not replace—the text version.
Publish on the Web
Structure your webpage using proper headings and lists:
- Use an H1 for the org chart title.
- Use H2-H4 (and beyond) headings for organization and department leads (as appropriate).
- Use nested unordered lists to show reporting relationships.
- Use accordions or expandable sections if helpful.
If you include a graphical org chart:
- Add alt text that points users to the text version.
- Optionally link to a downloadable PDF of the visual chart.