Contrib.social

Improve Accessibility: Ensure Screen Readers Do Not Announce Plus-sign for Local-action Links

Open on Drupal.org →
Created on 27 April 2017, over 7 years ago
Updated 8 February 2024, 9 months ago

Problem/Motivation

Original Post

When using Mac Voiceover on Administration pages for "Add Content," "Add Content Type," "Install New Module," etc. there is a "+" prepending the text.

The screen reader announces the plus sign, which is a visual enhancement, but confusing to those with screenreaders.

We need to adapt the HTML or the CSS to make it so it only announces the button text, but not the button symbols.

The code is currently along these lines (using the Seven admin theme):
<a href="/admin/modules/install" class="button button-action button--primary button--small" data-drupal-link-system-path="admin/modules/install">Install new module</a>

There is a ::before element that has the content in it:

button-action:before {
    content: '+';
    font-weight: 900;
}

For clarity, screenshots are attached.

Steps to reproduce

Use Mac VoiceOver and the screen reader announces the plus sign

Proposed resolution

Merge request link

https://git.drupalcode.org/project/drupal/-/merge_requests/6333

Remaining tasks

Review
Commit

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
CSS  →

Last updated about 5 hours ago

Created by

🇺🇸United States littlekope0903

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.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

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.

  • Comment over 1 year ago →
    🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    Tagging to breath some life in here

  • Comment over 1 year ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    I tried to find a WCAG SC for this, but was having trouble finding a way to exclude content that should be hidden.

  • Comment 10 months ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Adding reference to Windows High Contrast Mode.

  • First commit to issue fork.
  • Merge request !6333Issue #2873404 by ranjith_kumar_k_u, sim_1, kostyashupenko, vsujeetkumar:... → (Open) created by mark_fullmer
  • Status changed to Needs review 10 months ago
  • Comment 10 months ago →
    🇺🇸United States mark_fullmer Tucson

    It's been a bit of time since we've had a patch that applies to the latest version of Drupal. The merge request above works with 11.x.

    The comment that set this to "Needs work" reported that VoiceOver was still reading the "+". The previous patch seemed to still contain some content: "+" declarations, so maybe that was the issue.

    In any case, in my testing, after removing content: "+" in favor of <span aria-hidden="true">+</span> works as expected, in Firefox, Chrome, and Safari.

    And this approach addresses the concerns about Windows High Contrast Mode (as opposed to using a background-url approach).

    Setting back to "Needs review."

  • Pipeline finished with Failed
    10 months ago
    Total: 472s
    #82927
  • Status changed to Needs work 10 months ago
  • Comment 10 months ago →
    🇺🇸United States smustgrave

    Issue summary looks like it could use some attention. Recommend following the standard issue template.

    Do wonder if this could cause some breakage by changing a class name.

    MR appears to have failures.

  • Comment 9 months ago →
    🇮🇳India djsagar

    Enhance Summary Description Following Drupal Standards for Improved Understanding of the Issue Tagged

  • Pipeline finished with Success
    9 months ago
    Total: 569s
    #87679
  • Comment 9 months ago →
    shweta__sharma

    Added standard IS template.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024