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
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:
imgelement, 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.