MSUDATA16: Accessible Data Visualization for Non-Programmers

Welcome Mississippi State University Libraries Scholarly Communication Summit attendees!

Sources referenced in my session, along with some related resources, are listed here. They are also available via the Diigo collaborative bookmarking site: mbfortson’s library tagged msudata16a11y.

A pdf of my slide deck is available here: Accessible Data Visualization for Non-Programmers (PDF). If this document is not accessible to you, please contact me so I can get it to you in a format that is.

Thanks for visiting!

The case for accessibility

Accessibility – W3C
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Convention on the Rights of Persons with Disabilities
“To enable persons with disabilities to live independently and participate fully in all aspects of life, States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others… to information and communications, including information and communications technologies and systems.”

Who are we leaving out?

Disability Statistics from the 2013 American Community Survey (ACS)
“In the year 2013, an estimated 12.6 percent (plus or minus 0.05 percentage points) of non-institutionalized, male or female, all ages, all races, regardless of ethnicity, with all education levels in the United States reported a disability.”

Table 311.10. Number and percentage distribution of students enrolled in postsecondary institutions, by level, disability status, and selected student characteristics: 2007-08 and 2011-12
From the National Center for Education Statistics Digest of Education Statistics, 2013.

WHO Director-General Dr Margaret Chan’s message on the International Day of Persons with Disabilities 2014 (IDPD, 2014)
“A billion people in the world, 15% of the population, have a disability severe enough that it limits their participation in family, community and political life.”

Designing for accessibility benefits everyone

Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities
“People with disabilities using computers have similar interaction limitations as people without disabilities who are using mobile devices. Both experience similar barriers when interacting with websites and web applications. There is also significant overlap between the design solutions for both.”

Financial Factors in Developing a Web Accessibility Business Case for Your Organization
“Web accessibility can make it easier for people to find a website, access it, and use it successfully, thus resulting in increased audience (more users) and increased effectiveness (more use).”

Official Google Webmaster Central Blog: Helping users find mobile-friendly pages
“A page is eligible for the “mobile-friendly” label if it meets the following criteria as detected by Googlebot:

  • Avoids software that is not common on mobile devices, like Flash
  • Uses text that is readable without zooming
  • Sizes content to the screen so users don’t have to scroll horizontally or zoom
  • Places links far enough apart so that the correct one can be easily tapped”

Applicable laws and requirements

In the United States

WebAIM: United States Laws – Introduction to US Laws
“The following sections cover key US laws pertinent to web accessibility. This information will help you understand the conditions under which you must create web content that is accessible to individuals with disabilities under US law.”

In higher education

Carrots and Sticks: Making the Case for Accessibility – HighEdWeb Alabama
“Institutions have a legal and ethical responsibility to make technology more accessible to everyone, but many struggle with making a commitment to address this need. This session will present some of the “carrots” we get from a focus on accessibility, including better designed sites, positive PR, and reaching more users. We will also look at the “sticks”: law suits, civil rights reviews, and neglecting our users’ needs. This session shares ways to make the case for accessibility to executives and other stakeholders, gives a template for a campus technology accessibility plan, and offers suggestions to foster a culture of inclusion throughout the campus.”

Joint – Dear Colleague Letter: Electronic Book Readers
“As officials of the agencies charged with enforcement and interpretation of the ADA and Section 504, we ask that you take steps to ensure that your college or university refrains from requiring the use of any electronic book reader, or other similar technology, in a teaching or classroom environment as long as the device remains inaccessible to individuals who are blind or have low vision. It is unacceptable for universities to use emerging technology without insisting that this technology be accessible to all students.”

Around the world

WebAIM: World Laws – Introduction to Laws Throughout the World
“The following sections of this article cover key laws, documents, and events that relate to web accessibility in many countries and regions throughout the world.”

Standards and guidelines

