Accessible Organization and Flow Charts

Guidance and support for presenting organizational structures and flow charts in a clear, accessible, and maintainable way.

Employees

Web pages and digital content.

Recommended Approach for organizational structure and flow charts that fully meet WCAG 2.1 AA compliance standards:

• Use bulleted / numbered lists to convey organizational hierarchy and structure.

  • Lists are easy to update and naturally communicate relationships.
  • Text‑based lists are also inherently more accessible and WCAG‑friendly than graphical representations.
  • They adapt well to screen readers, keyboard navigation, zoom-in/zoom-out, and responsive layouts, without requiring additional accessibility work.
     
• Avoid using organizational structure flow‑chart images (including PDFs or embedded graphics).
  • Flow‑chart graphics introduce an ongoing maintenance burden and provide limited accessibility value.
  • They require separate alt text, must be manually updated whenever roles or reporting lines change, and often present clarity, zoom, and reflow problems across devices (Reflow is how a web browser recalculates the positions, size, and layout of elements on a webpage).
  • Even when alt text is provided, flow‑chart images are difficult to interpret on phones, smaller screens, and responsive layouts.
  • In practice, this means the structure must be maintained twice—once in the authoritative text and again in the image—creating unnecessary duplication of effort and increasing the risk of outdated or inconsistent information.

Examples

Org Charts:

Org charts can be represented as an unordered list, with each bullet showing a person and their role in the hierarchy. See example below:

• Director of Operations
  • Operations Manager 1
    • Operations Assistant
    • Operations Team Lead
      • Customer Support
      • Customer Support
  • Operations Manager 2
    • Logistics Officer
    • Quality Control

Flow Charts:

Many flowcharts can be represented as ordered or unordered lists with clear instructions, offering an alternative to a graphical flowchart. See the example below.

1. User submits a request
2. Is an answer to the request available in documentation?
   1. If yes, provide documented solution to customer
   2. If no, continue below
3. Is a team member able to field and answer the request?
   1. If yes, assign team member to the requester
   2. If no, continue below
4. Follow up with requester to get more information about the nature of the request.