Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contextual link fixes arising from a11y audit #4221

Open
10 tasks
StephDriver opened this issue May 31, 2024 · 3 comments
Open
10 tasks

Contextual link fixes arising from a11y audit #4221

StephDriver opened this issue May 31, 2024 · 3 comments
Labels
a11y Issues that relate to acessibility VPAT Issue prioritised for VPAT improvements.

Comments

@StephDriver
Copy link
Contributor

StephDriver commented May 31, 2024

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 StephDriver added the a11y Issues that relate to acessibility label May 31, 2024
@StephDriver
Copy link
Contributor Author

@StephDriver
Copy link
Contributor Author

Note from WCAG 3.2.1 it is also important that we differentiate visually between

  • internal page links
  • links which open in the same tab
  • links which open in new tabs

This is to aid the predictability of clicking the link for the user.

Currently internal page links versus all other links are identifiable to screenreaders.

@StephDriver
Copy link
Contributor Author

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

Image

@StephDriver StephDriver added the VPAT Issue prioritised for VPAT improvements. label Jun 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Issues that relate to acessibility VPAT Issue prioritised for VPAT improvements.
Projects
Status: Sent to Dev
Development

No branches or pull requests

1 participant