adobe / adobe/aem-block-collection

Missing Headings for Cards

Open
#9 0 comments 0 reactions 0 assignees View on GitHub
a11y
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**
![No Heading for Cards - only one heading on the page](https://user-images.githubusercontent.com/123964084/219414272-4244cc9a-9943-48e5-b781-3fac3e1dc6fc.png)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.