Top 5 Resources for Web App Accessibility

Kickstart turning your web pages into accessible web pages. Here are our 5 favorite resources for learning what you need to change and how to implement those changes.

Just in case you haven’t heard it before, accessibility is important. As with most of life, unless we or someone we love is affected by a particular issue, we tend to not think about it. We don’t think about wheelchair accessibility unless we’re trying to leave a subway station without climbing 50 stairs. We don’t care if a number flashes on a screen to call the next person in the waiting room unless we’re visually impaired and can’t read that screen. We don’t think about using transcripts on YouTube unless we’re hearing impaired. Having full access to the internet shouldn’t just be a privilege for the non-disabled. It should be available for all.

There are web accessibility laws and policies in numerous countries including the United States and the European Union. In June 2018, the W3C introduced the Web Content Accessibility Guidelines (WCAG) 2.1, and in September 2018, the European Union adopted them as the digital accessibility standard. Through multiple settlement agreements, the United States Department of Justice endorsed the Web Content Accessibility Guidelines 2.0AA.

As a developer, you’re responsible for making sure screen readers can access your websites and apps, that a user can navigate them by keyboard, can easily adapt to large type, and more. When was the last time you tried to navigate Facebook or Gmail without your mouse? Have you ever tried to fill out a form just by using voice prompts? Have you ever used the accessibility tools on your computer? Below we’ve compiled a list of resources for your journey into accessibility.

1. Understanding Web Accessibility Guidelines - Mozilla

Mozilla compiled a great series of resources explaining exactly how to comply with WCAG 2.0 and 2.1. They break down each of the four principles of accessibility (Perceivable, Operable, Understandable, and Robust) and link to practical resources so that you don’t have to go hunting anywhere else.

The four sections, each covering one aspect of accessibility, are a comprehensive list of things to keep in mind when building quality websites. Mozilla’s compilation covers the basics of providing text alternatives to non-text content, continues to instructions for making that text show up on the page in predictable ways, provides specific guidelines on webpage navigation, and covers everything in between.

Many of the suggestions should be a must-read for everyone building a webpage, for example:

• Making the text content readable and understandable.
• Providing input assistance to help users avoid and correct mistakes.

2. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) - Steve Krug

This is one of the best books on usability available. While usability is about creating an effective and clear website, many of the usability concepts discussed in this book also make your website more accessible to people with disabilities and impairments, for example, those less sensitive to certain colors, or those with poor visual acuity or tunnel vision. This new edition includes a chapter on mobile usability.

In Chapter 1, with the same title as the book itself (Don’t Make Me Think!), Steve Krug points out that making every page seem obvious makes the website experience feel better to the users. “The sites that don’t make us think about unimportant things seem effortless. At the same time puzzling over things that don’t matter saps our energy and our time,” Krug argues.

Chapter 5, Omit Needless Words, becomes ever more important as new content gets added to the web every day. The author provides suggestions on making your writing on the web shorter and more effective.

3. Accessibility Wins

If you’re in need of a little inspiration, scroll through the examples over on Accessibility Wins. The blog features the websites that are making their functionality accessible to all. Know of any great examples of accessible websites? Submit your entry!

One of the things I learned about on Accessibility Wins is Facebook’s accessibility toolbar. A great example of navigation help on a large website that otherwise would be tough to get around without a mouse or a keyboard. Ideally, no website should be as complex as Facebook. But if yours is, this is an effective pattern to try out.

I also loved the explanation of the Google Maps keyboard-only navigation. Pro tip: press Shift+Tab twice to get right into the keyboard-only mode without having to tab through the entire webpage.

4. The A11Y Project

The A11Y Project has a great list of resources including a library of accessible widgets and patterns, a checklist for an accessible website, and a long list of screen readers, courses, and software to check color contrast.

The accessible widgets and patterns are available for free from the Patterns page. There you will find everything from buttons and forms to tables and even to a list of embeddable accessible video players. Many of the elements are written in vanilla JavaScript and don’t require any extra libraries to work.

The Project also organizes accessibility-related conferences and meetups, and you can find the information on those in the events section. There are events of all kinds, from online webinars to in-person events around the globe.

5. Free Course: Web Accessibility by Google

This course goes deeper into how accessible semantics can help with navigating a webpage, how screen readers work, and how to find potential accessibility tweaks on an existing webpage.

The course is part of a nanodegree in Frontend Development and covers areas of accessibility such as the focus and the navigation without a mouse, the web semantics for screenreaders, and the general styling for accessible elements.

The course also shows how to use the developer tools built into the Chrome web browser to audit the accessibility of web pages and understand what changes can be made to improve the usability for all visitors.

Accessibility is Up to You

It is up to designers and developers to adhere to the accessibility guidelines. Most developers don’t choose colors or fonts, but all developers should understand the principles of accessibility and feel empowered to bring up any problems they find for discussion with the team.

In an ideal world, teams would consider the accessibility aspect when planning the project from the beginning so that they could catch potential accessibility issues early. Regardless of when you may enter a project, it’s important to fight for the accessibility of it for all.

Perhaps you want to find some fellow developer or designer friends and go through these resources together. Perhaps you’ll want to talk to your boss or manager about making sure the WCAG guidelines are implemented in every project. Perhaps, you’re a freelancer who can add accessibility as part of your development process. Whatever your role, accessibility is for you and me and your neighbor and your mom and the girl in Indonesia you’ll never know. Now go add some subtitles for your videos!

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper: Accessibility for Developers

Adding Accessibility to Your Apps

One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG complaint and give you great functionality from grids and charts to schedulers and pickers. Get a head start on your app's UI and a head start on accessibility compliance at the same time.

Learn more about: Kendo UI