How Do I Make My Site More Accessible?

Web accessibility is a hot topic these days, and for good reason. Being able to properly access and utilize the internet is becoming one of the major keys to succeed in today's world. It is more important than ever to ensure people with disabilities have equal opportunity to connect, share, and buy online.

And in many cases, it is required by law.

Websites are now considered, "places of public accommodation," meaning they have to comply with ADA regulations just as restaurants and libraries do. Websites that cannot be read and understood by persons with disabilities are considered discriminatory; a violation of the ADA. When it comes to strict liability laws like the ADA, ignorance is not a defense accepted by the courts, and neither is, "we're in the process of fixing it."

The Web Content Accessibility Guidelines (WCAG) 2.0 Level AA are considered the legal standard for web accessiblity at this time. If you are WCAG 2.0 AA compliant, you are ADA compliant. This is the goal.

You could just hire a professional developer (why, hello 😉) to ensure WCAG 2.0 AA compliance for you, but if you are (like me) determined to do everything yourself, here are some tips to avoiding the most common violations:

Most Common Violations

Low Color Contrast

To put it simply, contrast is the difference your eyes perceive between two differently colored elements. The highest contrast possible is black and white. Blue and orange (as shown above) is another good example of high contrast. The lowest contrasts are between two different shades of the same color.

An insufficient contrast between page elements is one of the most common violations in web accessibility. Visual impairment affects a large population of people. According to the World Health Organization, there are roughly 285 million people in the world who are visually impaired. It is also estimated that color-blindness affects roughly 4% of all people.

In web accessibility, the main concern is that text on a page has a significantly high enough contrast to the color of it's background. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. You can test different color combinations and see their contrast ratios on WebAIM's contrast checker. WebAIM is a fantastic resource for people looking to educate themselves on web accessibility.

Requiring A Mouse

Keyboard navigation is an often overlooked aspect of website design. There are many people who are not able to operate a traditional mouse. Blind users would not know where their mouse cursor is on a screen. Other users may have motor disabilities or injuries and struggle with full use of their hand(s). For a lot of people, keyboards are the only way they can interact with a computer.

When building a website or application with these users in mind, the two main concerns are navigation and focus.

When a keyboard user navigates your site, they will use their tab button on their keyboard to shift the focus of their cursor between the different elements on the page. The ARIA design practices specify the way keyboards interact with standard elements like buttons, links, or text fields. If your site has lengthy navigation menus or custom form elements this may present a problem.

Some things to consider:

Do all of the different elements on my web page show a visual indicator when they are focused?

A basic visual indicator is usually shown automatically by the browser when an element is focused. However, if you have any custom CSS rules that set outline:none, this will override the default browser behavior and no indicator will be shown.

Is my code properly structured so that the order in which elements are focused is correct?

The order in which elements gain focus as a user tabs throughout the page is important. This should flow logically and intuitively. Avoid using tabindex values greater than 0. This will change the default keyboard navigation order.

Are my custom elements (widgets, sliders, menus, tab panels, etc.) able to receive keyboard focus?

By default only links, buttons, and form controls can be navigated to by keyboard. If you have any custom elements on your page that must be able to receive keyboard focus, you can use tabindex="0" to allow this.

I stumbled on to a simple npm package that disables the mouse cursor one day a week in your development environment. Using this can ensure your team is regularly testing keyboard accessibility, whether they like it or not! Just don't forget to add it to your devDependencies or you may have some angry users on your hands. 😀

The package is called no-mouse-days and you can check it out here.

Alt Text on Images

This is the one most of you are probably already aware of. Because if you forget, your code editor will scold you. This is the text that displays when an image fails to load. It is also the only way people who rely on screen readers know what is in that image. Images can provide a lot of context, and failing to pass that context on to users with visual impairment is a disservice to all.

Failing to provide alt text for your images will also hurt your SEO, so just do yourself a favor and provide the alt text.

If you'd like to run an audit on your website to discover and remedy any existing violations, I would recommend Google Lighthouse. You can run an audit by going to the Audits tab in Chrome's Developer Tools or entering your site url here. In addition to accessibility, this audit measures performance, best practices, and SEO. Keep in mind that any extensions running Chrome will affect a site's performance score when running an audit from the Chrome Dev Tools. For this reason, I recommend using an incognito window in your browser when running a Lighthouse audit.

Happy coding! Keep up the good work.