👩🏫 2.3 Accessibility in Data Visualizations & Beyond (Tabbed)
Section 3: Accessibility in Data Visualizations & Beyond
In addition to the communication considerations addressed previously, there are two larger considerations to make when designing a data visualization in terms of accessibility.
Will individuals using screen readers be able to access your data visualization?
Will individuals who are color blind be able to access your data visualization?
We will also look into other accessibility issues within communication, since data visualizations is just one way we communicate about data to our audience. This content should take about 🐢⌚ 30 minutes if you worked through all of the content (read, watch at 1x speed, attempt problems then watch/read feedback). Expand the tabs below to explore.
To make your display accessible for those using screen readers, you should provide alternative text (alt text). Alt text describes the appearance and function of an image on a page.
💡 Alt text does more than help individuals with screen readers.
If the image fails to load, the alt text will be displayed instead. This will allow your content to be displayed seamlessly even when users encounter technical issues.
Alt text allows search engines to index the images appropriately.
Alt Text for Graphs
Alt text for graphs should include:
The type of visualization (bar chart, pie chart, line graph, etc)
The type of data (number of colors in a flag per country)
💡 Using a color contrast checker is also a great idea for presentations to ensure legibility for all audience members, not just those who are colorblind.
When using colors in a data visualization (and in any other communication, like a slide deck), you need to have sufficient contrast between them. Additionally, color should not be the sole means of communicating information. Consider the display in Exercise 3, while there are colors to differentiate between the different social media apps, they have a high enough color contrast that those unable to differentiate between purple and blue will still be able to identify the app. Here are some helpful tips from UW’s Accessible Data VisualizationsLinks to an external site.:
Use a simulator such as CoblisLinks to an external site. to see what your color scheme might look like to someone who is colorblind
StatCrunch
StatCrunch has two good options for color schemes in displays: Colorblind safe and grayscale.
Understanding Check
Try out Coblis to see how two of our more colorful graphs appear to someone who is colorblind. After clicking through a few of the simulations, answer if the displays were accessible to these individuals.
You can right click and "Save image as..." to get the images to use!
Accessible Tables
As statisticians, we often use tables to help describe our variables for readers. We saw frequency tables in Representing a Categorical Variable with TablesLinks to an external site., but we will also see tables as a way to display summary statistics for a numeric variable and contingency tables as a way to investigate and summarize relationships between two categorical variables. We also have our original data presented in tables.
For our purposes, this is mostly informational as we will use Google slides and docs in our course. Unfortunately, creating accessible tables in Google products is more challenging than in formats that allow for easier html (like here on Canvas). I use an add-on called Grackle Docs to code my tables for accessibility in our lecture notes.
Tables convey information spatially by organizing data in a grid but students with sight impairments can't benefit from this visual illustration of the relationship between cells. To make tables usable by everyone, they need HTML markup that indicatesheadercells (describing the category of data in that row/column) anddatacells.
Table Headers
In the majority of data tables, column headers are needed. Some tables do not have data that would require any header cells, and some tables need both column and row header cells indicated, as shown below. The example table below showscolumnheaderandrow headercells.
Example of Table Headers
Col Header
Col Header
Col Header
Col Header
Col Header
Breed
Type of Breed
Coat
Lap Cat
Adult Weight
Row Header
Bengal
Hybrid
Short
No
15
Row Header
Scottish Fold
Natural/Mutation
Short
No
9
Row Header
Siberian
Natural
Long
Yes
14
Row Header
Tonkinese
Crossbreed
Short
Yes
10
Understanding Check
General Accessibility Considerations
Headings
Headings communicate the organization of the content on the page. Properly styled headings give users of screen readers and other assistive technology the ability to scan a page for structure and content (just as sighted readers tend to do).
Our lecture notesLinks to an external site. use headings. In addition to helping those using screen readers, they allow readers to scan for information quickly. When headings are used in something like Google Docs or Word, readers can also see an outline and easily skip to a section.
Lists
Lists provide an easily understood, structured order to content. Lists can be a potential replacement for simple tables (which tend to be more difficult to navigate using a screen reader). As long as we're talking about lists, let's clarify that there are two kinds:
Ordered (numbered): these are used to indicate a sequence or progression
Unordered (bulleted): these are used for content items with no order of importance
Lists should be created using the Rich Content Editor (RCE) rather than manually (using the spacebar) so the list is properly tagged in the html code and a screen reader device can interpret it as an actual list.
Links
Most screen readers and talking browsers scan a web page for all the links and then create an alphabetized list of them for the page user. Good link text provides a clear description of where the link will take the user (so the link is understandable out of context from the rest of the page). Because screen readers typically say "link" before each link, the phraseclick hereorlinkis unnecessary, even if it precedes a more meaningful phrase. We all know what to do with a link, even those of us using screen reader devices.
We've already discussed alt text for data visualizations, but occasionally we may want to include images that are not data visualizations. They should also have alt text.
Writing good alt text can be a bit more of an art than a science. It should be succinct--not more than 20 words is the recommendation--while communicating the "experience" of the image. A lot depends on the context of the page content where the image is being presented. If much about the image is already described in the surrounding text, the alt text can be quite brief.
Tips for Writing Alt Text
Ask yourself: "Why am I using this image? What information is it meant to convey?”
Keep it concise yet informative (convey the full experience of the image).
Don't include "image of" or "picture of" in the alt text; the screen reader will indicate it's an image. An exception would be if it's germane to the learner's experience to know, for example, that the image is a photo collage or an engraved illustration.
Remove the file type (.jpg, .png, etc.) from the alt text
Example
Not So Good
Alt Text: online learning
Good
Alt Text: computer mouse sitting on top of open book to represent the idea of online learning
When Is Alt Text Not Needed?
If an image is purely decorative and provides no useful information to the reader or if the information provided by the image is conveyed effectively elsewhere in the page content. In the latter case, providing alt text would be redundant. It is very likely in our contexts that alt text would not be necessary unless we're explaining part of the data collection process.
Understanding Check #1
Understanding Check #2
Healthy, energy efficient buildings
The County reduced overall energy use by 36%, exceeding the 2020 target by 26 percent.
Solar photovoltaic installations at County buildings generated 11,705 megawatt hours (MWh) of electricity, equivalent to powering 999 homes (with average usage) for one year.
All new County facilities are designed to achieve LEED Gold certificationLinks to an external site. or higher and are evaluated to be constructed as zero-net energy (ZNE), which means that they generate as much or more energy as the building consume.
Given the paragraph and image shown, select TWO examples of the most appropriate alt text.
Understanding Check #1