Accessible org charts on web pages

An org chart (organization chart) is typically presented on a web page as an image. This creates accessibility problems: some users cannot see the image or cannot read the text in it because it is too small for them. There is no practical way to construct an org chart using HTML and CSS so that the texts in it and its structure would be available to all users. Instead, we need to consider how to provide a textual alternative. It need not be plain text; it could contain list or table markup, for example.

The obvious approach is to use the alt attribute in the img element that is used to embed the image. However, for technical reasons, alt texts should be short, preferably less than 50 characters, and they cannot contain markup. Therefore, I suggest a somewhat different approach.

The approach is suitable especially when designing new pages. It is more difficult to fix existing pages to make them more accessible than to design accessible pages. The approach works best for relatively simple org charts—but org charts should really be simple, especially on the web. When needed, divide a chart into smaller manageable pieces by removing lower-level structure from the main chart. You can then link from the main chart by making it a client-side image map in the image version and by using normal links in the textual alternative. Large org charts, when presented as a single chart, as e.g. the UN org chart, are very difficult even to average users.

The approach I recommend is the following:

1. Create first a text presentation of the organization. You may use lists (list markup), including nested lists, if necessary. Read it aloud, at least in your mind, to check that it makes sense that way. (This helps to ensure that someone listening to the information using a screen reader can understand the information.)
2. Then create whatever graphic presentation you like.
3. Include a textual link to the firstly created presentation onto the page where you have the graphic presentation.
4. Include a textual link to the presentation created in step #2, onto the page where you have graphic presentation.
5. If the graphic presentation is embedded as an image using the img element, use the attribute alt="(Organization chart)". For other embedding methods, use corresponding tools for specifying a textual alternative. Note that such a short text is sufficient, since the information content is provided in another way. (The short text can be useful to people who use a graphic browser with automatic image loading disabled.)

A presentation that uses nested lists can be styled using CSS to be visually somewhat tree-like. As a demonstration, see Elvish Genealogy by Nick Theodorakis. (It is a fictitional genealogy tree, but such a tree is structurally similar to a simple orgchart.)

The textual link might be implemented with markup like the following:

<div><small>There is also a <a href="orgtext.html">textual
description of the organization</a> that contains the same
information as the chart below.</small></div>

If this approach is not feasible, then it is best to mention that the org chart is available as an image only and perhaps give contact information for asking about the organization. If you can’t create an accessible version of organizational information, it is better to admit and express that than to do something half-baked that wastes everyone’s (authors’ and users’) time, like adding “accessibility features” to a presentation that cannot be, by its very nature, accessible to all.