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 and not the main way information is presented.
- Screen readers navigate it perfectly.
- It reflows easily on phones and tablets.
- Search engines can index names and titles.
- Updates take seconds — no redesign needed.
Use a Heading Structure Hierarchy list anytime a visual chart might be used.
- Use proper heading structures (Heading 1, Heading 2, Heading 3 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.
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 organizational chart.
Create a Visual Chart (Optional)
If needed, use your text outline to create a visual organizational 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 Heading 1 for the org chart title.
- Use Heading 2-Heading 4 (and beyond) 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 alternative text that points users to the text version.
- Optionally link to a downloadable PDF of the visual chart.