Make Load more markup more accessible

Created on 1 March 2022, almost 3 years ago
Updated 10 November 2024, 23 days ago

Problem/Motivation

A screenreader user would typically use the headline-based navigation to move through views lists. That mode does ignore the load more button (semantically lacking a headline), thus giving the impression that the list has just ended there.

Futhermore, the unnecessary list markup (never containing more than that one item) creates avoidable noise.

We've conducted thinking aloud tests with screen reader users and this is the recommendation:

Proposed resolution

  1. Add a visually-hidden headline which is a pattern that can be learned and understood from other Drupal applications. Like other pagers (but different Text): <h4 id="pagination-heading" class="visually-hidden">Load more</h4>
  2. Remove all ul and li markup around the Load more button

Well aware that this can have legacy implications. Current projects might base the styling on the list markup.

πŸ› Bug report
Status

Needs review

Version

2.0

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany hexabinaer Berlin, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024