Skip to content

Dialog: Allow to put the dialog title in a heading element (h1-h6) #2271

Closed
@rpkoller

Description

@rpkoller

With #2246 the element in the background of the dialog are getting removed from the AOM. The problem the title is just wrapped in a span which isn't semantic. The title is properly announced when dialog is opened (tested on drupal) but if the content of that modal doesnt contain any heading elements if you open up the rotor in for example voiceover the headings section wont be available at all. this might be potentially confusing since you are unable to get the context the dialog is about. there are no headings available and with VO-shift-i you only get announced the title and stats of the hidden page not the dialog modal. technically you would have to step through the modal with the voiceover cursor since the title isnt focusable or close the modal and reopen it again to get it reannounced.

which element to use instead of the generic span is not specified in the wcag, see this comment for context
w3c/wcag#2722 (comment) . according to the comment an h1 or any other heading level element is perfectly fine. the aria apg example uses an h2 for example: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/ while in a discussion on the a11y slack https://web-a11y.slack.com/archives/C042TSFGN/p1708471859401949 the recommendation by a few folks to go with an h1. with the modal dialog open only the content of the modal is accessible the overall heading structure of the page is irrelevant. and james scholes emphasized that the modal title should be h1. there is no reason to use an h2 since all it does is to take away one heading level from the modal content (james is a screen reader user).

i "think" i've raised the aspect of the html element wrapping the title before in the context of the linked issue or the corresponding PR but unable to find the detail. but since it is still debatable which heading level to pick as well as the aspect of backwards compatability i wonder if it would be feasible to make the html element wrapping the title configurable? so adding somthing like titleElement to the options and set it to "span" per default that way it would be a none breaking change. the user would be able to to change the element proactively via the options?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions