Build inclusive apps with free web accessibility resources

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.

Develop accessible apps with our free web accessibility resources

Colors that are web safe

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.


Accessibility takes many forms and with macOS and iPhones we can enhance a major part of our applications. By understanding the underlying technologies, we can leverage these features to better assist users. Doing so provides a better overall user experience and expands our audience to include those who might otherwise be excluded.

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 an effective means of conveying a message, but the user experience can suffer if they are not implemented correctly or smoothly. It's important to understand how to create smooth animations to ensure users can view them properly. Many browsers, such as Chrome, offer built-in tools in their development tools to measure FPS and simulate the effect on a test set of devices. Using these tools can help ensure that everyone perceives the effect in the same way.

Understand how performance impacts accessibility

Web accessibility is impacted by performance in many ways, including heavy usage of JavaScript in incorrect locations which can affect voice over in certain situations. To optimize performance, move synchronous methods outside of the render loop whenever possible and avoid sorting large array elements inside render unless you understand how it affects the render cycle. Consider moving sequences into separate buckets for event processing. There are several ways to improve JavaScript performance, such as using queueMicroTask and understanding the event loop. For work that requires significant processing, you may consider using web workers or simply moving the processing to the server.

Practice VoiceOver

VoiceOver on iOS is a powerful tool for users with vision impairment, but it adds an additional process to your regular application, which can slow it down. To ensure that your application runs smoothly with VoiceOver, it's important to test for speed and performance. You can use aria-label and accessibility assetive properties, among other tools, to optimize accessibility for all users.

Pick the best Wave alternative

Get started with A11yWatch now for affordable and speedy automated web accessibility tools.