Our recent site build of LiveGreatwell.com required us to implement a design provided by a third party.  The design included multiple links with the text "Find our more" which pointed to different pages in the site, as shown in the screenshot below:

This creates an accessibility issue, as the purpose of each link can no longer be determined solely from the link's text. To explain this in practical terms, most users will be able to see the context of each link and so know where the link will take them. Visitors using assistive technologies such as screen readers will often browse a site by having each link in a page read out to them. If the links all have the same link text, "Find out more" in this case, then they cannot know where they lead to. More details on this are available at https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=244#link-purpose-in-context.

Fortunately, it's possible to use something known as an "ARIA Label" to avoid this kind of accessibility issue. An "ARIA Label" is invisible HTML markup that defines more specific link text for a link. An example of this is shown at https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA8.html#examples, and we've replicated the HTML snippet from that page below for ease of reference.

<h4>Neighborhood News</h4>
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in 
  property taxes for the coming fiscal year.
  <a href="taxhike.html" aria-label="Read more about Seminole tax hike">
   [Read more...]</a>
</p> 
  
<p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting
   in 3 year old Willy "Dusty" Williams in yesterday's mayoral election.
   <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">
    [Read more...]</a>
</p>

In this example, each link with the text [Read more…] has an "aria-label" attribute that defines more specific link text. Assistive technology browsers such as screen readers will read the aria-label text in lieu of the link's actual text, which allows all users to know where a link will lead them.

To facilitate accessibility compliance we extended the "What You See Is What You Get" (WYSIWYG) content editor of the Platform to support setting of the aria-label attribute for both Link and Button components:

This allowed us to deliver a WCAG 2.2 AA compliant site for https://www.livegreatwell.com/ whilst remaining true to the design we were asked to implement.