Card grid has unlabeled sections

[cboyden]

Issue

The card grid pattern is a series of section elements (cards) nested inside a section element (the grid). Each of these is treated as a landmark in the accessibility tree, which means that for example a screenreader user trying to navigate by landmark would have to go through each individual card. And none of them have explicit labels, so they’d be impossible to tell apart.

Recommended fix: Use the section tag for the grid itself, but not the individual cards. Make sure the grid section has an explicit label.

Example

https://a11y-style-guide.com/style-guide/section-cards.html

[scottaohara]

None of the sections are promoted to landmarks because none of them are provided accessible names.

It would actually be highly unnecessary to promote each item to a landmark status, as having an abundance of generic landmarks would dilute the ability to quickly navigate to other important landmarks in the document.

[cboyden]

You're right about the landmark status. Looking at MDN, they recommend not using section as a generic container: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section. But that's more of a recommendation than a rule, so this should be OK as is.

[scottaohara]

i agree that the elements don't necessarily call for section elements here. That said, they could potentially be semantically meaningful depending on the document structure they are used within, so their use is not overtly incorrect.

:: notes to self to go to the MDN page and fix their examples that seem to subtly indicate that the outline algorithm that would allow multiple h1s per page is in any way implemented into browsers ::

[cehfisher]

just seeing this exchange....glad you all worked it out :)