Organizing your Org Charts
May 1, 2026
Never post an organizational chart as an image only — it is completely inaccessible to screen-reader users and violates WCAG 2.1 Success Criterion 1.1.1 (Non-text Content – Level A), which is mandatory for UAMS compliance by April 26, 2027 (DOJ Title II ADA final rule).
Instead, create a text-based, semantic version directly in the UAMS CMS using proper heading hierarchy and nested lists. This method is fully accessible, mobile-friendly, easy to update, and will pass Blackboard Ally for Websites checks.
Step-by-Step: Build an Accessible Org Chart
- Start with the highest level as Heading 2 Example: <h2>College of Medicine Leadership</h2>
- Use unordered (bulleted) lists with nested levels Example markup (copy/paste into the UAMS CMS Code Editor or use List blocks):
<h2>College of Medicine Leadership</h2>
<ul>
<li>Dean: Jane Doe
<ul>
<li>Senior Associate Dean for Academic Affairs: John Smith</li>
<li>Chief Financial Officer: Sarah Lee</li>
<li>Department Chairs
<ul>
<li>Internal Medicine: Michael Brown</li>
<li>Surgery: Emily Davis</li>
</ul>
</li>
</ul>
</li>
</ul>
- This creates a clear, logical structure that screen readers announce correctly.
- Optional enhancements
- Add job titles in strong tags: <strong>Dean:</strong> Jane Doe
- For very large charts, break into multiple sections with additional H2/H3 headings
- If you must include a visual chart for sighted users, upload it in addition to the text version and give it meaningful alt text (e.g., “Text version of this organizational chart follows the image”).
Why This Works
- Screen readers navigate it perfectly
- It reflows beautifully 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
What Not to Do
- Image-only org charts (even with alt text) → fails WCAG
- Tables used for layout → confusing reading order
- Screenshots of PowerPoint/Visio charts → unreadable on mobile + inaccessible