adobe / adobe/aem-block-collection
Missing Headings for Cards
- Dominant language
- JavaScript
- Stars
- 39
- Forks
- 67
- Avg merge
- 3h 36m
- Merged PRs (30d)
- 1
Description
**Actual Behaviour**
There are no headings on each card which makes it difficult to navigate for screen reader users. Currently there is only heading on the page (Another List).
**Expected Behaviour**
The absence of headings is not a WCAG violation. Having a heading on each card makes the cards more usable for screen reader users.
Please add a heading in the example output for the Card component for each card. This makes navigating through cards much easier for screen reader users. Adding it to sample components makes it much more likely that users of this component will also follow the pattern.
** Steps to Reproduce**
1. Go to the URL https://main--helix-block-collection--adobe.hlx.page/block-collection/cards
2. Use Accessibility Insights (Chrome/Edge Extension) to highlight the headings for the page
3. Notice that the cards do not have a heading and it is hard for screen reader users to tell when a new card begins.
**Applicable Guideline:**
This is more from a usability perspective and not a WCAG violation
**Screenshot**

Contributor guide
Research direction
Start with the Cards page linked in the issue and locate the Card component's example output. Review the card markup with Accessibility Insights, then add a heading for each card and verify that headings clearly identify the cards for screen reader navigation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100