Modal titles - what element to use?

[BitwiseAndrea]

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.

[patrickhlauke]

as modal dialogs (if done correctly) are almost like a whole self-contained new little document, <h1> would be appropriate as they're not within the hierarchy of the rest of the page anymore.

but even if using an <h2>, <h3>, whatever, it's arguably fine as long as any further headings (if any) inside the modal correctly come below whatever heading level you chose. skipping levels is not a hard failure of 1.3.1 Info & Relationships, for instance.

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.

[patrickhlauke]

incidentally... twbs/bootstrap#37210

[JAWS-test]

skipping levels is not a hard failure of 1.3.1 Info & Relationships, for instance.

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

[JAWS-test]

Yes, but it is a failure of the HTML specification.

There are 2 statements:

• SHOULD: if you have headings, you should start with h1
• MUST: if you have different heading levels, you must use correct levels without skipping one level (after h1 no h3, h4, h5 or h6 is allowed, only h2)

[bruce-usab]

Skipping levels is not a failure of the HTML specification (or at least, not the one linked to). Emphasis added:

Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.

That is not the same as @JAWS-test paraphrase:

If you have different heading levels, you must use correct levels without skipping one level

After h1 — h3, h4, h5 or h6 is allowed because h3-h6 are less than h1.

AAA SC 2.4.10 Section Headings can be used to fail a page that skips heading levels, but not 1.3.1.

[awkawk]

AAA SC 2.4.10 Section Headings can be used to fail a page that skips heading levels, but not 1.3.1.

@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.

[bruce-usab]

2.4.6 is Headings and describe topic or purpose. I agree with you that headings (1) are not required (at AA), and (if present) might not actually be all that descriptive and (2) still meet 2.4.6.

I wrote:

AAA SC 2.4.10 can be used to fail a page that skips heading levels, but not 1.3.1.

I wish I had written "might" or "may" and not "can" as I think it is possible but not necessarily the case that skipping levels fails 2.4.10.

I think we agree than an auditor should fail blatant misuse of headings under 1.3.1 (e.g. using CCS to flip the visual prominence of H2 and H3, while organizing content based on the visual prominence). But if the author's choices for H2/H3 (both visual and programmatic) are not consistent, that probably fails 2.4.10 but not 1.3.1.

[awkawk]

@bruce-usab I'm not sure what you mean for the latter but we can chat about it some other time... off topic for this issue

[patrickhlauke]

@bruce-usab

heading level that is less than...

less than means has a smaller number, not that it's lower in the hierarchy. <h1> has a heading level that is less than <h3>s, so an <h1> can follow an <h3>. but going the other way, it can only be "1 greater", so apparently - and i got confused about this as well - the current HTML spec is saying that if you have, say, an <h3>, and you want to go to a lower hierarchical level, you can ONLY use <h4> (as, say, <h5> is NOT "1 greater"). this is why i removed my initial comment here.

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 <h6> or something to be safe

[bruce-usab]

I interpreted that bit as snark.

From: 4.3.11 Headings and outlines

The lower a heading's heading level is, the fewer ancestor sections the heading has.

H1 has no ancestors. H2 has at least one ancestor. H1 is a lower heading level than H2. But the line in question, does not use lower it uses less than.

From a hierarchal view, H4 < H2

Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.

H4 can follow H2 because H4 < H2

H4 can follow H4 because H4 is equal to H4

What I am not quite groking is that, apparently, only H3 can follow H4? (1 greater)

So an outline of: H2, H4, H4, H2 — is not valid HTML?

But I think I must be missing what is meant by heading lead because it would have been much more straightforward for the requirement to be written as:

Each heading following another heading in the outline must be a lower heading level, the same level, or one greater heading level.

It does not say that, so I infer that the concept of heading lead must be integral to the meaning.

Here is a version using lower than instead of less than:

Each heading following another heading in the outline must have a heading level that is lower than, equal to, or 1 greater than the previous heading level.

[patrickhlauke]

I interpreted that bit as snark.

why would it be snark? it reflects exactly what the spec says https://html.spec.whatwg.org/multipage/sections.html#outline

h1–h6 elements have a heading level, which is given by the number in the element's name.

heading level is given by the number

Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.

it then tells you the heading level of the next heading must be less than, equal, or 1 greater than that of the heading. as heading level is the number, the number must be <, =, or +1

don't think there's any different way to read this?

[patrickhlauke]

and regarding the confusion there on what "heading lead" means, it is not a term that seems defined anywhere, but I'm reading this as a way of identifying which heading you're then talking about. rewritten differently

Each heading following another heading X in the outline must have a heading level that is less than, equal to, or 1 greater than heading X's level.

and again less than, equal to, greater than, lower than, higher than, all these terms refer to the number, not any kind of hierarchical semantic meaning. so h1 is lower than h2, h1's heading level is less than h2's heading level.

[patrickhlauke]

read domenic's statement again, not as snark, but as a statement of fact

Well, note that it's not comparing the headings; it's comparing the heading levels. And the heading levels are pretty clearly defined as numbers. Numbers have known semantics for "greater" and "less".

[patrickhlauke]

and domenic confirms that i'm correct in my understanding whatwg/html#8366 (comment)

[GreggVan]

