Web Accessibility: Why It’s Important and How You Can Get Started
The Internet is a wonderful thing, but there are millions of people who are denied full access to it because of the way most web pages and applications are built today. Typical web interactions rely on a lot of assumptions about a user’s needs and abilities, and many of these assumptions lead to inaccessible content. It’s worth keeping in mind that disability affects at least 10% of the world population, according to disability experts Sarah Horton and Whitney Quesenbery in A Web for Everyone.
Designing a functional application that can serve everyone and communicate information in a variety of ways is important at Duo, where we have been learning from accessibility experts, usability testing, user personas and more.
Types of Assistive Technology
Hardware and software tools, known as assistive technology, can be used to make up the gap between default information presentation and a user’s preferred method of consuming content. A few examples of assistive technology include:
- Software tools, like screen readers, which read content aloud to blind and low vision users;
- Screen zooming technology, used to magnify content and increase visual contrast; and
- Speech recognition devices, used to turn spoken words into instructions which are carried out by a computer.
Assistive technology can also take the form of hardware; some users have keyboards with larger buttons and simplified layouts or navigate using joysticks and mouth-controlled computer mice. Video captioning and contrast enhancement tools are also considered assistive technology.
Limitations of Assistive Technology
Although these assistive technologies can be very powerful, they can be severely limited in effectiveness when a website is coded in an inaccessible way.
Imagine Maria, a person with fibromyalgia trying to pay a bill online. She uses speech recognition software to interact with her computer because chronic pain and fatigue make using a keyboard and mouse very difficult. When a button on a webpage is not coded correctly, the speech recognition software won’t be able to interact with it. Maria is effectively blocked from making that online payment.
Or consider the online experience of a low vision user named Philip. When he tries to register for a conference, entire swaths of text are indiscernible because the chosen color scheme doesn’t have a high enough contrast between text and background. Philip deals with the frustration of only being able to see some parts of the webpage, and may not be able to register for the conference without considerable difficulty and anxiety.
These are only a couple of scenarios, but hopefully they demonstrate how a poorly-designed website can prevent a person from getting the resources they need.
Designing Applications for Everyone
The thing I love about being a software developer is that we are constantly changing and improving previous designs. We have an opportunity to make a real difference in combating unequal access to information.
Accessibility experts Sarah Horton and Whitney Quesenbery define disability as "a conflict between someone’s functional capability and the world we have constructed… it is the product that creates the barrier, not the person, just as design is at fault when a site has poor usability” (A Web for Everyone, 2014).
It’s completely within our grasp to build a beautiful, functional application that serves everyone’s needs and communicates information in a variety of ways.
How Can I Get Started?
Experts in web accessibility publish guidelines and tools for developers which make this big task a little bit easier. The canonical international standards for accessibility are established in the Web Content Accessibility Guidelines, version 2.0., referred to as WCAG 2.0.
These standards are arranged by four basic principles. In order for a website to be accessible:
- Information must be perceivable by everyone;
- The application controls must be operable by everyone;
- The content, including instructions and error messaging, must be understandable; and
- The web page must be robust, which is defined as compatible with a wide variety of browsers and assistive technologies.
In the WCAG 2.0 document, these four principles are broken down into guidelines, which are actionable and well-defined criteria that teams can use to make their product accessible.
Here at Duo, we’ve been learning from accessibility experts, auditing tools, user personas, and usability testing to improve the accessibility of our end user experiences. We started working towards an accessible product using the WCAG standard, but the document can be overwhelming, so I’d recommend checking out this accessibility checklist by Vox Media which categorizes WCAG 2.0 guidelines by the job title of the person responsible for them.
For an approachable and comprehensive guide to web accessibility, check out A Web for Everyone by Sarah Horton and Whitney Quesenbery. It includes user personas based on disability research with code samples for designing interfaces that meets the needs of these personas.
After you’ve dug into your website’s code, you might want an automated tool to check compliance with WCAG recommendations. Our engineers use a plugin for Chrome called Accessibility Developer Tools, written by Google’s accessibility team. This plugin integrates into Chrome’s developer tools and allows developers to run audits of their code. When code breaks a WCAG guideline, the offending code is shown, along with the guideline and a link to more explanation and accessible code samples.
If you’re looking for a little inspiration or aren’t convinced that accessibility and design can be BFFs, check out the blog Accessibility Wins by Marcy Sutton. It includes examples of live web pages with accessible design.
Hopefully, these resources can get you started on using web accessibility to make web a better place. The Internet creates an enormous possibility for connection and community support, and a lot of us nerds are excited by the democratic potential of the Internet. Let’s make that potential a reality.