The aria-labelledby attribute in the pager <nav> element references an <h4> element that contains the label text for the pager.
The hierarchy of heading levels should be structured with the proper relationships to parent and sibling elements (WCAG 1.3.1). Since this pager component may appear in different contexts (i.e. in one instance as the child of an <h1> and another instance as the child of an <h2>, etc.), putting the label in a heading will often lead to the component failing the WCAG 1.3.1 criteria.
This can be mitigated by removing the <h4> element and placing the label in the aria-label attribute of the parent <nav>.
The
aria-labelledbyattribute in the pager<nav>element references an<h4>element that contains the label text for the pager.The hierarchy of heading levels should be structured with the proper relationships to parent and sibling elements (WCAG 1.3.1). Since this pager component may appear in different contexts (i.e. in one instance as the child of an
<h1>and another instance as the child of an<h2>, etc.), putting the label in a heading will often lead to the component failing the WCAG 1.3.1 criteria.This can be mitigated by removing the
<h4>element and placing the label in thearia-labelattribute of the parent<nav>.