Postponed
Project:
Drupal core
Version:
main
Component:
Umami demo
Priority:
Normal
Category:
Bug report
Assigned:
Issue tags:
Reporter:
Created:
5 Feb 2018 at 16:29 UTC
Updated:
9 Jan 2024 at 17:49 UTC
Jump to comment: Most recent, Most recent file
Comments
Comment #2
andrewmacpherson commentedComment #3
mgiffordIs 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...
Comment #4
andrewmacpherson commentedThis 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.
Comment #5
ckrinaComment #7
andrewmacpherson commentedI 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.
Comment #8
andrewmacpherson commentedThe 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.
Comment #9
parijke commentedWhy not make it a normal image so we can use the responsive image module on it?
Comment #10
volkswagenchicktagging for badcamp 2018
Comment #12
volkswagenchickTagging for DrupalNorth 2019
Comment #13
volkswagenchickComment #18
shaalComment #22
smustgrave commentedFor the accessibility team to take a look.
Comment #23
mgiffordMostly we need to determine if we can still replicate this bug with FF & NVDA.
Comment #25
mgiffordAdding reference to Windows High Contrast Mode.