Modal titles - what element to use? #2722
Replies: 6 comments 17 replies
-
|
as modal dialogs (if done correctly) are almost like a whole self-contained new little document, but even if using an the reason why there's nothing in WCAG about this is because that's an overly specific little detail, and WCAG doesn't go deep into tech as it tries to be more generally applicable. |
Beta Was this translation helpful? Give feedback.
-
Yes, but it is a failure of the HTML specification. See also the dialog example at https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element - it uses an h1 heading. In contrast, the ARIA dialog from the W3C uses an h2 heading: https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog.html |
Beta Was this translation helpful? Give feedback.
-
@bruce-usab I don't agree with that. 2.4.6 indicates that when you use headings that they need to be descriptive and 1.3.1 indicates that when you use headings that the programmatic information needs to express those headings, but if your web page doesn't have headings there isn't a problem at Level AA. At Level AAA 2.4.10 requires that headings are used to organize the content, but it doesn't indicate that you can't ever skip levels. |
Beta Was this translation helpful? Give feedback.
-
less than means has a smaller number, not that it's lower in the hierarchy. however, i don't agree with this in the HTML spec...sounds essentially far too prescriptive, and doesn't solve the problem that the original outline algorithm (with it's utopian "browsers will just work it out" idea) tried to address ... the fact that sometimes, you have to skip heading levels from a practical point of view when you're including components that contain headings, but you can't know ahead of time what level they'll be placed in, so you choose an |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Since modals are technically "nested" within a page (even though visually they're kinda separate) it seems appropriate to use an h2 element for a heading of a modal. But, i see a lot of code snippets online that use h1s, even snippets that brag about being "extremely accessible". And a lot of frameworks that use, for whatever reason, h4s (probably just styling), or just plain divs.
Regardless, i can't find anywhere that explicitly calls out modal headings in wcag documentation and would love a sanity check.
Beta Was this translation helpful? Give feedback.
All reactions