[Global] Homepage sections generate multiple links with similar text

[svinkle]

Issue summary

When specific sections are on the homepage, there exists the possibility of many "View all" links. When navigating via link elements alone, screen reader users will hear "View all" link repeated which may give the impression each points to the same location. This could lead to a confusing user experience.

Screenshots

(Screenshot Removed)

Current code

HTML

<a href="/blogs/news" class="blog__button button">View all</a>

Steps to reproduce

1. Go to a Dawn store with any supported browser
2. With an active screen reader, navigate via links only

Behavior

Expected

• "View all" links to be accompanied by additional information for context.

Actual

• "View all" links do not contain additional context.

Recommendation

1. Add a unique id to the section heading.
2. Add a unique id to the "View all" link.
3. Add the aria-labelledby attribute to the "View all" link, setting its value to its own id first, then the id of the heading, separated by a space.

With this change:

• Screen readers will hear, "View all Blog posts, link", providing more context for each instance.

Recommended code

HTML

<h2 class="blog__title" id="SectionHeading-0">Blog posts</h2>

<!-- … -->

<a href="/blogs/news" class="blog__button button" id="ViewAll-0" aria-labelledby="ViewAll-0 SectionHeading-0">View all</a>

Specifications

• Dawn version: 2.0
• Browser: Any
• Component: Global
• WCAG Principal: Operable
• WCAG SC: 2.4.4 Link Purpose (In Context)
• Severity: Medium
• Effort: Medium