“Show more” buttons

Summary

Principle

“Show more” buttons are dynamic components that display additional content just before the content, each time the button is activated. Content is added with each press, as long as additional hidden content remains available.

The “Show more” button disappears when all the additional hidden content has been displayed on the page.

Core HTML base

Before activation of the button

<div>[Default content]</div>
<button>["Show More" button label]<button>

After activation of the button

<div>[Default content shown before activation]</div>
<div tabindex="-1">[Additional information which is added using the button]</div>
<button>["Show More" button label]<button>

ARIA roles, states and properties

Following the activation of the button, tabindex="-1" should be added to the container of the new content.

Keyboard interaction

Enter and Spacebar

When the keyboard focus is on the button, either of these keys will show additional hidden information, as long as there is hidden information available.

Expected behavior

Notes

If the button only adds interactive elements, the tabindex="-1" attribute can be omitted and the focus can be simply positioned on the first interactive element which appears after the button is activated.

This is the case with a “View more news” button, for example, that triggers links to news items:

<ul>
  <li><a href="…">News Story 1</a></li>
  <li><a href="…">News Story 2</a></li>
  <li><a href="…">News Story 3</a></li>
</ul>
<button>View more news stories </button>

When the button is activated, the keyboard focus should be sent to the link “News Story 4” which be the new link that appears.

There’s no need for tabindex="-1" because the <a> element can receive the keyboard focus by default.

<ul>
  <li><a href="…">News Story 1</a></li>
  <li><a href="…">News Story 2</a></li>
  <li><a href="…">News Story 3</a></li>
  <li><a href="…">News Story 4</a></li>
  <li><a href="…">News Story 5</a></li>
  <li><a href="…">News Story 6</a></li>
</ul>

Comments

Add a comment

Required fields are marked *.

Updates

10 October 2019
Adding the mention “To do so, listen for the click event.”.

Back to top