Contrib.social

Mobile link labels are improperly hidden

Open on Drupal.org →
Created on 20 October 2023, 8 months ago
Updated 31 October 2023, 8 months ago

Problem/Motivation

  1. When the admin toolbar is collapsed, the icon links labels don’t get read aloud to screen reader users.
  2. This is because CSS is used to hide them with display: none; which is not the correct technique.
  3. Per Drupal’s documentation Hide Content Properly → , the CSS class .visually-hidden should be used instead.

WCAG success criteria

2.4.4 Link Purpose (In Context)
4.1.2 Name, Role, Value

Steps to reproduce

  1. Login as admin. Navigate to /admin/structure/block. Chrome browser, desktop. Collapse the sidebar.
  2. Verify the problem exists with an automated accessibility checker.
    1. Run SiteImprove accessibility checker (Chrome browser extension).
    2. “Link without a text alternative” should be one of the issues it reports.
  3. Verify the problem exists manually.
    1. Inspect with Chrome Dev Tools.
    2. Find the tags that are associated with the toolbar icons (listed below under Code Snippet).

Code snippet

HTML

<a href="/en/admin/appearance" class="toolbar-link toolbar-link--has-icon toolbar-link--appearance">
     <span>Appearance</span>
</a>

CSS

html:not([data-admin-toolbar="expanded"]) .toolbar-menu__item--level-1:not(.toolbar-menu__item--has-dropdown) .toolbar-link span {
display: none;
}

Paths:
/en/admin/appearance
/en/admin/modules
/en/admin/people
/en/admin/content
/en/admin/content/block
/admin/content/files
/admin/content/media
/admin/help

Potential resolution

  1. In mobile only, add .visually-hidden CSS class to the link text so that it’s hidden to sighted users but available to screen reader users

    Note: This will need additional CSS and/or JS to toggle between mobile and desktop
  2. Add aria-label attribute with meaningful value to each linked icon

    Note: See: https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html#techniques →
  3. Remove display: none; from the following selector

HTML

<a href="/en/admin/appearance" class="toolbar-link toolbar-link--has-icon toolbar-link--appearance">
     <span class=”visually-hidden”>Appearance</span>
 </a>

CSS
html:not([data-admin-toolbar="expanded"]) .toolbar-menu__item--level-1:not(.toolbar-menu__item--has-dropdown) .toolbar-link span {}

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇸Spain ckrina Barcelona

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.

Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024