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.
Features
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.
More Resources
Pick the best Wave alternative
Get started with A11yWatch now for affordable and speedy automated web accessibility tools.