Change heading hierarchy for accessibility purposes

Created on 22 October 2024, 5 months ago

Problem/Motivation

The heading hierarchy on the "TFA setup" page is not correct. There is a <h3> following directly after the <h1>.
The title 'Install authentication code application on your mobile or desktop device:' is from an item_list which provides it in a h3 tag. The hierarchy is important for screenreader users.
We got this as feedback from an accessibility test. (WCAG 1.3.1 Info and Relationships)

Tested with Drupal 10.3.6 and tfa 1.9

More information:

You can use the HeadingsMap Firefox addon to display the hierarchy:

(ignore the breadcrumb, that is not relevant for tfa)

Proposed resolution

We could remove the '#title' from the item_list and just add an h2 html tag instead.

πŸ› Bug report
Status

Active

Version

1.9

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany lmoeni

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

Merge Requests

Comments & Activities

  • Issue created by @lmoeni
  • πŸ‡©πŸ‡ͺGermany lmoeni

    I implemented the changes for the TOTP and HOTP setup.

  • Pipeline finished with Success
    5 months ago
    Total: 275s
    #317071
  • πŸ‡ΊπŸ‡ΈUnited States cmlara

    To my knowledge hard coded HTML tags should be avoided in the From API (FAPI) whenever possible.

    My first thoughts are this is the FAPI responsibility to handle nesting levels on the page, or perhaps the Theme.

    I won't rule out that this is actually our fault and possible due to either missing some normal header or from nesting without a title somewhere in the FAPI layout (though even than, shouldn't FAPI be responsible for that too?). Second thought is maybe this is related to use of '#theme' => 'item_list',

    Sending back to needs work for more investigation as the suggested fix (modifying multiple plugins and needing to add manually defined H levels) implies there should be a different solution.

Production build 0.71.5 2024