Calderdale CouncilAccessibility Guidance

Creating Accessible ContentFlow charts

Flow charts and similar are often either:

  • A collection of text boxes and shapes;
  • one big self-contained image.

Both formats rely heavily on visuals. This causes several problems for users of assistive technology. See:

Example

"An example organisational chart shows a common company management structure."

Someone who cannot see this picture of a chart, will be presented with the alternative text:

"An example organisational chart shows a common company management structure."

This is a great summary, but it isn't accessible on its own because it doesn't convey the same meaning.

What if we describe the image in more detail?

"An example organisational chart shows a common company management structure. The CEO is at the top. Director A and Director B sit underneath the CEO. Manager A and B sit underneath Director A. Manager C and D sit under Director B. Person A, B, C and D sit under Manager A. Person E,F,G and H sit under Manager B. Person I J K and L sit under Manager C. Person M,N,O and P sit under Manager D."

This conveys the same meaning, but it's too long, unstructured and quite confusing when read in a linear fashion. There is no way to navigate through certain branches or jump to others like you can visually.

Creating accessible charts

The key is to represent relationships without relying on visual elements such as:

  • Text position;
  • Shapes (e.g. lines/arrows);
  • Images.

You can do this with semantic elements such as headings and lists.

The process

  1. Start with an accessible text version. This helps the design process and means you have an accessible version ready.
  2. Design a graphic representation. If this version can not be made accessible, include a link to the accessible version.

Example of an Accessible organisation chart

  1. CEO

    1. Director A

      1. Manager A

        1. Person A

        2. Person B

        3. Person C

        4. Person D

      2. Manager B

        1. Person E

        2. Person F

        3. Person G

        4. Person H

    2. Director B

      1. Manager C

        1. Person I

        2. Person J

        3. Person K

        4. Person L

      2. Manager D

        1. Person M

        2. Person N

        3. Person O

        4. Person P

Accessible flow chart

Flow charts are slightly more complex because they include decision logic. This can be handled by using:

  • clearly labelled headings;
  • concise instructions;
  • in-page links to help users quickly jump to other sections.

Example of an accessible flow chart

"An example of a flow chart showing the process for troubleshooting network problems"

Was this page helpful?