Contextual link fixes arising from a11y audit

[StephDriver]

[edited 16 Dec to make clear the scope]

Action List:

• fix items found by manual screen reader testing below, (some may have been fixed by icon work).
• ...and from that get idea of which kind of links are non-compliant (e.g. links within logic loops).
• hunt for similar across front end (prioritising Clean theme) and fix/standardise
• internal cross references within articles are out of scope for this issue, and will be addressed in Revise article internal cross references #4245, Descriptive links within Citation Styles #4084 and elsewhere. This is about non-article links only.

Link Requirements

• Each link on a page should have unique text (for visual only links, this means the text for screen reader).
  • particularly important for links created inside logic loops.
• the purpose of the link should be clear (not 'click here') This may require aria as an alternative to visual context (e.g. for 'read more').
• the user should be able to tell whether the link is going
  • another part of the page
  • another page on the site
  • external
• if the link involves an icon, look at the work done on Icon A11y improvements #4215
• In general DO NOT use the word 'link' in a link's text, as a screen reader will read out the word 'link' before any link, an there is a visual difference too, making this superfluous.

Resources

WCAG

WCAG 2.4.4

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

Crossref DOI links

see Cross-ref for info on DOI links

TLDR:
non-contextual link but with Aria markup so that it is read as if contextual by screen reader

Manual Screen Reader Testing Results

The screen reader testing (#4194) found the following links did not have appropriate context:

• DOI must show the full link, but should have aria markup so that it doesn't get read out as all the digits, see below.
• Sample 2, item 69. License was done better in Sample 1, where there was a brief description of what the license meant.
• Sample 2, item 29. Link text of "2011" which is not descriptive, but makes sense visually with how referencing is done. Screen-reader users use link navigation as one way to traverse the page, so contextual, differentiated links are important as part of the user's concept of page layout and where they are within that page. Use Aria-label to give additional context to such links.
• Sample 4, item 10. Funding link does not match context - it links to articles funded by them, not to the organisation. Potentially both should be included, the funder's site, and a link to the articles funded by them. <a href="/mmb/funder_articles/http://dx.doi.org/10.13039/100016537">National Cattlemen's Beef Association</a>
• Sample 5.1, item 9. the link to the article is described by the article number only, not the article title. e.g. "fifteen thousand, seven hundred and one, link"
• Sample 5.3, item 13. article title link is read out with the article number, something which isn't on the visual display e.g. "link to article [article number] [article title], link" which is unnecessarily verbose. The suffix ' link ' is automatically read by the screen reader which has recognised this as a link. The description "link to" is superfluous. The article number is probably surplus to requirements and distracting.

May be fixed by #4215

• Sample 1, item 3. Search icon is not identified simply read as 'link'
• Sample 2, item 58. ORCiD logo, read out as 'ORCiD logo, link' but no differentiation as to which author or that this link leads to the ORCiD site - i.e. same description for both links which means they lack context when traversing by link.
• Sample 2, item 70. The external link to the license info is an icon without alt-text, but it does have a rel=license attribute. But the licence name is in a <p> tag with no id - so it doesn't link to that licence.
• Sample 4, item 7. License should be linked and described (as in other samples).