Baseline box: <h2> in <summary> might be a problem

simevidas commented 1 year ago

Summary

The new Baseline <details> element has a heading in its summary.

<summary>
    <!-- other content -->
    <h2>
        Baseline: <span>Widely supported</span>
    </h2>
    <!-- other content -->
</summary>

This heading is ignored by screen readers because the entire <summary> content is read out as a single text summary. See the Warning box on this page:

https://developer.mozilla.org/docs/Web/HTML/Element/summary#summaries_as_headings

Should the heading be there? What purpose does it have? Does this cause problems for users? Should the heading be replaced by a <span>?

URL

https://developer.mozilla.org/docs/Web/CSS/@layer

Reproduction steps

Open the linked page and inspect the Baseline box in devtools DOM inspector

Expected behavior

Maybe there shouldn’t be a heading in summary.

Actual behavior

There is a heading in summary.

Device

Desktop

Browser

Safari

Browser version

Stable

Operating system

Mac OS

Screenshot

Anything else?

No response

Validations

[X] I have read the Community Participation Guidelines.
[X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

simevidas commented 1 year ago

Relevant standards discussion: https://github.com/whatwg/html/issues/2272

caugner commented 11 months ago

@simevidas Thank you for raising this issue. 👍

I skimmed through the linked standards discussion and agree that we should avoid the heading in the summary element.

mdn / yari