2024038 - [a11y] Heading levels for the Settings VPN section are not following their visual appearance or expected hierarchy

Status: ASSIGNED

(Firefox :: IP Protection, defect, P3)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Firefox DevTools Inspector highlighting two headings using same H2 HTML element but visually one is smaller than another one, note pointing at both stating "both are H2s"

STR:

1. Ensure a screen reader is running, i.e. an NVDA on WinOS or VoiceOver on MacOS
2. Confirm the VPN in Firefox is enabled but it is not yet opted-in
3. Navigate to the Settings > Privacy & Security (about:preferences#privacy) and locate VPN section
4. Navigate to a opt-in card, i.e. on Nightly it's Try Nightly’s built-in VPN heading using a screen reader and observe the screen reader's announcement of the heading
5. Visually, compare the section heading VPN and the card's heading Try Nightly’s built-in VPN to evaluate their hierarchy.

Expected:

1. The Try Nightly’s built-in VPN heading's programmatic level follows its visual importance and is programmatically communicating it being a sub-heading for its visual parent VPN (heading level 2) being a heading level 3 (using <h3> HTML element, for instance).

Actual:

1. The Try Nightly’s built-in VPN heading is programmatically the same level as its visual parent - it is using <h2> HTML element to indicate heading level 2.
   1. This is an access-S3 issue because the programmatic heading levels are inconsistent and are not following their visual hierarchy.
   2. Per the WebAIM Screen Reader User Survey #10 results, Missing or improper headings were included in Top-10 list of problematic items in the overall rating of difficulty and frustration for screen reader users. 80% of the responders are relying on some form of markup to find information on a lengthy page, among them 71.6% of responders are likely to use headings first, thus this bug is a paper cut that would likely be noticeable by users.

Recommendation:

1. Replace the sub-heading's <h2> tag with <h3>, keeping the visual styling intact (the <h2> heading is using heading-large class while the implied lower level heading is using heading-medium class, as expected)

Comment 1

[konyhéa]

hII, can I pick this up?

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:fchasen, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Fred Chasen [:fchasen]]

This is using moz-promo which is setting the heading. Maybe that heading should be strong, h3 or set by the consumer?

Comment 4

[Jules Simplicio [:jules]]

Allowing the consumer to determine the heading level sounds good to me.
I did something similar for card recently, but the header font size can also get larger or smaller in that case.

The recommendation from Anna is to keep the visual size the same and I agree. I feel for moz-promo while we should allow the consumer to pick the heading level, the heading stays visually the same. Promos come with images and if we muck with the heading visually it may cause image dimensions and layout to grow/shrink unexpectedly.

This can move under Toolkit > UI Widgets btw.

Comment 5

[japandi]

Attachment: Bug 2024038 - [a11y] Change VPN promo heading from h2 to h3 for proper hierarchy r?ayeddi