WebAIM: Accessibility Evaluation Tools
“Many web designers, developers, and evaluators are introduced to web access through accessibility tools. All accessibility tools perform automated checks of web pages for accessibility issues and all generally have additional features, but each tool targets different audiences. In order to help web designers, developers, and evaluators choose an appropriate tool for their purposes, this article discusses the general types or classifications of accessibility tools.”

WebAIM: Introduction to Web Accessibility
“This introduction should help you understand how people with disabilities use the web, the frustrations they feel when they cannot access the web, and what you can do to make your sites more accessible.” This excellent resource is also referenced throughout the remaining sections of the presentation.

WebAIM: Section 508 Checklist
“The following standards are excerpted from Section 508 of the Rehabilitation Act, §1194.22. The pass/fail criteria in this document represent an interpretation of Section 508 web standards.”

Designing for accessibility

Introduction to Data Visualization: About Data Visualization
“Data visualization: an umbrella term, usually covering both information and scientific visualization. This is a general way of talking about anything that converts data sources into a visual representation (like charts, graphs, maps, sometimes even just tables).”

WebAIM: Quick Reference – Web Accessibility Principles

Content and structure

Headings – Page Structure
“Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.
Assistive technologies and some browsers provide mechanisms to present a list of headings to the user that allows users to jump to individual headings. Headings also provide visual clues that help to skim the page or find a specific section, this is especially useful for people that are easily distracted.”

Microsoft Word
“Microsoft Word is currently the most common word processor on the market. Because it is so common, the .doc (and to a lesser extent, .docx) format has become the de facto format for text documents. Word is often used to create files that end up in PDF and HTML. This article will cover several things that you can do to make web content created in Word more accessible.”

Semantic Structure
“As with the original intention of the web, screen readers and other assistive technologies largely ignore visual styling and focus primarily on semantics and structure.”

The dude map: How Americans refer to their bros
This map uncovers geographic trends in the use of some nouns referring to people: bro, buddy, dude, fella, and pal. Researchers searched for occurrences of these words in a Twitter dataset, then used spatial analysis to compare frequency of use in nearby counties. While this map presents some other accessibility challenges, it uses simple language and empty space to improve readability: “not common” and “very common” vs. “lower comparative frequency” vs. “higher comparative frequency,” for example.

Which chart or graph is right for you?
Another aspect of well-structured and clearly written content is choosing the right visualization to start with and ensuring it is labeled clearly. The makers of Tableau data visualization software have published a paper titled “Which chart or graph is right for you?” that provides guidance on how to select the best charts for the type of data you’re analyzing and the questions you want to answer.

Text equivalents

Add alternative text to a shape, picture, chart, table, SmartArt graphic, or other object
“You can create alternative text (alt text or Alt Text) for shapes, pictures, charts, tables, SmartArt graphics, or other objects in your Office document. Alternative text helps people with screen readers understand the content of pictures. When you use a screen reader to view your document, or save it to a file format such as HTML or DAISY (Digital Accessible Information System), alternative text appears when you move the pointer over a picture in most browsers. This article discusses adding alternative text to a shape, picture, chart, table, SmartArt graphic, or other object and shows you how you can make the Alt Text command always available.”

Alternative Text
“Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.”

Alt Text in Word: Title vs Description
“So, which field(s) should you use? Answer: It depends…”

Alt Text On Tables In Word
Adding alt text to a table in Excel provides a textual alternative to a visualization, allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.

Welcome to Tableau Desktop – Export as an Image
After selecting Tableau’s Copy to Another Application or Export to an Image File option and adding the image to a Word document, you would then right-click to access the Format Picture window and add your alt text.


Choosing Colors for Accessibility
“If you are using color to code important data, you should think about using color palettes that accessible to color blind people.”

ColorBrewer 2.0
A “diagnostic tool for evaluating the robustness of individual color schemes.”  The “Color Blind Friendly” icon “indicates that a given color scheme will not confuse people with red-green color blindness. Red-green color blindness affects approximately 8 percent of men and 0.4 percent of women, although its severity varies and so some schemes will have a “?” indicating it may be a problem for some, but not all folks with color vision impairment.”

Color Contrast Checker
“Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity. WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.”

Designing For (and With) Color Blindness
“Some apps and programs have done a great job of catering towards those who suffer from color blindness. Trello, a web-based application that allows users to organize tasks, does a great job of allowing a user to activate a color-blind mode. This small function allows a user, like myself, to be able to quickly distinguish between labels.”

5 Tips on Designing Colorblind-Friendly Visualizations
“Here are some tips for designing vizzes that are colorblind-friendly.”

The T
Example of how a route map might use different patterns for the lines instead of colors: solid, dashed, dotted, etc..

Visual Disabilities – Color-blindness
“Make sure that colors are not your only method of conveying important information.”

Data tables

Tables – Accessibility at Penn State

WebAIM: Creating Accessible Tables – Data Tables
“The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid. Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row and/or column headers. Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.”


WebAIM: Links and Hypertext – Introduction to Links and Hypertext
“Hypertext links are one of the most basic elements of HTML, as its name implies (HTML stands for HyperText Markup Language). As such, making hypertext links accessible is one of the most basic and most important aspects of web accessibility.”


Accessibility Evaluation Tools

WebAIM: Accessibility Evaluation Tools
“Many web designers, developers, and evaluators are introduced to web access through accessibility tools. All accessibility tools perform automated checks of web pages for accessibility issues and all generally have additional features, but each tool targets different audiences. In order to help web designers, developers, and evaluators choose an appropriate tool for their purposes, this article discusses the general types or classifications of accessibility tools.”

Web Accessibility Evaluation Tools List
“Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines. This page provides a list of evaluation tools that you can filter to find ones that match your particular needs. To determine what kind of tool you need and how they are able to assist you, see Selecting Web Accessibility Evaluation Tools.”

Strengths and Limitations of Automated Tools
Strengths and limitations of automated accessibility tools, from the University of Minnesota Duluth.

Writing effective ALT text – University of Leicester
An accessibility checker can tell you whether or not alt text is present, but it can’t tell if the description it contains is meaningful.


WAVE Web Accessibility Tool
“WAVE is developed and made available as a free community service by WebAIM. Originally launched in 2001, WAVE has been used to evaluate the accessibility of millions of web pages.” See also WAVE Help

Accessible University Demo Site – Inaccessible Version
“Accessible University (AU) is a fictional university, and this is its fictional home page. This page is designed to demonstrate a variety of common web design problems that result in visitors withdisabilities being unable to access the content or features of a web page. Although the heading at the top of this section of the page suggests that AU may be a welcoming institution, the inaccessible design of this page sends the opposite message.”

This page is an improved version, with 18 accessibility issues corrected: Accessible University Demo Site – Accessible Version 

WebAIM Color Contrast Checker

WebAIM: Color Contrast Checker
“Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.”

ColorZilla for Chrome and Firefox
WebAIM suggests using these tools to get color values to input in the Color Contrast Checker.

Microsoft Office Accessibility Checker

Check for accessibility issues – Office Support
“Like the spelling checker tells you about possible spelling errors, Accessibility Checker in Word, Excel, and PowerPoint tells you about possible accessibility issues in your Office file so you can fix these issues so someone with a disability can read and get to your content.”

Rules used by the Accessibility Checker – Office Support
To make sure that everyone can read your file, run Accessibility Checker. It flags issues and provides instructions for fixing them. Accessibility Checker tests content for factors that affect accessibility in three categories:
Errors, Warnings, Tips.”

Adobe Acrobat accessibility tools

Using the Acrobat Pro DC Accessibility Checker
“The accessibility checking tools in Adobe Acrobat Pro DC – Accessibility Checker (Full Check) and the Make Accessible action wizard – can identify many issues in PDF documents that may be in conflict with Adobe’s interpretations of the accessibility guidelines referenced in the application and its documentation.”