-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
The heading mark-up is found to be inappropriate in the modal dialog.
Steps to Reproduce
- Navigate to the "Plans" dropdown.
- Select any option from the listbox.
- Navigate to "Settings" button and activate it.
- Select the "Get started" option.
- Observe that the modal dialog has been opened.
- Inspect the code and verify that incorrect heading level defined.
Screenshot 1
Screenshot 2
Actual Results
Heading structure is found to be inappropriate on the page. Text such as "Saving changes" and "Manage your issues" is coded as <h4> which does not matches the visual hierarchy on the page. As a result, screen reader users found it difficult to understand the page's content structure.
Expected Results
Use heading levels as per specification such as <h1> should be followed by <h2>, <h3> and so on.
Even though this is required at WCAG 2.1 at Level AAA, it is recommended that the discussed issue be addressed as screen reader users rely on headings heavily to understand the page structure.
Code Snippet
<h2 class="Card__Heading-sc-1vayiwt-2 cgQtzc">Saving changes</h2> <h2 class="Card__Heading-sc-1vayiwt-2 cgQtzc">Manage your issues</h2>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.6.1
Chrome - Version 120.0.6099.234 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 17.3 (18617.2.4.11.9, 18617)
JAWS- Version 2022
NVDA- Version 2020.3
- links to
