Describe the bug
I appreciate the Highlights/Headings feature, but it doesn't always give accurate or complete info relative to the Accessibility Tree.
Specifically:
\ is accurately highlighted as HX.
\
is highlighted as DIV[heading], which does not help me visually validate the semantic structure of the headings.
\ is highlighted as HX (so the aria-level is ignored, despite the fact that JAWS, NVDA, and VoiceOver (for Mac) interpret this as HY.
\ is highlighted as HX, when it should be HY.
As a side note, the engine rules checker throws a warning if aria-level is used on a , whether the role="heading" is included or not. I'm of the opinion that using aria-level on a heading () is not something we should be throwing warnings about, and in particular we should not be requiring use of role="heading" when aria-level is used on an .
To Reproduce
I think this is clear from above.
Test Case (CodePen/JSBin/etc.):
\
This is an H1\
\
This is a div with role='heading' and aria-level='2'\
\
This is a H1 with aria-level='2'\
\
This is an H2 with aria-level='3'\
Expected behavior
I suggest you mark these as below:
H1: \
This is an H1\
H[2]: \
This is a div with role='heading' and aria-level='2'\
H[2]: \
This is a H1 with aria-level='2'\
H[3]: \
This is an H2 with aria-level='3'\
So the brackets say "this was cast to level X" without taking up a lot of screen space. Still easily quick-scannable on the page.
This is not a bug, Toolkit simply highlights the element native type and role for divs.
But there is definitively room for improving the label with more useful value.
Describe the bug I appreciate the Highlights/Headings feature, but it doesn't always give accurate or complete info relative to the Accessibility Tree. Specifically:
As a side note, the engine rules checker throws a warning if aria-level is used on a, whether the role="heading" is included or not. I'm of the opinion that using aria-level on a heading () is not something we should be throwing warnings about, and in particular we should not be requiring use of role="heading" when aria-level is used on an .
To Reproduce
I think this is clear from above.
Test Case (CodePen/JSBin/etc.):
\
This is an H1\
\This is a H1 with aria-level='2'\
\This is an H2 with aria-level='3'\
Expected behavior
I suggest you mark these as below: H1: \
This is an H1\
H[2]: \This is a H1 with aria-level='2'\
H[3]: \This is an H2 with aria-level='3'\
So the brackets say "this was cast to level X" without taking up a lot of screen space. Still easily quick-scannable on the page.Screenshots
Version information
This is not a bug, Toolkit simply highlights the element native type and role for divs. But there is definitively room for improving the label with more useful value.