[Collection page] Hidden content creates verbose experience

[svinkle]

Issue summary

The collection page heading includes a visually hidden "Collection" element. Depending on the environment, this can cause an announcement of "2 item" within the heading, or a duplication of the announcement. This would lead to a confusing screen reader user experience.

Screenshots

Current code

HTML

<h1 class="collection-hero__title">
  <span class="visually-hidden">Collection:</span>
  Bags and backpacks
</h1>

Steps to reproduce

1. Go to a Dawn theme store with any supported browser
2. Navigate to a collection page
3. With an active screen reader, navigate to the h1 content using the virtual cursor

Behavior

Expected

• Visible text content to be the only content available.

Actual

• Visually hidden content is causing a verbose user experience.

Recommendation

Remove the span.visually-hidden element.

Recommended code

HTML

<h1 class="collection-hero__title">
  Bags and backpacks
</h1>

Specifications

• Browser: Any
• Dawn version: 2.2.0
• Component: Collection page
• WCAG Principal: Perceivable
• WCAG SC: 1.3.1 Info and Relationships
• Severity: Low
• Effort: Low

[ChinazoOnwukaike]

I would like to take this issue please. I've sent a pull request, removing the span.