From #2938643-9: Umami Banner Block does not have accessible text alternative at wide viewport

Firefox + NVDA did not announce it. Weird! I am really surprised by this result, but I guess it's an unusual situation. I suspect it might have something to do with the image being in the overflow of a container with overflow:hidden. No idea how to fix this. Should double check in an accessibility tree inspector, to see if Firefox is passing it to screen reader or not.

That's what this issue is for :)

CommentFileSizeAuthor
#4 2942238-4.patch708 bytesandrewmacpherson

Comments

yoroy created an issue. See original summary.

andrewmacpherson’s picture

Issue summary: View changes
mgifford’s picture

Is it possibly a Firefox bug? There are a list of known issues here https://github.com/nvaccess/nvda/issues?q=is%3Aissue+is%3Aopen+firefox+l...

andrewmacpherson’s picture

Status: Active » Needs review
Issue tags: +Needs manual testing
StatusFileSize
new708 bytes

This fixes it for Firefox + NVDA. It puts the visually hidden styles the img, not the field wrapper div, so it's not hidden inside the overflow of a parent element. Hoping it's this simple.

I'd like to check this doesn't cause a regression in some other browser/screen reader combination. The previous issue didn't include VoiceOver or JAWS testing. See #2938643-9: Umami Banner Block does not have accessible text alternative at wide viewport for the testing I did already.

It's about confirming the alt text is announce for the tasty pasta bake banner on the Umami homepage, at desktop breakpoint.

ckrina’s picture

Issue tags: +Nashville2018

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

andrewmacpherson’s picture

Issue tags: +visually-hidden

I did some testing with lots of browser/OS/screenreader combinations, before and after the patch here. Will post details full testing details once I've tidied my notes up. My head is reeling from it, too many different speech synthesizers in one evening :-)

As a bonus, I think I've stumbled on some new insight to #2464595: Elements that use .visually-hidden and .focusable aren’t read when using VoiceOver in iOS or in Chrome. Worth a new tag too I think.

andrewmacpherson’s picture

The visually hidden approach to the small image may not be ideal. At wide breakpoints, the banner block image breaks in IE and Firefox, when a windows high contrast theme is used. Background images get stripped out, but HTML images remain. Upshot is they see neither banner image.

I have an idea that instead of hiding the small image in a CSS clip, we could arrange it to be underneath the wide banner by z-index. So when Windows high contrast mode is on, the large background image is stripped away, to reveal the small image, positioned on the right-hand side. Does this make sense? I could do a sketch it it helps.

parijke’s picture

Why not make it a normal image so we can use the responsive image module on it?

volkswagenchick’s picture

Issue tags: +badcamp 2018

tagging for badcamp 2018

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

volkswagenchick’s picture

Issue tags: +drupalnorth2019

Tagging for DrupalNorth 2019

volkswagenchick’s picture

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

shaal’s picture

Assigned: Unassigned » shaal

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

Status: Needs review » Postponed

For the accessibility team to take a look.

mgifford’s picture

Mostly we need to determine if we can still replicate this bug with FF & NVDA.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

Issue tags: +high contrast

Adding reference to Windows High Contrast Mode.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.