Contrib.social

Accessibility: Pagination Structure

Open on Drupal.org →
Created on 3 February 2023, almost 2 years ago

Problem/Motivation

There are several accessibility issues that have been identified within this component, such as redundant headers and incorrect structure elements.

Proposed resolution

  • Pager component has redundant hidden H4 that needs to be removed.
  • Replace the aria-labelledby with aria-label on the navigation element.
  • Pager should be using ordered list element, currently has an unordered list.

Current structure:

  <nav role="navigation" aria-labelledby="pagination-heading" {{ component.attributes('pager', modifiers, attr) }}>
    <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
    <ul class="pager__items js-pager__items">

Changes would look like this:

<nav role="navigation" aria-label="Pagination" {{ component.attributes('pager', modifiers, attr) }}>
    <ol class="pager__items js-pager__items">
📌 Task
Status

Fixed

Version

4.0

Component

Code

Created by

🇺🇸United States jldust

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024