Building Accessible React Components: Key Considerations

Web accessibility is crucial, given that around 15% of the world's population lives with some form of disability. These individuals come from all walks of life and reside in every corner of the globe, highlighting the need for websites to be inclusive of a diverse audience. Accessibility is not just about accommodating those with permanent disabilities; it also benefits people with temporary or situational disabilities. For instance, a person using a mobile device in bright sunlight or someone dealing with a temporary injury like a broken arm will find a website easier to use if it is designed with accessibility in mind. Thus, accessibility features are essential for inclusivity and improve the overall usability of a website for everyone.

Based on my learning and experience while working to make our product VPAT-compliant, I have listed some important points to consider when creating or developing React components.

Key considerations while creating a react component:

• Colour Contrast:

  Accessibility should be considered from the beginning of the project design. The colour contrast of buttons, text, borders, or any important areas should be managed wisely and should meet the standard.

  A 3:1 ratio is the minimum for Level AA.

  Accessible color picker: This Chrome extension will help you quickly evaluate the contrast ratio of elements in the UI.

• Keyboard navigation:

  tabindex global attribute, you can make other elements focusable too. When set to 0, the element becomes focusable by keyboard and script. When set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order.

  Users who are visually impaired, illiterate, or have a learning disability use screen readers to navigate a webpage. Screen readers render text and image content as speech output, which helps users understand the current focusable element.

  Sometimes we use icon buttons or elements that are intentionally focusable but do not have any text explaining their role. Here, the aria-label attribute is essential.

  Always be attentive when creating a focusable element without any text inside it. The aria-label value should clearly explain its purpose.

• Alt text for images

  When adding images to your website, always include descriptive alt texts. This helps users with visual impairments understand the content of the image through screen readers.

  To make an image decorative and unfocusable, use a null alt value.

  <img src="image" alt="" />

• Use useRef hook to focus

  Sometimes you might need to shift focus programmatically to an element when it first renders in the UI or to an already rendered element. Instead of using the traditional Document API to select specific elements from the DOM, which is not considered good practice, you can use useRef to target the element and call .focus().

  Refrain from using useEffect solely to focus an element. Instead, follow this practice:
  <div
ref={(elementNode) => {

  elementNode.focus(); }} />

• Development assistance

  The eslint-plugin-jsx-a11y plugin for ESLint helps identify accessibility issues in your JSX code. Many IDEs can show these issues directly in your code editor.

  Free web accessibility testing tools:
  https://developer.chrome.com/docs/lighthouse/overview/ (Very useful and most underrated in terms of other tools).
  https://www.deque.com/axe/

Thank you! You can find me on LinkedIn. Let me know your thoughts, and feel free to join the conversation below. Don’t forget to hit the like button!