Does a hearing-impaired person benefit from a ticking countdown timer? Or a sight-impaired person from a drag and drop feature? The answer is obvious. While most of the digital media we consume is designed for a general audience, over 58 million Americans have some sort of a disability. Fifty percent of those disabled Americans report using the internet on a daily basis.
Accessibility compliance standards are challenging the digital design industry. Designers are being encouraged, or in some cases required by law, to follow the international Web Contact Accessibility Guidelines (WCAG) put out by the World Wide Web Consortium (W3C). In our industry, the exciting challenge is always one of form meeting function. Compliance standards are ushering in a new era, not just for web designers, but for learning experience designers tasked with accessibility for a broad spectrum of learners.
The exciting challenge we face as designers is balancing the functionality needs of an accessibility audience without forgetting the visual needs of the general audience. -- Rebecca Irby, Art Director at ELM
Sifting through the acronyms: W3C WCAG and Section 508
Technology is accessible if it can be used by people with disabilities, as by those without. Before we go into how this impacts a digital learning experience, we have to talk about the standards. Unless you’re a federal agency, there’s no law that says you have to comply with W3C WCAG. Not taking these standards into consideration at some level (more on that below) alienates a large portion of learners. In our industry, the client sets the standard according to what they need.
You may have heard of Section 508, which is different than WC3 WCAG. Section 508 is a federal requirement that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities (Access-Board.gov). It was taken from WC3 WCAG.
WC3 WCAG is the international standard and focuses on a huge range of electronic applications. The WC3 WCAG published an updated set of standards in 2008, called WCAG 2.0, which addresses the needs of an impaired audience (sight, hearing, color blindness, or other disabilities) for any kind of electronic technology on any medium, including mobile.
Some, More, Most: WCAG 2.0 Accessibility Rating System
WC3 WCAG rated accessibility within three levels of compliance: A for the most basic, minimal compliance (still considered not acceptable), AA for baseline compliance, and AAA as the highest level of conformance, usually seen within the federal government.
The rating system is a good jumping off point for a discussion with our clients. We also use it as a tool to be sure that everyone understands compliance as the same thing, even though it’s still pretty open to interpretation.
How WCAG 2.0 Compliance Impacts Design (It does.)
Most everything is designed through functionality for the sighted learner; accounting for blind, hearing, and physically impaired is a whole new story. -- Beth Epperson, Quality Assurance Lead at ELM
The WC3 WCAG rating system has a big impact on how a learning module looks and flows. Depending on the rating, designers have to:
- Ensure the text is the correct size
- Evaluate color palettes
- Specify tabbing order
- Provide alternative text to the meaningful images
- Announce new slides and/or dialogs
- Control the tabbing
- Ensure everything can be accessed by the keyboard
- Separate text from images
- Limit interactions
- Check closed captions
- And, of course, consider screen readers
That’s not even the entire WC3 WCAG 2.0 list of considerations! By using the standards at any level, you must alter the learning experience in some way. The planning and flow takes longer to create and verifying that all learners have similar learning experiences is a true commitment. The following are some of the design challenges we’ve come across with the standards.
Accessibility Standards and Closed Captioning/Subtitles
“A” level compliance aims to get video captions large enough so that the hearing and visually impaired can read them, but not so large that they cover up the screen.
For “AA”, we also have to keep in mind that visually impaired people will be hearing the captions via a screen reader, not reading them. In this case, if the video content is sequential, there needs to be an audio description (narration) of the sequence of events. The clip below really illustrates how problematic this can be in an instructional video. Watch the clip below with your eyes closed and try to follow the steps to hard boiling an egg. What was the important step? At an AA level of compliance, the video can’t be a subtle interplay of words and actions—every action has to literally be spelled out.
Video created by Matty Fusaro on Youtube
Screen Readers
Screen readers are assistive technologies for the visually impaired that read everything on the screen for the user. At an A level of compliance, the designer can limit the screen reader to just the relevant text, ignoring the images or graphics on the page. For AA, designers should tag all images with alt text .html describing each in detail.
Screen readers are a bit quirky and sometimes disrupt the learner’s experience. If there’s a button on the screen, even if the designer has written detailed alt text describing the button, the reader still says the word “button.” The expressionless, boring robotic voice used for screen readers also hinders engagement for visually impaired learners.
Other issues designers run into are with sound effects. When a screen reader arrives on a slide, it immediately starts reading, often interrupting a sound effect or the narration itself. (Like that rude guy who loudly explains a plot twist to his friend in a movie theatre.) For “AAA” compliance, the module is pared down to simply explaining the information.
Color Contrast for the Visually Impaired
If someone is visually impaired, color palette needs to be taken into account in the design. You can still have a wider color palette for the general audience, but you also have to give visual cues to impaired individuals about the course. In the example below, the wrong answer is outlined in the color red. To be compliant, the designer needs to add another indication of the wrong answer, which could be as simple as a small x in the corner.
The WCAG 2.0 standards also dictate contrast levels between the background color and text color for links and other visual cues. Designers use WebAIM to control what colors work together and have the correct contrast level, for example, with AA compliance the ratio would be 4:5:1. We don’t have to use colors with high enough contrast from each other across the board. We can also find pairs within that palette that work. That is a good design rule in general, regardless of the level of compliance.
WC3 WCAG Compliance is Both: A Constraint and a Creative Opportunity.
Designing a digital learning experience that’s compliant at any level does impact design. But, a small amount of effort and ingenuity to be more inclusive goes a long way. Accessibility compliance standards are pushing us to seek creative solutions through new technologies and methods. Our goal is to create engaging, meaningful digital learning experiences for everyone. That goal hasn’t changed—we’re just broadening our audience to be more inclusive. It’s disruptions like these that lead to the most innovative and exciting design.
Author and Subject Matter Expert: Rebecca Irby, Art Director
Subject Matter Expert: Beth Epperson, Quality Assurance Lead
Designer: Britney Sharp, Designer
