Skip to content

"Pinned Documents" section: section title without heading semantics #2349

@cyberbaloo

Description

@cyberbaloo

Observed behavior

The "Pinned Documents" section is labeled via aria-labelledby pointing to a <span id="pinned-docs-title"> element. This element is visually styled as a section title but has no heading semantics. It therefore does not appear in the page's heading hierarchy. This error is present on almost all authenticated pages.

Expected behavior

The section title must be a proper heading element (<h2>) in order to appear in the heading hierarchy and be reachable via heading navigation. The aria-labelledby attribute then becomes superfluous if the section is a <section> whose heading is the first child.

Steps to reproduce

  1. Log in and access a page containing the "Pinned Documents" section.
  2. Navigate by headings with a screen reader (H key in NVDA/JAWS).
  3. Observe that "Pinned Documents" is not announced as a heading.

Possible solution

Before:

<section aria-labelledby="pinned-docs-title">
  <span id="pinned-docs-title" class="section-title">Pinned Documents</span></section>

After:

<section>
  <h2>Pinned Documents</h2></section>

Additional context / Screenshots

Error reproduced on almost all pages of the authenticated interface.

RGAA criteria

[Critère 9.1 : Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1)

Impact

A blind user navigating by headings with a screen reader cannot directly reach the "Pinned Documents" section. They must browse through the entire page content to access it.

Priority

P1

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

Status
Done
Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions