I was excited to able to attend classes focused on programming using ARIA (Accessible Rich Internet Applications) which helps make web applications, widgets, and other plugins accessible with assistive technology, but the one content strategy session I went to on data visualizations -- e.g., bar graphs, line graphs, pie charts, diagrams, infographics -- that caught me by surprise.
You'd think as many times as I've attended, I'd have seen the set up coming during the Jan McSorley's keynote Accessibility is a Team Sport at Monday's lunch. McSorley, a teacher and assistive technology specialist with over 20 years of experience in K-12, described individuals with disabilities as
the only minority group anyone can join at any time and the only minority group anyone can leave at any time with the proper adaptive and assistive technology.
Hopped up on the apple crumble at my table, I didn't realize exactly what this meant until Tuesday morning as my Data Visualizations session began. There I was innocently asking the question, How do I make all these charts accessible that my university is asking me to place on web pages and emails? Use a crazy amount of alternative text?
We didn't cover screen reader accessibility first. That wasn't the biggest hurdle to discuss.
In fact, trying to make a visualization of data accessible to a blind user is a contradiction in and of itself. A visualization of data is meant for a visual user to interpret the actual data -- e.g., tabular data -- in a meaningful manner. Data tables can have a lot of information which can be interpreted in multiple ways.
So the real question is
How do I present this data in a way that it pops?
Well, that's not the question I thought I'd be asking. As a web designer, I've known that every individual will look at a design and have a very different opinion on whether it "pops" (called a no-win situation), so "popping" design didn't make sense. What does "pop" really mean in this context?
By viewing this content, can I quickly obtain the takeaways, or main points?
Why is it important that we make a takeaway quick to perceive? The answer comes from a 2015 study that humans have a decreasing attention span that may be caused by technology and information overload (more statistics on Attention Span and ADD/ADHD at Statistic Brain). In that study, it said that all of us -- not just individuals with ADD/ADHD -- have an average attention span of 8.25 seconds. In 2000, our average attention span was 12 seconds. If that decline isn't surprising, this comparison might be:
The average attention span of a goldfish is 9 seconds.After 15 years we appear to now have an attention span shorter than a goldfish.
We seem to be experiencing a temporary cognitive disability -- that is, a shorter than normal attention span -- while working with technology. How can we not? We deal with information overload on a daily basis. We attempt to multitask, even though our brains cannot handle more than two tasks efficiently at a time. We've trained ourselves to scan for something interesting before we actually consider reading it thoroughly, and most of the time, we don't actually read the entire contents of any page.
This is what makes writing and designing for the web very different than writing a novel or a dissertation. We do want the information from that chart, novel, or dissertation, but we have to pull it out of all the fluff and arrange it strategically.
Screen Reader Friendly Data VisualizationsOn-Page Alternatives: When providing visual data, always provide one or both of the following, either as an alternative or in addition to the visual:
- Figure Caption: A short paragraph conveying the meaning, or main point(s), of the chart.
- Table: The tabular data that this chart is based on.
Off-Page Alternatives: If you don't want those additional pieces showing on the page, provide them in a link typically to an Excel file, which is the most accessible way, behind a web page, to navigate tabular data.
Infographics: Avoid busy infographics wherever possible. If you can't, link to an alternative page with the takeaways in textual and tabular form.
Visually Friendly Data VisualizationsProper Format: Choose the chart type that makes the most sense for the takeaway. For example, a line graph or bar chart can better describe an increase or decline over a period of time than a pie chart.
Goldilocks Labeling Rule: Put in just enough labels to help your user understand the point(s) you are getting across. Don't make it so visually busy that the user gets a different meaning than the one your wanted to convey. Similarly, don't take too many labels off if that it loses the meaning you wanted to convey.
Writing for WebKeep it Simple: Write short chunks of information in paragraphs, lists, tables, etc. Divide main ideas into sections with logically placed headings.
Reading Level: An audience of college graduates can be set to 12th grade reading level, however, an audience of entering freshmen and other visitors should be set to 8th grade reading level.
Jargon: Start with common names anyone outside your institution would know, then introduce and define your jargon.
Content Strategy and UsabilityLengthy Content: Make sure takeaways can be perceived in a short span of time, including video content which typically shouldn't last more than 3 minutes.
Engaging Content: Cut down on the fluff. If your information does not provide a call-to-action, cut it.
Content Relevance: Always place relevant content near its topic, or subject matter, since your user is expecting any content in this section to be about this topic, not somewhere else on this page or another page.
- Avoid Frequently Asked Questions: Instead of answering questions on a separate area of your website, place the "answers" within the relevant areas of your website, so no one has to hunt for it.
- Avoid "Resource" or "Quick Link" Content: Similar to FAQs, no one knows what to expect in these sections. Label your content in meaningful ways that give them a clear idea of what is coming, and organize it based on its relevance to the section's topic.
Intuitive vs. Spray and Pray: Ask yourself if they would they expect your content to be in a certain place on your website instead of duplicating content across multiple areas in order to "catch" them.