Do I need to make my app accessible?
People will visit your website for a purpose. It may be reading the news, or finding a flight, you name it. Your visitors may be visually impaired, suffer from epilepsy or have trouble understanding complicated sentences. Think about these people, try imagine being them, and answer yourself a simple question: do I want to make their lives even harder?
How do I make my app accessible?
This is a big question, as accessibility (often abbreviated a11y) encompasses quite a lot of things from supporting screen readers and keyboard navigation, to ensuring the colors used in your designs offer an appropriate amount of contrast.
For users with visual impairments, you should ensure that your website or web app works well with screen reader software. This involves things like specifying a description for images using the alt attribute, using semantically meaningful HTML tags like nav, header, and main to denote parts of your page, and so on. For other visually impaired users who may not need screen reader software, you should ensure that the colors used on your page have a good contrast ratio and avoid using fonts smaller than 14pt.
For users with motor impairments, who may have difficulty using a mouse, it's important to support keyboard navigation. For a lot of HTML elements like input, button, and a you get this behaviour for free, but in certain cases you may need to add tabindex="0" to an element's attributes to make it focusable. It's also very important that you don't remove the default styles applied to focused elements, as users using keyboard navigation heavily rely on these.
Finally, for users with hearing impairments, you should ensure that any audio you're using has a visual equivalent. This means providing closed captions or text summaries for any videos, and not relying on audio feedback to communicate things to the user.
Finally, here are some helpful resources for ensuring your site is accessible:
- The Mozilla Developer Network's accessibility tutorials go into great depth on many aspects of accessibility.
- Contrast Ratio Calculator - A tool from Lee Veroux which helps to determine if the colours you're using in your designs offer an appropriate amount of contrast.
- tota11y - A tool from Khan Academy which helps you visualize how your site will perform with assostive technology.
- eslint-jsx-a11y - An ESLint plugin which helps you spot accessibility issues with JSX code in React projects.