“Show more” buttons
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interaction.
- Expected behavior.
“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
After activation of the button
ARIA roles, states and properties
Following the activation of the button,
tabindex="-1" must be added to the container of the new content.
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.
- 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
- 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.
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:
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.