I always say that accessibility is more than just alt text. In the same vein, alt text is more than a few words shmushed together that loosely relate to an image. Good alt text is a crucial aspect of accessible content. It should include all the relevant information, context ,and elements that will help users interpret the visual content.
One of the areas where I see people struggle with alt text is when describing complex graphs, charts, maps or figures. People often do not know where to start in what to describe, either erring on the side of brevity “chart showing health trends” or information overload, listing each singular data point and its shading.
So let’s break it down. Here are my key takeaways on how to write effective alt text for images, charts and figures.
Be Descriptive and Concise
Alt text should accurately describe the content of an image or figure in a clear and concise manner. Aim to provide enough context to help users understand the main message or purpose of the visual element.
It’s preferable to write alt text as a complete sentence or phrase, using proper grammar and punctuation. This helps to ensure clarity and readability for users who rely on screen readers.
For example:
- Image: A photo of a sunset over a lake.
- Alt Text: “Sunset over a lake with a mountain in the distance with vibrant orange and purple hues.”
- Image: “A group of friends walking across a bridge.”
- Alt Text: “Four friends with backpacks hiking across a wooden railway bridge.”
Include Important Details
Make sure to include any relevant details that are essential to understanding the content. This could include colours, shapes, patterns, or specific elements within the image, chart, or figure.
Example:
- Chart: A bar chart showing monthly sales figures for the past year.
- Alt Text: “Bar chart of monthly sales figures for the past year, with the highest sales in December.”
Avoid Redundancy
If the image, chart, or figure is accompanied by a caption or text that already describes it, avoid repeating the same information in the alt text. Instead, provide any additional details or context that may not be evident from the caption alone.
Avoid Overloading with Keywords
This isn’t a SEO exercise! Avoid stuffing the alt text with unnecessary keywords or phrases, such as brand names or hashtags, unless it is essential to convey the information of the image.
Address the intent and key outcomes of data
Consider the context in which a chart or figure is being used and the intent behind its inclusion. Tailor the alt text to align with the overall message or purpose of the content.
For example, this graph (below) from the ABS that shows the proportion of people with diabetes by age and sex. It’s great that there is a text description below the chart, however I think it needs to be more informative.
Good: describes the graph and its data
Bar graph comparing male and female prevalence of diabetes across age groups, with age groups on the x-axis and percentages on the y-axis. Bars for males: 25–34: 0.6%, 35–44: 3.9%, 45–54: 5%, 55–64: 10.3%, 65–74: 19.6%, 75+: 20.8%. Bars for females: 25–34: 2.1%, 35–44: 1.4%, 45–54: 4.8%, 55–64: 9.9%, 65–74: 10.9%, 75+: 17.9%.
Better: describes the context and the key trends shown in the graph
Bar graph highlighting key trends in male and female instances of diabetes across age groups. Notably, both male and female percentages increase with age, peaking at 75+ with 20.8% for males and 17.9% for females. Females aged 25–34 have the highest percentage compared to males in the same age group, while males aged 65–74 surpass females in percentage.
In this instance, the text description provides additional information about diabetes (that Type 2 was the most common over Type 1) which is not shown in the graph. Therefore, non-sighted users are not privy to the age and sex trends that are presented in the graph, only the supplementary information.
However: I note that the ABS uses HighCharts for their charts. HighCharts have introduced an accessibility module that includes a long description of the chart in the hidden screen reader information region, and the option to navigate the data points as a data table.
This is a very good and sufficient solution to making the data accessible, however I would also prefer to include a visible text summary of the data trends. This way users with cognitive or other vision issues can access a summary of the trends.
Provide multiple ways to access information
Use a <figcaption>
Use the HTML <figcaption> element to provide a caption or description. Give a concise and clear summary of the key information in the <figcaption> element which should be placed within the <figure> element:
<figure>
<img src="graph.png" alt="Description of the graph">
<figcaption>Pie chart showing the distribution of the company’s annual budget, with 40% allocated to salaries, 30% to marketing, and 30% to operations.</figcaption>
</figure>This method best suits shorter descriptions with simple trends or data to convey.
Use a longdesc attribute
A “longdesc” attribute is typically used within an <img> element and references a URL where a detailed description is located. This method is better for very detailed descriptions as the HTML document can house a descriptions of any length.
<img src="graph.png" alt="Summary of the graph"
longdesc="detailed-description.html">In this example, “detailed-description.html” is the URL of the detailed description. If using this method I would also suggest linking to the HTML document (method below) as well as “longdesc” is not widely supported by all browsers and assistive technology.
Text descriptions in an accordion beneath the data
This approach allows users to selectively expand or collapse the accordion to access the description, offering a neat and user-friendly way to manage information visibility. Keeping the accordion collapsed by default minimises information overload for the users. If you choose this method, make sure that the accordion component is accessible and is marked up with appropriate semantic HTML.
Text descriptions as a linked HTML page
The benefit of this method is that there is no restrictions on length, so you can use headings and structured text to explain the complex information effectively. That doesn’t mean you should go overboard in your descriptions and analysis — refer to the guides above on clear and concise descriptions. Use a clear text link to refer users to this page, for example “View graph description”.
This method should supplement the method above to use the longdesc attribute.
Text descriptions as rich text
If the data descriptions aren’t lengthy there’s no reason to hide them behind a HTML page or accordion — they can simply be displayed underneath the data itself. In the ABS example above, the supplementary information would be replaced or appended with the graph descriptions.
WAI-ARIA descriptions
An aria-describedby attribute can be used to describe an image. This is best for shorter descriptions as the text is treated as one continuous paragraph of text and does not support formatting.
A note on Diversity and Inclusion
When describing images with minority groups or identity markers in alt text, it’s important to approach the task with sensitivity and consideration. Strive to represent individuals accurately and respectfully, avoiding stereotypes or assumptions based on race or ethnicity.
Only mention identity markers — such as race, ethnicity, body size and shape, age, generation, sexual orientation, religion, disability — if they are relevant to the context of the image. A lot of the time it may be — you might be describing an image of “a LGBTQIA+ pride parade in Sydney with people holding rainbow flags” on your company’s culture page, or “a group of people celebrating Diwali with candles and rangoli” for a local event.
When you find it is appropriate to mention these, do so in a way that acknowledges the identity and individuality of the person/people, and without judgement or bias.
Likewise, when describing data and trends that may not reflect positively on certain groups, it’s important to be sensitive to this. Avoid stereotypes and assumptions based on the data, and focus on describing the trends with neutral language without jumping to conclusions. It may be pertinent to include historic, social or economic factors to contextualise the data for users, or a disclaimer that explains the limitations of the data if it could be easily misinterpreted.
