“Show more” buttons

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interaction.
• Expected behavior.
• Notes.

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" must 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

• When the keyboard focus is on the button, additional information can be shown by hitting the Spacebar and Enter keys. To do so, listen for the click event.
• When the button is activated, the keyboard focus is dynamically placed on the container of the new additional information.
• When there is no more additional information to show, the button disappears.

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 is 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

Back to top