Introduction
This document will help people to add data visualizations to Extension scholastic works and program webpages in ways that are more accessible, provided those visualizations:
- Are simple.
- Use good color contrast.
- Use the appropriate chart type for the data.
- Feature clear axes labels, and legends and keys.
- Are accompanied by source and contact information.
- Use appropriate, clear and ethical scales for the data.
- Use secondary indicators of meaning,such as patterns or shapes, when meaning is conveyed by color.
- Where possible, use code to display the visualization instead of an image.
- Where possible, spell out the data's values.
Note: To meet the requirements of federal law and University policies on accessibility, if visualizations for Extension publication and program webpages were not created as described above, you may need to redesign them. Complex visualizations, such as infographics, are particularly challenging to design well. One tactic that may work is splitting complex visualizations into several simple ones. To learn more about working with complex images, see the Diagram Center's image description guidelines.
About alternate text
Alternate text is a short, written description of an image that captures in text what the image conveys visually.
When added to an image, alternate text:
- Helps people who use screen readers to understand the information the image conveys.
- Provides extra info to search engines, helping our pages to show up well in search results.
- Shows up in place of the image, if the image fails to load. Sometimes website visitors with limited data or on slow connections change their settings to ensure images don't show up. They'll see the alternate text instead.
To add alternate text:
- Follow these instructions to add an image.
- Step 6 covers adding the alt text to the image and gives basic tips on writing good alt text for images.
About using images of a data viz
- First, ensure your data visualization was designed with accessibility in mind. See the introduction above to learn more. If it wasn't designed with accessibility in mind, you will need to redesign it before moving to the next step.
- Insert the data viz into the webpage as an image, following these instructions to add an image.
- Then, follow this formula to create alternate text for the image of the data visualization: "Chart type of type of data where reason for including the chart." (Cesal). Here are a few examples:
- Example 1: Graph or chart - "Line graph of number of bananas eaten per day in 2020 where more bananas are eaten during the COVID-19 pandemic."
- Example 2: Diagram - "Lifecycle of the banana plant where its two phases are vegetative and reproductive."
- Include a link to where a person can obtain all of the data/info that was presented visually in the data visualization in its image caption. Here are a few image caption examples:
- Example 1: Data you got from somewhere else - "Figure 1: Bananas eaten per day in 2020. Data from the USDA's 2020 Bananas Report." Link the text "USDA's 2020 Bananas Report" to the report on the USDA's webpage.
- If the data isn't available on the USDA's website (at the time of publication and/or publication recertification), either:
- Best option: Add "See Table 1." to the end of the caption, insert a table in the pulication that contains all of the data from the chart, and link the text "See Table 1" to the table. See Adding accessible tables to Extension publication or program webpages.
- Other option: Add info on requesting the report to the caption. "The report is available by request to bananas@usda.gov." Know that you will need to field requests from people if the USDA cannot fulfill requests accessibly, quickly or at all.
- Example 2: Data you collected - "Figure 1: Bananas eaten per day in 2020. See Table 1." Insert a table in the publication that contains all of the data from the chart, and link the text "See Table 1" to the table. See Adding accessible tables to Extension publication or program webpages.
- Example 3: Diagram with info that was explained in the webpage - "Figure 1: The lifecycle of a banana plant. See Where do bananas come from?" Link the "See Where do bananas come from?" text to that heading in the document.
Figure 1: The lifecycle of an annual weed. See Life cycle.
- Example 4: Diagram with info that was not explained in the webpage - First, consider adding a section to your webpage to explain your diagram. This will help everyone to better understand both your webpage and your diagram. If you make this change, you'll then follow Example 3 above. If you don't (WHY??!), then you'll follow this example: "Figure 1: The lifecycle of a banana plant includes two phases. The first phase is the vegetative phase. In this stage, the plant... The second is the reproductive phase. In this stage, the plant... (include all detail from the graphic)."
- Note: People pay attention to captions. You can take advantage of that attention to drive home the point of your data viz. This will help people with cognitive impairments to understand your point. Here's how:
- Traditional caption: "Figure 1: Bananas eaten per day in 2020. See Table 1."
- Point-driven caption: "Figure 1: Banana consumption soars during the pandemic. See table 1."
Important: The alternate text and the image caption should not be identical.
About coding data visualizations
If you know how to code, you may insert data visualizations into Extension publication and progam webpages provided that your code is accessible. Accessible materials are defined by the WC3 as perceivable, operable, understandable and robust. Here are standards and recommendations to guide you:
Here are layouts and icons to use in your designs.
When you paste your code into the webpage, do so in the source view of the WYSIWYG. To switch to the source view, click the source button in the WYSIWYG. It's the first button in the first row of the WYSIWYG. It says source on it and looks like a piece of paper with a clipped right corner.
For an accessible data viz example, see the University's COVID dashboard. It uses Highcharts.
For an accessible simple infographic example, see the Kickoff to Kindergarten story in volume 33 of our College's newsletter.
References
