A11yWatch Web Accessibility

Improve your product's web accessibility from the start of the building process quickly. Follow these principles to improve your websites inclusion with some foundational rules.

Inclusion step by step

Color

Make clear distinct color design choices by using Googles Material Design Color Tool and Contrast Ratio.

WCAG Principles

Application foundations that help improve your audience inclusion and reach.

Accessibility Checklist

A couple of quick checklists to improve your contents accessibility.

Features

Accessibility comes in many forms, with macOS/iphones you can enhance a major part of the application so it's best we understand the technologies underneath. This allows us to use these features to our advantage to better assist users.

React components with accessibility in mind

If you use react and start on a new project consider looking into chakra-ui. They take care of a lot of the things that we can easily miss when trying to deliver a website fast.

Avoid Intense Animations

Animations can be very powerful in describing a message using the right techniques but, sometimes they can also make the experience unpleasant. Its important to understand how to make your animations smooth so that users can view it. Theres tools built in to the dev tools in most browsers like chrome to detect FPS + simulating on a test set of devices to see if everyone will perceive the effect the same.

Understand how performance impacts accessibility

Performance goes into web accessibility in many forms. In certain situations even voice over can be impacted by heavy usage of javascript in incorrect locations. Try to move certain synchronous methods outside of the render loop as much as possible. Avoid doing sorts on large array elements inside render as well unless you know exactly how the flow of control for the render cycle will be impacted, a solution could be to move sequences into seperate buckets on event processing. Theres a lot more that can be done to improve performance with javascript including using queueMicroTask and understanding how the event loop works. When theres a need for a lot of work using web workers could also help or simply moving the processing to the server.

Practice VoiceOver

VoiceOver on iOS is very powerful and is huge for assisting users with vision impairment. VoiceOver runs natively so this adds a process onto your normal application (slows it down). This means that certain things that are not on the native end for speed can provide a not so ideal experience. It's important to test how your application will run with this enabled from aria-label, accessibility assetive props, performance and more.

More Resources

Pick the best Wave alternative

Start a free 7 day trial for A11yWatch now