Still on Drupal 7? Security support for Drupal 7 ended on 5 January 2025. Please visit our Drupal 7 End of Life resources page to review all of your options.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
- 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> - 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.
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | Skipped heading level error 2.png | 76.08 KB | kentr |
| #16 | Skipped heading level error 1.png | 68.3 KB | kentr |
| #10 | views_infinite_scroll-3267139-missing-pager-headline-10.patch | 2.09 KB | tobiasb |
Issue fork views_infinite_scroll-3267139
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
tobiasbWrong module ;-)
Comment #3
tobiasbComment #4
hexabinaerLooks good to me (but that doesn't mean much).
Comment #5
WestphalDenn commentedAs a screen reader user I am happy to see progress in accessibility enhancements. For further enhancement I'd like to suggest the following:
Comment #6
hexabinaerComment #7
hexabinaerComment #8
hexabinaerComment #9
tobiasbComment #10
tobiasb* Adder a wrapper
Comment #11
laura.gatesI could not get #9 and #10 to apply with Drupal 9.3.21 and version 2.0.0 of this module. #3 did apply correctly though.
Comment #13
kentr commentedComment #14
kentr commentedChanging to NW until I create MR.
Comment #16
kentr commentedThere's an MR for review.
In addition to applying the patch from #10, I added support for the views pager
Heading Leveloption instead of a hard-codedh4because the accessibility checks were reporting an error about the skipped heading level.I've tested this manually on D11.