508 Compliance & Data Visualization

508 Compliance became A Thing to Deal With in 2000 and 15 years later people still have questions about how it works. I get questions about how to be 508 compliant in nearly every workshop. 508 compliance essentially means that people who produce things on the web for any federal agency have to ensure that the posted materials are accessible for people with disabilities. Those folks are going to use things like screen readers or other assistive devices to access our posted materials so it is our responsibility to make it all work.

I do not really know how to make it all work. But I’ll do my best to tell you what I’ve learned and you’ll chime in down in the comments section with what you know, too.

Also, I’m speaking pretty strictly to posting static data visualization-based reports on the web, not creating interactive data visualization websites, which is a bit of a different beast.

When dealing with fairly static visuals, being 508 isn’t as complicated as people make it out to be.

Add Alt Text to Graphics

If your posted materials are going to be Word or Excel, add alt text when creating your graphs. To do this, right-click on the graph border and select Format Chart Area. Then look for this little option called Alt Text.

Screenshot of where to place alt text for an Excel graph

Here, you’ll want to give the image a name and a description. The description needs to be such that the person on the other end can comprehend the image fully.

You go through this same process when uploading the graph as an image to a site like WordPress. Upon upload, it asks for the Title and Alt Text.

Plan to PDF your document? Alt text won’t carry over there. You’ll need to add tags to the images in place of alt text. Open your PDF file and click in the Tools tab on the left. In there you’ll see an action wizard, with an option to Create Accessible PDFs. At Step 4 you’ll add tags.

Screenshot of Adobe PDF Action Wizard Accessibility Checker, which guides the user through 5 steps to ensure document accessibility.

For some of our graphs, a full explanation in alt text is going to be amazingly hefty! So there is an alternative: explain the data visualization in the report or web page (as one does, as one does) and then make sure the graph appears right next to it’s associated explanation.

Gulp – Use an Accessible Font

Yeah, this one kind of hurts but the preferred fonts are Arial, Calibri, Times New Roman, Verdana, Helvetica, and Tahoma.

Provide the Raw Data Table

It is best practice to supply the raw numbers that comprise the graph. But that’s not license to use this horrible default graph style:

Stacked bar graph with comparison line and table of raw numbers embedded below the x axis line.

Matthew Montesano told me that his trick is to make a very tiny table, below the graph, right on the webpage or report page. Here’s mine, in a Word document:

Same graph as above, but with a small table, almost undetectable, below the graph.

 

You can barely see this, but I inserted a table in the Word doc, below the graph. I made the font size 1 and shrunk the row height of the table down as thin as possible. Once I make the text white and turn off the borders, no one will know this table exists, except for those using a screen reader. Thanks for the tip, Matthew, because this option doesn’t mess with my overall visual design.

One more thing Matthew mentioned: It is critical that the table have proper table formatting, meaning the header row has to be styled as a header row so it is obvious to the screen reader.

Use the Built-In Style Settings

Excel has a baked-in placeholders for things like your chart title, legend, and axis labels. You should use these (preferably all of them) rather than go rogue and insert textboxes. Screen readers work with Excel to pick up the fact that those particular words are designated as the title while those others are the data labels. To some extent, this problem is handled by providing a table of the raw data.

Contrast Colors

Light on light and dark on dark are a problem for everyone – not just those with disabilities. Watch out for stuff like this:

stacked bar chart, colored light gray (which is hard to see against the white background) to dark gray (which makes it hard to read the black labels)

where dark labels on a dark segment of the bar graph and light segments against a white background provide troubles.

Try a color scheme that makes more sense for the data itself and settle in with the notion that the data labels can be different colors, colors that contrast better.

Same stacked bar with dark red, red, light blue, and dark blue on the segments and contrasting colors on the labels.

Check your choices by printing out a page in black and white or try a 508 compliance color tester.

Use Color Plus Something Else to Communicate

One of my favorite data viz boosts is to color code the title to match it to particular parts of the graph. It connects the title to the data in a way that helps readers make sense of it. But to be 508 compliant, I should not use color alone.

two of the same stacked graphs, where top graph has keywords in title colored blue and bottom has same words in blue and bolded.In the top graph here, I’m drawing a connection to the strongly agree category by color coding the words “strongly agree” in the title. This is nice, but insufficient (and not just for people with disabilities – if this graph was reprinted in black and white, the effect would be lost). In the bottom graph, I also bolded those keywords in the title, so the emphasis is safely embedded.

Compliance doesn’t have to be difficult. In fact, many aspects are just good design for all. What else do you know? Add a comment below.

 

18 Comments

  1. Nice post, Stephanie. One clarification: Not all federal agencies are required to be 508 compliant. For example, the US Congress and Judiciary are not required to be 508 compliant. GSA has a few reports about this that are quite good.

    1. In general, most people struggle to balance aesthetics and Section 508 compliance when working within the federal sector. This is a great post and I love the tip about the hidden table of raw data points. Very creative! The more solutions we have in our toolkits the better. Just one clarification to Jon’s clarification, however–while the law may not apply to the legislative or judicial branches of government, all federal executive agencies must adhere to Section 508 when they develop, procure, maintain, or use electronic and information technology. The idea is to ensure that both (1) individuals with disabilities who are Federal employees and (2) individuals with disabilities who are members of the public have access to and use of information and data in a way that is comparable to their access and use by such Federal employees and members of the public who are not individuals with disabilities. Section 508 accessibility standards will continue to impact the work of most contractors when the client is the federal government, particularly when developing materials or products that are to be published on federal agency websites. While Section 508 does not apply to the private sector, there is definitely a strong moral and business case to trying to make information and data as accessible as possible so as not to deprive people of the knowledge they seek. Many states have also passed legislation requiring electronic and information technology accessibility so those requirements may need to be considered as well.

      1. Thanks for clarifying the clarification, Azadeh. Your points on 508 compliancy as it relates to federal agencies is spot on.
        Stephanie, great post. You’ve provided a better way for me to relay data!!!

  2. I love the tip to color code the title to match the chart. Unfortunately, I probably won’t be able to use it in reports…the people I work for prefer shorter summary-type titles to longer descriptive titles. I’m working on it and will one day win them over.

  3. Great post! I cringed at your observation to use the built in header elements. I’m guilty of using text boxes, because I can’t get Excel to make the header as long or wide as I want it. I end up just making a text box so the header doesn’t look choppy.

  4. Always great to help people understand how to make our documents easier to understand. In PowerPoint, you can add Alt Text to a graph, an image,a shape, and other slide elements. When you save it as a PDF, these tags get automatically saved in the PDF, so you don’t have to go through the extra steps listed. You can also set the order that elements are read in a PDF in PowerPoint by moving the elements forward or backward using the Selection & Visibility Pane. The reading order seems to be from the back most element to the front most element. In Acrobat, there is a Read Out Loud feature that can help you test what will be read from a PDF. It works for me in Acrobat Pro but not in Adobe Reader for some reason (may be a system setup issue on my side).

  5. Thanks – very informative. Not sure what your objections to the recommended fonts are, but I would like to say that Arial and Times Roman are the most readable to many of us who wear glasses.

    1. That’s good to know, Maureen. I’d love to see more research around that. My main critique with those fonts is that they are default – and so make you look default when you use them.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.