Improve link text on available updates page to address WCAG SC 2.4.9 Link purpose (link only)

Created on 12 September 2019, over 5 years ago
Updated 23 January 2023, almost 2 years ago

Problem/Motivation

The available update report (at admin/reports/updates has links which are impossible to understand on their own. We can improve these for accessibility, to satisfy WCAG 2.4.9 Link Purpose (Link Only),

These links can be understood in the context in which they appear visually, when you read the rest of the text in the section (project name, version numbers).

Here we see the Migrate Plus project is currently at version 8.x-4.1, but the recommended version is 8.x-4.2, and a release candidate is also available for the 8.x-5.x branch.

  • The version numbers are links, which can be understood in combination with the preceding project name.
  • There are multiple "download" and "release notes" links, which can be understood from the preceding project name and version number.

However they can't easily be understood if someone is using a "list all links" tool. These are a commonly used feature of screen readers, and some browser add-ons can provide a similar feature. Here we see the elements list window from the NVDA screen reader.

  • There are multiple "download" and "release notes" links whose purpose can't be understood or distinguished. It isn't clear which project or version they are for.
  • For the version number links, it isn't clear which project they are for.

Note that some screen readers allow users to inspect the URL of each link, but this requires significant extra effort, and isn't sufficient to satisfy WCAG SC 2.4.9.

Proposed resolution

Add visually-hidden spans to these links, so they can be understood out of context.

  • Version numbers: <a href="..."><span class="visually-hidden">$project-name </span>$version-number</a>
  • Release notes: <a href="...">Release notes<span class="visually-hidden">for $project-name $version-number</span></a>
  • Download: <a href="...">Download<span class="visually-hidden"> $project-name $version-number</span></a>

Here we are using WCAG technique C7: Using CSS to hide a portion of the link text.

Remaining tasks

Patch.
This will involve templates from the update module, and the stable theme.

User interface changes

No visual design changes.
Improves link text for assistive tech users (principally screen readers).

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Needs review

Version

10.1

Component
Update 

Last updated 5 days ago

  • Maintained by
  • 🇺🇸United States @tedbow
  • 🇺🇸United States @dww
Created by

🇬🇧United Kingdom andrewmacpherson

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Novice

    It would make a good project for someone who is new to the Drupal contribution process. It's preferred over Newbie.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024