10 Things You MUST Know About Developing Accessible Web Pages With React

At ArcTouch we have made creating accessible apps and websites a company priority. As we’ve written, having an Accessiblity First mindset makes better products and good business sense for our clients.

Here are 10 things you need to know about developing accessible web pages with React to make a site more inclusive for all users.

The basics

1. Use semantic HTML elements: Ensure that you use semantic HTML elements, such as headings, paragraphs, and lists, to structure the content on your web page. This makes it easier for screen readers and other assistive technologies to understand and navigate your content. If you have this, you are already halfway there! If you want to learn more about this topic, I recommend reading the article “Clean HTML” by Leticia Coelho.

<!--> Use appropriate tags <-->
<h1>This is an accessible heading</h1>

<!--> Avoid using div <-->
<div style="color:#000;text-align:left; font-size:20px"> 
  This is NOT an accessible heading 
</div>

2. Provide alternative text for images: Imagine how frustrating it is to navigate on a page with the screen reader and be stuck in the middle of an image without knowing what it is about. Provide alt text for all images on your web page. Alt text should describe the content of the image.

Minimalist drawing of a girl reading a book

<img src="img_girl.png" alt="Minimalist drawing of a girl reading a book" />

Some tips you can follow:

• Do not include “picture of,” “image of,” or similar things
• Keep it short and simple
• For images with text, use alt text the text from the image
• Use empty alt text when the image is purely decorative

Learn more about this on the Harvard University Digital Accessibility page.

3. Ensure links and buttons are visually distinctive: Ensure links and buttons are visually distinguishable and provide clear labels. This helps people understand the purpose of the links and buttons.

Button example:

import React from 'react';

function AccessibleButton({onClick, children, ...props}) {
  const handleClick = (event) => {
    event.preventDefault();
    onClick();
  }

  return (
    <button onClick={handleClick} {...props}>
      {children}
    </button>
  );
}

export default AccessibleButton;

Link example:

import React from 'react';

function AccessibleLink({href, children, ...props}) {
  
  return (
    <a href={href} target="_blank" rel="nofollow" {...props}>
      {children}
    </a>
  );
}

export default AccessibleLink;

Example of usage:

import AccessibleLink from './AccessibleLink';

function App() {
  return (
      <AccessibleLink href="https://www.a11yproject.com/">
        The a11y project
      </AccessibleLink>
  );
}

export default App;

4. Ensure proper document structure: Ensure that the document structure is properly nested and that headings and other elements are used in the correct order. Use only one <h1> per page, and make sure that if you have other headings like <h2> or <h3> put them in the right ascending order. This will bring a better reading experience for those who use screen readers. Try not to use <h3> before an <h2>, for example.

5. Use proper labeling: Use proper labeling for form elements, such as labels and placeholders to help users and screen readers understand the purpose of the form element. Use the <label> tag with for and id attributes, this will ensure that the input field is related correctly to the label.

• Note that the for attribute is used as htmlFor in JSX.

import React from 'react';

function App() {
  const [address, setAdress] = useState('');

  const handleInputChange = (event) => {
    setAdress(event.target.value);
  }

  return (
    <div>
      <label htmlFor="addressInput">Address:</label>
      <input
        id="addressInput" 
        type="text"
        value={address}
        onChange={handleInputChange}
      />
    </div>
  )
}

export default App;

The best practices

6. Ensure keyboard accessibility: Ensure that all functionality on your web page can be accessed using a keyboard alone. This includes navigation, form fields, and any interactive elements. Keyboard accessibility is one of the most important aspects of web accessibility. Users with motor disabilities rely on a keyboard. You can use tabindex="0" attribute to add an element that does not normally receive focus, such as <div> or <span>, into the navigation order when it is being used for interaction.

7. Ensure focus management: Well you ensure keyboard accessibility, and the next step is ensuring that focus is managed appropriately, so users can easily see where they are on the page and how to navigate to other areas. Use landmark elements and roles, such as <main> and <aside>. This will demarcate page regions allowing the user to navigate these sections quickly. Avoid using Autofocus, and try not to anticipate how users want to use applications; this can disturb the focus flow and can be problematic for people with motor disabilities.

8. Use descriptive link text: Use descriptive link text that accurately describes the link's content. Avoid generic link text such as “click here” or “read more. In case you need to do that, there is an alternative, you can manage to use aria-label and aria-hidden attributes like this:

import React from 'react';

function AccessibleLink(props) {
  return (
    <a {...props} aria-label="Read more about accessibility">
      <span aria-hidden="true">Read more</span>
    </a>
  );
}

export default AccessibleLink;

In the example above, we have a label for the link that could be more descriptive. With the aria-label attribute, the screen reader can better describe the function of the link, and the aria-hidden hides the visible text from screen readers.

9. Use ARIA attributes: Use ARIA attributes to provide additional information to assistive technologies. ARIA attributes can help make complex widgets, such as menus, more accessible. Use appropriate aria-* attributes to provide context for complex elements: Besides using ARIA attributes, consider using more advanced attributes such as aria-haspopup, aria-controls, and aria-describedby to provide additional context for complex elements.

One important thing when talking about React and that we have to take into account when it comes to WAI-ARIA is that while attributes in React are usually written in camel case, for example, for is htmlFor, in the case of WAI-ARIA the standard HTML with hyphen case (also know as kebab-case) is kept, like the following examples, aria-label, aria-required, and so on.

10. Test with assistive technologies: Test your web page using assistive technologies such as screen readers and keyboard-only navigation to ensure it is accessible to users with disabilities. Some software that you can use: NVDA (Windows), Apple VoiceOver (Mac), and Orca (Linux). If you prefer to use browsers, there is a Chrome extension, for example, called Chrome Vox, or you can use the Lighthouse extension, or even better you can find it in the Chrome development tool to check the health of the page.

Bonus tip

Keep up to date with accessibility guidelines: Keep up to date with accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG) to ensure that your web pages meet the latest accessibility standards.

Want to build more accessible software?

ArcTouch has been developing apps and websites for over 15 years. Want to make your software more accessible? Contact us to get started.