Lists with Repeating Calls to Action
For developers who want to:
- 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 minimal 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 map (the example is given in a React component, but the principle applies to any element mapping):
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 can be tweaked to achieve the same result but in a more accessible way. We can add a more descriptive label for our screen reader users by adding an aria-label to the button. For example:
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 more 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.
When creating a React component that may be used as list items, we can 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:
Final thoughts
This small tweak 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.