Lists with Repeating Calls to Action

This topic will help you:

  • Understand how screen reader users interact with your content when many similar actions are presented
  • Identify a quick fix to apply when mapping data to HTML elements
  • Apply the same approach to developing flexible and accessible React components

Using multiple similar items in a view

In web applications there will often be a need to map a list of data to a number of similar HTML elements with a particular call to action. This topic inspects a very simple example - a list of product options with a ‘find out more’ button (the button on the current page does nothing, but you can imagine it would e.g. expand further product details elsewhere in the page, open a modal, etc):

  • Interest-free Loans

  • Savings Accounts

The list items above can be created with a simple map (the example is given in a React component, but the principle applies to any element mapping):

...waiting for Gist...

Why is this example an issue for accessibility?

On first glance, this example looks fine! However, it’s important to bear in mind that many screen reader users will tab directly to interactive items on your page (see Getting Started with Keyboard Navigation and Screen Readers). Try turning on your screen reader and tabbing to the buttons above. Was the output useful?

Having multiple calls to action (links, buttons, an interactive item) with the same text/label leads to loss of context and potential confusion.

Without the visual context of the “Apply for…” titles, the buttons don’t make a lot of sense on their own. The user is invited to “Find out more” but without any clue as to what they are finding out more about.

Create your mapped elements with accessibility in mind

The example above is easy to tweak to achieve the same result but in a more accessible way. We can add a more descriptive label for our screen reader users by simply by adding an aria-label to the button. For example:

...waiting for Gist...

Try turning on your screen reader again and tabbing to the buttons in our new list below. Notice the call to action on each list item is now much more descriptive and allows users to easily distinguish between the actions attached to each item in the list

  • Interest-free Loans

  • Savings Accounts

Applying the approach to React components

React developers will often find themselves performing a similar mapping exercise between list items and React components, and by coding these reusable components with accessibility in mind, we can adopt the same approach very easily.

When creating a React component that may be used as list items, we can simply ensure that a prop can be passed in to apply to the aria-label attribute as above. The list in our example above could look like this:

...waiting for Gist...

Final thoughts

This very simple tweak is easy to make, and makes a big difference to our screen reader users. It’s also one of the accessibility issues that our linting tools will not pick up for us, and demonstrates the importance of conducting manual screen reader passes of your content from time to time.

For React developers, the example above also shows that when we create reusable components, we need to actively consider the multiple contexts in which they might be used, and what props we need to define to make sure our components are sufficiently flexible. For some recommended next reading, a similar consideration is explored in Heading Levels in Reusable Components.