One of the most popular topics in the accessibility space right now is accessible data visualizations and how to make graphs and charts accessible for people with vision loss- inclusive of blind, low vision, and visual impairment. Since this is such an emerging space, a lot of people have different answers for how to make information accessible for people with vision loss, and today I will be sharing my own answer for how to create accessible map charts for low vision and blind users, based on my academic background in data science and experiences as a user with low vision.
What is a map chart?
In this context, a map chart is a type of chart that shows data points on a geographical background. For example, a map chart may be used to compare values against different geographical regions such as the number of flu cases in each state. the most popular restaurant in each city/county, or world populations. For a data visualization project I did in college, I displayed the number of spam phone calls I received from different area codes on a map chart titled “Spammin’ USA.”
What does it mean to design an accessible chart?
When designing accessible map charts, there are two different sets of considerations for creating charts- visual accessibility and nonvisual accessibility. Visual accessibility refers to the design of a chart, considering elements such as color choice, font size, and contrast, while nonvisual accessibility focuses on text-based descriptions that give information about the chart data, such as alt text and image descriptions that can be read with assistive technology. Both are equally important when designing for users with vision loss since people with low vision often use both visual and nonvisual accessibility tools to interpret charts and graphs, and people with disabilities other than vision loss benefit from reading content designed with visual and/or nonvisual accessibility in mind.
Visual Accessibility for map charts
How to design accessible map charts
- Avoid conveying information through color alone, and pair color-coded information with text labels. For a real-world example, consider that a stop sign not only has a distinctive red color, but it also has a unique shape compared to other signs and a bright red STOP label.
- Consider using textures instead of colors to convey information
- Use colorblindness-friendly color schemes- data visualization tools like Tableau often have these built-in
- Make sure that colors and labels are high contrast and can easily be recognized/read. An example of poor contrast would be having gray text on a white background, while black text on a white background would be easier to read
- Consider placing the legend underneath the chart instead of on the side so that it is easier to reference with screen magnification tools
- For text on a colored background, add a thin white outline to black text to make it readable on any color background
- In visualization tools, set font sizes in rem instead of pixels so that they are easier to scale up/down- some tools do this automatically
Related links
- Choosing High Contrast Color Schemes For Low Vision
- Zoom Magnifier and Low Vision
- My Eight Favorite Free Fonts For Print Disabilities
Nonvisual accessibility for map charts
What is alt text? What is an image description?
Alt text is a short, written description that displays in place of an image if the image fails to load that tells people what is in an image, such as text, colors, or basic essential details. Screen readers will read alt text aloud so that users who are blind or that have low vision can understand what is in an image. If someone fails to add alt text for an image, the screen reader will either simply say “image” or ignore the image entirely, which means that users miss potentially valuable visual content. If an image loads correctly, alt text is invisible to users that do not use assistive technology.
An image description is a longer description that is typically exposed, meaning anyone can see it whether they are using assistive technology or not, though users can also insert image descriptions in a similar manner to alt text that remain hidden. An image description serves as a descriptive caption, which is great for people with vision loss, language learners, or people with cognitive or processing disabilities. I recommend keeping image descriptions exposed or having a link to image descriptions in content so that users can benefit from the additional description.
How to write alt text and image descriptions for map charts
Map charts often have a lot of different areas, especially maps of entire countries or city/county maps, so writing out all of the points in an alt text or image description can get tedious. For this reason, it is helpful to link to a csv file or Excel/Sheets workbook so that users can examine the data on their own and get highlights from the alt text/image description. Alt text and image descriptions should include the following information:
- The chart title and type, i.e map chart of “Map of Spam Calls Received in 2019, Grouped By State”
- Brief description of legend, i.e states with fewer than ten calls are red, while states with more than 100 are blue
- Largest value or values in the chart- for the map of 50 states, I mentioned the two highest values
- Smallest value or values in the chart
- Any interesting outliers- are there places with a much higher or lower value than others?
- Share information about how to find external link to data- I recommend including it in the caption
Related links
- Seven Myths About Alt Text
- How To Add Alt Text On Social Media
- How To Access Images Without Alt Text
Additional tips for how to create accessible map charts
- Label the link to the dataset with a descriptive label such as ” data source” and avoid using nondescript labels like “x”
- Use descriptive titles for charts so that it is clear to the audience what the chart is about
- When using Tableau, users can make data available to other viewers by selecting the “Allow others to download or explore and copy this workbook and its data” option in Tableau Public under Toolbar settings
- Another interesting option for creating accessible map charts/map visualizations is to create a custom map with the Google My Maps tool linked here- Visualize your data on a custom map using Google My Maps – Google Earth Outreach