Lets Make an Internet for Everybody

What is web accessibility? And why should you care?

Last year, the United States saw over 2,000 federal lawsuits over web accessibility, a 181% jump from 2017. Ensuring accessibility is an emerging trend in the digital world, but what exactly is web accessibility and why is it important?

Source: UsableNet

Web accessibility, also known as a11y, is the inclusive practice of making sites and apps available to everyone. As the internet becomes an increasingly more important aspect of our daily lives, it is crucial for all audiences to have access to its content.

Web accessibility affects everyone

A Centers for Disease Control and Prevention (CDC) report shows that one in four adults in the U.S., or 61 million people, live with a disability. According to Coleen Boyle, Director of CDC’s National Center on Birth Defects and Developmental Disabilities:

“At some point in their lives, most people will either have a disability or know someone who has one.”

WebAIM lists four major categories of disabilities:

1. Visual — blindness, low vision, color-blindness.
2. Hearing — deafness and hard-of-hearing.
3. Motor — inability to use a mouse, slow response time, limited fine motor control.
4. Cognitive — learning disabilities, distractibility, inability to remember or focus on large amounts of information.

Designing and developing web content with these categories in mind usually provide benefits beyond aiding those with disabilities. Captions, for instance, are as helpful for someone watching the video in a loud environment as they are to a deaf user. Alternative text describes image information to blind users, but can also help those who use a text-only browser or can’t load pictures due to enhanced security.

Moreover, the W3C Web Accessibility Initiative (WAI) reported that web accessibility helps mobile users, elderly users, and users with low-bandwidth connections.

Regulations and standards

The Web Content Accessibility Guidelines (WCAG) are a set of international guidelines on making web content more accessible. Developed by the World Wide Web Consortium (W3C), the governing body of the web, WCAG is the basis of most web accessibility regulations around the world. In December 2008, W3C published WCAG2.0, which is based on four principles:

1. Perceivable — information must be presented in a perceivable way, either through the browser or through assistive technologies, such as screen readers or screen enlargers, etc.
2. Operable— controls and interactive elements must be operable via either the mouse, keyboard, or an assistive device.
3. Understandable — information must be clear with minimal confusion or ambiguity.
4. Robust — content must be robust enough so that it could be interpreted reliably by a wide variety of user agents, including assistive technologies.

Built on these principles are 12 guidelines that aim to present information in ways that match various sensory, physical, and cognitive abilities.

Benefits to making content accessible

Abiding by a11y guidelines can help organizations avoid legal fees and fines. Sitepoint reported that companies have also seen noticeable cost savings in the form of reduced maintenance costs.

More importantly, having a more accessible site or app means having a larger audience and a consequently larger consumer base. When implemented correctly, a11y could also boost search engine optimization (SEO) efforts. Better experience for all users means lower bounce rates, higher conversion, and less negative feedback, all of which are taken into account by search engines when ranking a site.

Web accessibility testing tools

There are a number of a11y browser extensions that audit websites and help developers improve the accessibility of their content. Below are a few of my favorites for the Chrome browser.

Lighthouse: Google’s open-source, automated tool that evaluates, among other things, accessibility. Under the hood, it uses the axe-core library as the accessibility checker. Lighthouse now comes built into Chrome, so testing a web page is as easy as opening developer’s console, selecting “Audits”, choosing the “Accessibility” audit, and running the test.

I find Lighthouse tests relatively extensive and very easy to use. I like that it allows for testing in both mobile and desktop views. Make sure to run devtools docked to the bottom or in a separate window so as not to affect the viewport size.

Siteimprove Accessibility Checker: A tool that provides visual feedback about the content by highlighting detected issues right on the page. As a visual person, I find this extension most helpful in showing where on the page the accessibility test failed. I also like that it provides recommendations on how to fix the errors.

Colorblinding: A Chrome extension that simulates the web page as how someone with colorblindness would see it. This is a great way to gain some perspective on how things may appear to others.

Summary

Web accessibility matters. The internet has grown to become a critical part of our lives, and everyone should have equal access to digital content. As web designers and developers we have a responsibility to make our content as accessible as possible, and there are so many tools to help us achieve this.

In my next post, I will cover how to automate a11y testing and integrate it into the development process. If you’d like more information on web accessibility, here are some additional resources:

• WebAim Articles: https://webaim.org/articles/
• WebAim Resources: https://webaim.org/resources/
• WCAG2.0 Documentation: https://www.w3.org/TR/WCAG20/