Web Accessibility

Improve your product's web accessibility for better ada compliance from the start of the building process. Follow these principles to better your websites accessibility with some building block rules.


Make clear distinct color design choices by using googles material design color tool https://material.io/design/color/#.


Application foundations to understand to make your product reach out to more audiences https://www.w3.org/WAI/fundamentals/accessibility-principles/.


A couple of quick checklists to improve your contents accessibility.


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 or ensure your product just works.

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.

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, a11y assetive props, performance and more.

More Resources