Environment
Flow Charts or Org Charts in digital documents or web pages.
Issue
How can I create accessible flow charts?
How can I create accessible org charts?
Resolution
To make graphical flow charts or org charts accessible in digital formats and for users who can't see the original image, most charts can be represented as nested lists of information. The nested structure can show hierarchical relationships and can also be used to direct the user to next item.
Org Charts
Many org charts can be represented with an unordered list.
Each bullet shows a person and their position in the hierarchical structure.
For example:
This works as an accessible alternative to a graphical or purely image-based representation that can be difficult to understand for screen-reader users.
See more resources on creating accessible org charts from Oregon, UC Berkeley, and the University of Washington and a video tutorial on accessible org charts in MS Word.
Flow Charts
Many flow charts can be represented as a list (ordered or unordered), with clear instructions that direct the reader how to move forward. This can serve as an alternative to a graphical flow chart. See example below:
- Customer submits a question
- Is the answer available in documentation?
- If yes, provide answer to customer
- If no, continue below
- Is another team able to answer the question?
- If yes, reassign customer request to that team
- If no, continue below
- Follow up with customer to get more information about the request or question.
General Guidance
Graphical charts can be made more accessible to visual users with simple design, good contrast, large fonts, and understandable labels.
There may be additional ways to create accessible versions of graphical charts and information in specific cases. For example, some flow charts or org charts can be presented in table form. For example, the same information in an org chart could be presented in a table with columns for Employee, Title, Supervisor, and Direct Reports, with a row for each employee.
Additional Information
Need additional information or assistance? Contact the ITS Service Center.