o-banner: Improve link descriptions for use with screen readers - ID: DAC_Non_Descriptive_Links_01

[JakeChampion]

Issue

This is from page 23 of the audit report

Issue can be found on: https://www.ft.com/__origami/service/build/v3/demo?component=o-banner%404.0.0&demo=banner&system_code=origami-repo-data&brand=master

The ‘Try it now’ and ‘Give feedback’ links are non-descriptive for screen reader users navigating out of the context of the page using the links dialog list.

Screen reader user comments:

There are two links on this page that are unclear when navigated to out of context. Using the ‘U’ keystroke or the JAWS Links dialogue (Insert + F7) I found ‘Try it now’ and ‘Give feedback’.
Neither of these links describe what they refer to, this means that Screen Reader users will be at a loss until they activate the links.
Including clear and descriptive link text such as ‘Try new homepage’ should help to clarify the purpose of links.”

Proposed Solution:

Add more description to the links, this can be by adding to the visual link text or with visually-hidden text. This will enable screen reader users to identify the purpose of the links when navigating out of the context of the page.
Example:

<a href=”#” class=”o-banner__button”>Try the new homepage</span></a> CSS:
 <a href=”#” class=”o-banner__link”>Give feedback<span class=”visually-hidden”>on the new homepage</span></a>

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%); 
	height: 1px; 
	overflow: hidden; 
	position: absolute; 
	white-space: nowrap; 
	width: 1px;
}

[notlee]

Note. This and similar issues apply to Stories. We should updated Story default props to also be descriptive.
#523