Every chart needs its underlying figures available as text or a table, every map needs the address and directions written out, and neither should rely on colour alone to distinguish what it shows.

Charts

A chart exists to make a pattern quicker to grasp. For somebody who cannot see it, the chart contributes nothing and the pattern has to come from somewhere else.

Alternative text alone is rarely enough. A sentence can carry the headline, and it cannot carry twelve months of figures.

The workable arrangement has three parts.

A short description of what the chart shows and its main finding, in the alternative text or a caption. Revenue by quarter, rising through the year with a dip in the third.

The figures themselves, as a proper table, either beside the chart or in a disclosure below it. The table is the accessible version of the chart, and marking its headers correctly is what makes it navigable.

The finding in the surrounding text, since the point you are making with the chart should be written down regardless. If the chart is doing work no sentence does, the sentence is missing.

Colour in charts

The most common failure and an easy fix.

A legend distinguishing five lines by colour alone is unusable for a substantial share of readers, and unusable in print or greyscale for everybody.

What works alongside colour: different line styles, direct labels on the lines themselves rather than a separate legend, different markers, and patterns in bars.

Direct labelling is the strongest of those and it improves the chart for sighted readers too, since it removes the back-and-forth between legend and line.

Contrast matters as well. Pale pastel palettes look modern and fail against a light background for anybody with reduced vision.

Maps

An embedded map is one of the least accessible components on a typical business site, and it is on almost every contact page.

What it does not provide: the address as text, the route in words, and any way to use it without dragging.

What to publish alongside it, always.

That last one is more useful than the embedded map for nearly everybody, since the visitor's own application already knows where they are.

The entrance detail deserves emphasis. Somebody with a mobility impairment needs to know whether there are steps, where the accessible entrance is, and whether the parking is close, and no map shows that.

The embed itself

Worth checking rather than assuming.

Third-party map embeds frequently arrive with an unlabelled frame, which a screen reader announces as an unnamed region, and with interactive controls that trap keyboard focus.

Labelling the frame is a small fix. Making the map skippable by keyboard is the other one.

Loading it only on interaction is worth doing anyway for performance, and it happens to remove the focus trap for everybody who never opens it.

Infographics

The hardest case, and the honest answer is unpopular.

An infographic is a page of content saved as a picture. Everything in it is invisible to screen readers and to search.

Alternative text cannot carry it, because the content is a page rather than an image.

The real fix is publishing the content as a page, with the graphic as an illustration of it rather than as the delivery mechanism. That serves everybody and it makes the content findable, which the image never was.

If the graphic must stand alone, the full text needs to be on the page near it, not in an attribute.

The general rule

Any visual carrying information needs that information available another way.

Not a description of the picture. The information the picture was chosen to convey.

Which is the same distinction that governs image descriptions generally, as set out in alt text that is actually useful.

Frequently asked questions

Is alternative text enough for a chart?

Rarely. A sentence can carry the headline finding but not the underlying figures. Provide the data as a proper table alongside or below the chart.

What are the three parts of an accessible chart?

A short description of what it shows and its finding, the figures as a marked-up table, and the finding written in the surrounding text.

What is the most common chart failure?

Distinguishing series by colour alone. Add line styles, markers, patterns, or better, label the lines directly, which helps sighted readers too.

What should accompany an embedded map?

The full address as text, written directions, parking and entrance details including steps, public transport, and a link that opens the visitor's own map app.

Why do map embeds cause problems?

They frequently arrive as unlabelled frames announced as unnamed regions, with controls that trap keyboard focus. Loading on interaction removes both.

What about infographics?

They are a page of content saved as a picture, invisible to screen readers and search. Publish the content as a page and use the graphic as illustration.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Contact page that is a map and nothing else?

We add the address, the entrance detail and the directions, which is what somebody actually needs to reach you.

Start a Conversation