Microsoft received praise recently for the release of a new controller for its Xbox One gaming console. Interestingly, the new game pad wasn’t lauded for improving players chances at winning a round of Fortnite, but rather because it is the first controller designed from the ground up to meet the needs of people with limited mobility.
Accessible design, creating content, environments, products, and services that can be enjoyed by individuals with disabilities, is also a hot topic in web development today. Every brand wants to create a gratifying and engaging experience for their audience, and they want to extend their message to as many members of their target audience as possible.
Regrettably, millions of people who want to take part in that interaction are limited by physical, cognitive, and sensory impairments. According to a major U.S. Census in 2012, over 56 million Americans have some type of disability. Of those, over 18 million American between the ages of 18 and 64 report significant vision loss, and more than 35 million have some form of hearing impairment.
“Accessible design creates a seamless and holistic brand experience regardless of who is on the receiving end.”
Hardly small numbers, yet an alarming 70-percent of websites reviewed by Sight and Sound Technology, a provider of assistive technologies, were found to be non-compliant with accessibility standards. It’s an unfortunately reality for all involved. Impaired users lack access to content that others take for granted, and brands lose out on fruitful relationships with literally millions of potential customers and advocates.
Understanding W3C and ADA Standards
Nobody owns or controls the web. It’s a decentralized network with no formal governing body. There is, however, a standards organization called the W3C (World Wide Web Consortium) that was founded by Tim Berners-Lee, the web’s creator. It promulgates a variety of guidelines for webmasters.
There is no rule that says websites must comply with the W3C, but smart webmasters hew closely to its recommendations. Not only are they generally smart practices, like keeping orderly code with well-formed elements, but W3C validation is also important for search engine optimization (SEO) because Google and other engines penalize sites that don’t parse well.
W3C validation can be checked using a variety of means, such as their own Markup Validation Service. Accessibility features can be further checked with software solutions like WAVE, the Web Accessibility Evaluation Tool, or Lighthouse, both popular chrome extensions that generate reports showing errors and alerts related to accessibility.
There’s another reason why the W3C’s standards are encouraged that relates to the Americans with Disabilities Act (ADA). That law, which was first passed in 1990, doesn’t directly address internet technologies. It’s primarily thought of as the impetus for removing “access barriers” to “places of public accommodation.” It led to changes like building codes that mandate wheelchair ramps and service counter height restrictions.
Though the original ADA didn’t extend those types of requirements to digital platforms, a 2010 Advanced Notice of Proposed Rulemaking by the U.S. Department of Justice announced an intention to eventually amend the law to apply to websites. The final decision is expected later this year, but webmasters would be wise to assume that the government will follow through with the proposed rule.
In a 2016 court case seen as something of a bellwether on the issue (although involving public institutions rather than private businesses), the University of California Berkeley was found to be in breach of the ADA because the videos on its YouTube channel lacked closed captioning. The ruling pointed to the W3C Web Content Accessibility Guidelines (WCAG 2.0 AA) and mandated the public university adhere to them whenever possible.
Most industry insiders believe the final ADA decision will expand that particular ruling to private businesses. Consequently, many webmasters anticipating that change have preemptively begun updating their sites to WCAG’s standards.
The current version WCAG 2.0 is comprised of 12 guidelines that fall under four headings:
- Perceivable: the first heading asks whether everyone is able to experience the content. Are there captions for the hearing impaired? Are images descriptively tagged? Have you made text-alternatives available like text to speech or even text to braille?
- Operable: this heading examines how easy (or difficult) your site is to use. Can it be navigated using only a keyboard? Can time-based content like video and audio be easily paused? Is your user interface well-labeled and designed to be intuitive?
- Understandable: the third WCAG heading looks at how comprehensible the content is. Are their proper instructions where they would be helpful, such as above webforms. Does the website operate and respond to inputs in predictable ways?
- Robust: the final heading encourages webmasters to maintain code (HTML, CSS, JavaScript, etc.) that maximizes compatibility. Standards-compliant code enables third-party assistive technologies to parse the site effectively.
Accessibility doesn’t necessarily mean modifying or removing existing materials. Often content can be made more inclusive by adding alternative formats such as transcripts of videos or foreign language versions of a webpage. These activities have the added benefit of fitting into broader SEO strategies as Google and other major search engines reward ADA compliance with higher search result rankings.
Testing for Accessibility
Following W3C content guidelines is a good start, but you won’t know how well they have been implemented until you perform quality assurance testing. The most rigorous means of doing so is letting actual users with disabilities try it out and give you feedback. That option is not always practical, however. Fortunately, there are several tools that can simulate their experience to give you an idea of the challenges they face.
For example, roughly 4.5% of the U.S. population suffers from some form of color blindness. That condition, characterized by difficulties perceiving certain colors, can make some digital content difficult to understand or operate. Colorblinding is a chrome extension that filters web content to appear as a color-impaired person would see it. It can be used to determine if there is enough contrast between page elements to distinguish them from each other.
Color is a powerful design element, but it can also be a crutch. Does your brightly-colored call to action still stand out when its hue is muted? If not, consider adding visual cues to highlight information that gets lost without color, such as:
- Textures
- Underlining
- Bolding
- Italics
- Gradients
- Patterns
Individuals with more severe visual impairments, including blindness, rely on text to speech screen readers to operate websites. There are numerous available, and many are free. Try one out and you’ll quickly become aware of missing tags, poorly formatted textual content, and other page elements needing improvement. Images with alt tags should have appropriately descriptive metadata attached to them. Title tags and other meta descriptions are equally important.
“Over 18 million American between the ages of 18 and 64 report significant vision loss, and more than 35 million have some form of hearing impairment.”
Physical impairments affecting fine motor control can make it difficult or impossible to operate a computer mouse. Over 20 million Americans report difficulty lifting or grasping objects. To experience how well your site works without the aid of a mouse or touch inputs, see how well you can navigate with just the keyboard.
Consider modifying your site’s tabindex, the global attribute that determines how a user can ‘scroll’ through a page’s elements using the tab key, so that browsers can move sequentially down the page in an orderly, logical fashion.
Start Future-Proofing Today
Another web development best practice, responsive design, is a good metaphor for understanding the importance of building accessibility into websites. Content that dynamically adapts enable creators to transmit one message that looks great regardless of the type of device picking it up.
In much the same way, accessible design enhances and adjusts content and experiences so that just about everyone can appreciate it, regardless of their individual differences.
Naturally, the experience is going to vary somewhat across channels, devices, and audiences, but that’s why brands fight so hard to smooth out those discrepancies. Each channel and format is tuned, optimized, and used in a manner that best suits it, but the overarching brand message should strive for uniformity.
Accessible design serves that goal as well. It creates a seamless and holistic brand experience regardless of who is on the receiving end. It also extends your brand message by providing affordances to as large an audience as possible, while simultaneously strengthening your brand through consistent implementation.
Inclusive design choices are a best practice today that will likely be a legal requirement down the road, so if your website is among the 70-percent that has fallen out of compliance, now is the time to get back on track.