WCAG allows for levels to be skipped. It does require that SYNTAX be followed (4.1.1) but not semantics. If levels are skipped for everyone - it is allowed for people with disabilities. We could not find anyone that had a serious problem with heading level skipping - though for both people with and without disabilities it is better The HTML spec <https://html.spec.whatwg.org/multipage/sections.html#outline> does say 4.3.11 Headings and outlines h1 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>–h6 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements> elements have a heading level, which is given by the number in the element's name. These elements represent <https://html.spec.whatwg.org/multipage/dom.html#represents> headings. The lower a heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading>'s heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> is, the fewer ancestor sections the heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> has. The outline is all headings <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> in a document, in tree order <https://dom.spec.whatwg.org/#concept-tree-order>. The outline <https://html.spec.whatwg.org/multipage/sections.html#outline> should be used for generating document outlines, for example when generating tables of contents. When creating an interactive table of contents, entries should jump the user to the relevant heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading>. If a document has one or more headings <https://html.spec.whatwg.org/multipage/sections.html#concept-heading>, at least a single heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> within the outline <https://html.spec.whatwg.org/multipage/sections.html#outline> should have a heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> of 1. Each heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> following another heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> lead in the outline <https://html.spec.whatwg.org/multipage/sections.html#outline> must have a heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> that is less than, equal to, or 1 greater than lead's heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level>. But WCAG does not require that you use HTML or that you use it according to spec (other than syntax). g Gregg Vanderheiden ***@***.***

[GreggVan]

I think people are referring to this line in the HTML spec http://w3.org/TR/HTML <http://w3.org/TR/HTML> People quote the last line of section 4.3.11 (the second item pasted below the dotted line). The last line of 4.3.11 reads Each heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> following another heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> lead in the outline <https://html.spec.whatwg.org/multipage/sections.html#outline> must have a heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> that is less than, equal to, or 1 greater than lead's heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level>. It is unclear if this is talking about "Headings and Outlines" or talking about "All use of Headings" One CAN take it to mean that this is how all docs should be so that they outline well ( But the other sections on Headings do not mention a MUST regarding the strict hierarchy. ) (They are all pasted below the dotted line here) So I leave it to you all to decide what is meant here — and who and when each provision is meant to apply But there is a place in the HTML Spec that says MUST And it does say that headings under the lead MUST be - LESS THAN (you can have H3 followed by H1) - EQUAL TO (you can have H3 followed by H3) - or 1 greater than (you can have H3 followed by H4) But the MUST statement does not allow H3 followed by H5, nor H1 followed by H3 Gregg - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Here are all the references in the HTML spec regarding Headings. 3.2.5.2.4 Heading content <https://html.spec.whatwg.org/multipage/dom.html#heading-content> Heading content defines the heading of a section (whether explicitly marked up using sectioning content <https://html.spec.whatwg.org/multipage/dom.html#sectioning-content-2> elements, or implied by the heading content itself). h1 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>,h2 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>,h3 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>,h4 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>,h5 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>,h6 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>,hgroup <https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element> (if it has a descendant h1 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements> to h6 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements> element) 4.3.11 Headings and outlines <https://html.spec.whatwg.org/multipage/sections.html#headings-and-outlines-2> h1 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>–h6 <https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements> elements have a heading level, which is given by the number in the element's name. These elements represent <https://html.spec.whatwg.org/multipage/dom.html#represents> headings. The lower a heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading>'s heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> is, the fewer ancestor sections the heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> has. The outline is all headings <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> in a document, in tree order <https://dom.spec.whatwg.org/#concept-tree-order>. The outline <https://html.spec.whatwg.org/multipage/sections.html#outline> should be used for generating document outlines, for example when generating tables of contents. When creating an interactive table of contents, entries should jump the user to the relevant heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading>. If a document has one or more headings <https://html.spec.whatwg.org/multipage/sections.html#concept-heading>, at least a single heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> within the outline <https://html.spec.whatwg.org/multipage/sections.html#outline> should have a heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> of 1. Each heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> following another heading <https://html.spec.whatwg.org/multipage/sections.html#concept-heading> lead in the outline <https://html.spec.whatwg.org/multipage/sections.html#outline> must have a heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level> that is less than, equal to, or 1 greater than lead's heading level <https://html.spec.whatwg.org/multipage/sections.html#heading-level>. 5.3.6 Sections and headings <https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings> @namespace url(http://www.w3.org/1999/xhtml); article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section { display: block; } h1 { margin-block-start: 0.67em; margin-block-end: 0.67em; font-size: 2.00em; font-weight: bold; } h2 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; font-weight: bold; } h3 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; font-weight: bold; } h4 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; font-weight: bold; } h5 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; font-weight: bold; } h6 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; font-weight: bold; } In the following CSS block, x is shorthand for the following selector: :is(article, aside, nav, section) @namespace url(http://www.w3.org/1999/xhtml); x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; } x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; } x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; } x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; } x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; } The shorthand is used to keep this block at least mildly readable.

…

On Oct 12, 2022, at 11:00 AM, Bruce Bailey ***@***.***> wrote: I do not agree that the spec as written disallows skipping heading levels. It it meant to say that, it could just say something much simpler. Instead, it is the more complicated heading lead and the context of Outline. Has @domenic <https://github.com/domenic> said it means no skipping levels? — Reply to this email directly, view it on GitHub <#2722 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNGDXRNFUSJJZHJCDVIU3DWC34EBANCNFSM6AAAAAARBUAINM>. You are receiving this because you commented.