Modal Dialog Example: Heading level could be H1 #551
Comments
|
Because they are a child window, I have usually recommended a level lower than 1. The lack of a level 1 could actually help some people understand they are not on the main page. But, I don't think there is any hard and fast rule here. It is one of those subjective calls where there is rationale that could probably justify either approach or a variety of others as well. Let's see what others have to say. If consensus develops around another approach, we could potentially provide some guidance on this in a future release. |
mcking65
added
Practice Page
|
I'm generally in agreement with @mcking65 here. I'd argue that the relationship between the dialog element and its triggering element conveys the dialog's relationship to the main page better than its heading structure, but the two techniques aren't exactly mutually exclusive. The dialog's first heading does seem highly subjective either way. I would be reluctant to be too prescriptive about this, but we do need to be consistent across examples. |
|
@erikkroes, After discussion in the February 12, 2018 meeting, We concluded:
Is this a satisfactory response? Do you think there is something more that the APG TF should consider? |
|
As @erikkroes 👍 the last comment closing the issue. Please reopen if this is not satisfactory. |
|
Based on the above comment, if there is no need to prescribe a specific approach, we should at least provide some examples. These examples should provide guidance to decide when to use H1 and non H1 heading levels. @jnurthen Can you please reopen this issue? |
Typically one h1 on a page helps create a navigatable structure. There Is No Document Outline Algorithm. https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html#Update10 But I wasn't sure what the right answer is now we have `aria-modal` that can trap focus and mark other elements as inert, and went on a little side quest. Turns out W3C's APG Task Force (ARIA Authoring Practices Guide) discussed this in a meeting a few years ago. w3c/aria-practices#551 (comment) They concluded: - It is helpful if there is a consistent approach across dialogs in an application. - There is not necessarily a need for the APG to prescribe a specific approach. So, I guess provided you're in a modal either h1 or h2 is fine. APG continue to use h2 in their example and Material UI are undecided, with some interesting back and fourth on when a h1 or h2 might be a better experience. Probably, it's not a big deal either way. If I had to pick a global rule based on the above and no access to direct user testing for this, I'd go with h2. Here it is. A quick PR to switch to a h2. This was prompted by a user question in the support Slack channel. https://financialtimes.slack.com/archives/C02FU5ARJ/p1696242420071219
Typically one h1 on a page helps create a navigatable structure. There Is No Document Outline Algorithm. https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html#Update10 But I wasn't sure what the right answer is now we have `aria-modal` that can trap focus and mark other elements as inert, and went on a little side quest. Turns out W3C's APG Task Force (ARIA Authoring Practices Guide) discussed this in a meeting a few years ago. w3c/aria-practices#551 (comment) They concluded: - It is helpful if there is a consistent approach across dialogs in an application. - There is not necessarily a need for the APG to prescribe a specific approach. So, I guess provided you're in a modal either h1 or h2 is fine. APG continue to use h2 in their example and Material UI are undecided, with some interesting back and fourth on when a h1 or h2 might be a better experience. mui/material-ui#34250 Probably, it's not a big deal either way. If I had to pick a global rule based on the above and no access to direct user testing for this, I'd go with h2. Here it is. A quick PR to switch to a h2. This was prompted by a user question in the support Slack channel. https://financialtimes.slack.com/archives/C02FU5ARJ/p1696242420071219
Typically one h1 on a page helps create a navigatable structure. There Is No Document Outline Algorithm. https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html#Update10 But I wasn't sure what the right answer is now we have `aria-modal` that can trap focus and mark other elements as inert, and went on a little side quest. Turns out W3C's APG Task Force (ARIA Authoring Practices Guide) discussed this in a meeting a few years ago. w3c/aria-practices#551 (comment) They concluded: - It is helpful if there is a consistent approach across dialogs in an application. - There is not necessarily a need for the APG to prescribe a specific approach. So, I guess provided you're in a modal either h1 or h2 is fine. APG continue to use h2 in their example and Material UI are undecided, with some interesting back and fourth on when a h1 or h2 might be a better experience. mui/material-ui#34250 Probably, it's not a big deal either way. If I had to pick a global rule based on the above and no access to direct user testing for this, I'd go with h2. Here it is. A quick PR to switch to a h2. This was prompted by a user question in the support Slack channel. https://financialtimes.slack.com/archives/C02FU5ARJ/p1696242420071219
In the modal dialog example, dialogs currently use a
<h2>as a heading. As these dialogs are within their own context, wouldn't a<h1>be a better fit?The text was updated successfully, but these errors were encountered: