Elements that use .visually-hidden and .focusable aren’t read when using VoiceOver in iOS or in Chrome

Open on Drupal.org →

Created on 2 April 2015, over 9 years ago

Updated 30 January 2023, almost 2 years ago

Problem/Motivation

Elements that use .visually-hidden and .focusable classes (such as the skiplink) are not read when using the VoiceOver screenreader in iOS (iPhone or iPad) or in Chrome on a Mac.

For an easy demo of this problem, try listening to the skiplinks here on d.o with VoiceOver either on an iOS device or in Chrome on a Mac. Even though d.o is using D7 and the classes have different names, the styles are the same as in D8.

This problem doesn’t appear in the Seven theme because it sets the position to absolute when focusable elements are focused.

Proposed resolution

Using the HTML5 Boilerplate version of the visually-hidden and focusable styles and removing position: static from the focusable styles fixed this problem for me.

Required Tests

Let's make sure there are no regressions in these other AT:

JAWS - Untested
NVDA - Untested
VoiceOver - Untested
ChromeVox - Untested

🐛 Bug report

Status

Needs work

Version

10.1 ✨

Component

Last updated 5 days ago

Maintained by
🇹🇼Taiwan @johnalbin
🇺🇸United States @mherchel

Created by

🇺🇸United States dcmouyard

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.

neworleans2016

Needs manual testing
The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

visually-hidden

frontend

Needs accessibility review
Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

Incomplete comments

Sign in to follow issues

Comments & Activities

Not all content is available!

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

Comment almost 2 years ago →
needs-review-queue-bot
The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.
Comment over 1 year ago →
🇨🇦Canada mgifford Ottawa, Ontario
We really should fix this!

This could possibly fall under a few SC, but I'm putting it under https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Comment about 1 year ago →
🇺🇸United States ricksta
I'm not experiencing any problems with Apple VoiceOver. Skip link is being read.

MacBook Pro Sonoma 14.1
Drupal version 11.0-dev

Private windows opened in:
Google Chrome: Version 119.0.6045.199
Firefox: 120.0.1 (for this I used Chris Pederick's Web Developer tools simulator for iOS 12/13, Pro max IOS 114.6)
Comment 2 months ago →
saurav-drupal-dev
tried to reproduce it but as comment #29 mentioned and for me also the voice over issue i am not facing it tried on chrome and safari for ios and for desktop too.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024