Contrib.social

Links inside surrounding text fail WCAG Use-of-Color

Open on Drupal.org →
Created on 3 April 2018, over 7 years ago
Updated 2 June 2025, about 2 months ago

Problem/Motivation

In the Seven theme, links which occur inside of surrounding non-link text are coloured blue, but have no other indication that they are a link. This is a WCAG 2.0 failure, specifically F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision.

Normally browser underline links, which allows them to stand out against surrounding non-link text, without relying solely on colour. Seven removes this default underline, causing WCAG failure F73.

Browsers also have default link focus styles, which surround the link on all sides. We've overridden this, and use a solid underline to indicate focus. This means our focused-links look like default browser style for UN-focused links, which could be a bit confusing. Especially since our links use a blue colour close to the default browser link colour.

Proposed resolution

Update the link styles for Seven theme:

  1. Underline links wherever they appear inside of surrounding non-link text. This means the resting non-interactive state, when hover/focus doesn't apply.
  2. This means we'll also need to change the focus style for links inside non-link text.

Affected text blocks are include:

  • Links inside help text at the start of pages (e.g. the help at the start of admin/modules, screenshot in comment #6).
  • Links inside messages (e.g. link inside "there was a problem checking available updates for Drupal", inline form errors jump-links. See screenshots in comment #7)
  • Links inside Form API #descriptions (e.g. the description for the checkbox on admin/config/development/maintenance has two links inside it, screenshot in comment #8)
  • Links inside main content of admin pages, e.g.
    • inside main content of admin/help/* pages (screenshot in comment #9),
    • links inside the details elements on admin/reports/status (screenshot in comment #10),
    • the form preamble at admin/modules/install (screenshot in comment #11),
    • etc.
  • Links inside Tour tips. #2851270: Links in the tour tip body are visually the same as the rest of the text → .
  • Others...?

Note, we don't need to update link styles which occur outside of surrouding text, such as the toolbar. It would be a good idea to improve their focus styles to a four-sides outline instead of using underlines, but that's outside the scope of this WCAG failure issue.

Remaining tasks

  • Proposed resolution and patch needs accessibility review

User interface changes

Updates link styles in Seven theme, to fix an explicit WCAG 2.0 failure.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Needs work

Version

1.0

Component

Code

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.

  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Needs reroll

    The patch will have to be re-rolled with new suggestions/changes described in the comments in the issue.

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.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024