janeway icon indicating copy to clipboard operation
janeway copied to clipboard

Contextual link fixes arising from a11y audit

Open StephDriver opened this issue 2 months ago • 3 comments

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.

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 1, item 3. Search icon is not identified simply read as 'link'
  • [ ] 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 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 69. License was done better in Sample 1, where there was a brief description of what the license meant.
  • [ ] 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).
  • [ ] 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.

StephDriver avatar May 31 '24 10:05 StephDriver