-
Bug
-
Resolution: Tracked Elsewhere
-
Low
-
None
-
5.11.0
-
Severity 3 - Minor
-
Issue Summary
Heading structure is found to be inappropriate on the page. Text such as "Email channels" in customer channel is coded as <h2> and text such as "Add shortcut " is coded as <h3> in add shortcut dialog in side navigation pane which does not matches the visual hierarchy on the page.
Steps to Reproduce
- Open the Project-All open page
- Using Tab key or Using screen reader, navigate to the mentioned instances in the page
- Inspect the code or pull up the list of Headings.
- Observe that the mentioned text has incorrect heading mark-up as per visual hierarchy.
Screenshot
Actual Result
Heading structure is found to be inappropriate on the page. Text such as "Email channels" in customer channelnon modal dialog is coded as <h2> instead of <h3> and text such as "Add shortcut " is coded as <h3>instead of <h2> in add shortcut non -modal dialog present in the side navigation panel of the page 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
The heading levels should correctly convey the relationship between the headings, such as the parent-child relationship between the headings. Provide an appropriate heading level to the mentioned heading text, such as <h1>, <h2>, <h3>, and so on.
Code snippet
<h3 class="sd-dialog-title sd-dialog-title-email">Email channels</h3> <h2>Add shortcut</h2>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16 inch, 2021)
macOs Ventura 13.5
Chrome - Version 115.0.5790.170 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 16.5 (18615.2.9.11.4)
JAWS- Version 2023
NVDA- Version 2023
Voiceover - Version Latest
- is caused by
-
-
- Closed
-
- was cloned as
-
-
- Closed
-
[JSDSERVER-14305] Project | All open: Inappropriate heading structure
Hey mma d229a9df837e
As Andrii mentioned, the "Email channel" is not a child of the Customer Portal heading, but from the screenshot above, I can see that it has a link above that says "VISIT THE PORTAL."
cc- beeebe6f29a3
Hey f64b10823ad4
1) I'm not sure whether "Email channels" should be h3, to be honest - I think it's adequately sized as it's a sibling of another h2 element, so both of them being h2 would make sense.
-- > The heading "Customer Portal" is marked as "h2" in the first screenshot. As this is the main heading, the other heading inside the pop-up should be in heading level i.e. <h1> <h2> <h3> and so on, so over here we suggest marking "Email channels" as <h3> according to the heading level.
2) The "Add shortcut" being h2 would make sense, however, to be consistent with other headings at the same level.
-> Yes by following the same heading level.
Hey d229a9df837e mma So, I spoke with Sid, and he said that since this is not a blocker or a critical issue, we may take into account your points of view and move forward with this. Thank you!