Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
The Banner Block in Umami is themed responsively, with different layouts at wide and small breakpoints.
At small viewport width, the image is presented as an IMG element, with text underneath.
On wider viewports, the real <IMG> element is hidden, and the image is applied as a CSS background-image for the entire block, with text on top. There is effectively no accessible text alternative for the image in this case, a failure of WCAG 2.0 Success Criterion 1.1.1 Non-text Content.
Proposed resolution
Find a way to make the text alternative available to assistive tech reliably.
Ideally, it should also be presented visually when the background-image isn't applied, just like it would be for a real IMG element.
Remaining tasks
Figure out a good approach.
Manual testing with various screen readers.
User interface changes
No visual changes intended in the design. This is about making a text alternative more robust for accessibility.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | 2938643-4.patch | 857 bytes | markconroy |
Comments
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedRaising this to major because it's a WCAG 2.0 failure at level A.
Comment #3
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedComment #4
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedHere's a patch that removes the
display: none;(which makes the image field not accessible to screenreaders) and instead (on large screens) applies the same rules that we use for the.visually-hiddenclass, so screen readers should be able to read out what is in the alt text.@andrewmacpherson, if this is a blocker for adding Umami to Drupal 8.5.0 can you add the "Umami beta blocker" tag to it please?
Comment #5
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedI don't know what the Umami beta blocker tag means. How are these issues chosen?
This is a failure of WCAG 2.0 at level A, which is governed by our accessibility gate. In general I'm treating level-A issues as major priority. This was allowed through because we relaxed the gates temporarily to help get an Umami MVP ready before 8.5.0-alpha1. We missed that deadline, so the accessibility gate is back in play for Umami.
Comment #6
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedThe Umami beta blocker tag was created by Webchick (iirc) after the product owners meeting to flag issues that cannot be allowed to stand if we are going to have Umami committed to 8.5.0-beta.
She tagged a few issues with it, spin off issues of those were also tagged, and any other issues we created that we felt _must_ be completed before we could consider this beta-ready.
If you think these a11y issues would also mean that Umami is not ready for a beta release, tag these issues with the Beta blocker tag. That's about as much about the tag as I know.
======
Is this issue still a failure of Level A, even with the patch that I supplied? As in, the text from the image is now available to screen readers. We have a .visually-hidden class in core that we use to make stuff not visible, such as a block title but make the content of the block title available to screenreaders. We can't apply that class to the image field or else it'll mean it's also invisible on small screens, so my compromise was to reuse the same CSS when at a large breakpoint so that the image is used as a background CSS image, but the alt is available to screenreaders.
Comment #7
David_Rothstein CreditAttribution: David_Rothstein as a volunteer commentedThis issue is about the Umami banner block image, but isn't the footer promo image actually a bigger problem? At least for the banner block, it is a background image that doesn't convey that much important information, but for the footer promo image, the image contains embedded text ("3 issue bundle") so it seems like that image definitely needs alt text.
I have written a patch at #2942007: Move the footer promo block image to a field, for better configurability and accessibility which, as a nice little side effect, winds up giving the footer promo image alt text.
Comment #8
David_Rothstein CreditAttribution: David_Rothstein as a volunteer commentedRegarding this issue and the banner block image specifically, presumably the best solution would be to change the theming so it isn't ever a CSS background image... but I'm not sure how easy that is to do without breaking the layout.
If that isn't possible, I would be curious to know if any of the alternatives mentioned at http://davidmacd.com/blog/alternate-text-for-css-background-images.html are acceptable accessibility-wise?
Comment #9
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedI tested patch #4 with some screen readers....
Rather than try alternative approaches here, I'm tempted to say go ahead RTBC with this patch because we know it fixes it for some common screen readers + browser combinations. But we MUST make a follow-up bug to investigate what's going on with Firefox + NVDA.
Rest of comments are my test notes....
Banner image NOT announced:
Win7 + Firefox 52 ESR + NVDA
Win10 + Firefox 52 ESR + NVDA
Banner image announced:
Win7 + IE11 + NVDA
Win7 + Chrome + NVDA
Win10 + Edge + NVDA
Win10 + IE11 + NVDA
Win10 + Chrome + NVDA
Chrome 64 + ChromeVox + Kubuntu 17.10 Linux
Not tested yet:
VoiceOver + Safari + macOS (Simplytest.me was failing to install environments, and I don't have a dev Drupal server set up on my mac...)
Win10 Narrator screen reader (win10 on virtualbox was refusing to give sound output, and if Narrator has a speech viewer UI, then I haven't found it yet....)
JAWS screen reader (don't actually have a copy...)
VoiceOver + Safari + iOS on an iPad in landscape orientation, should get widescreen media query (don't have access to one)
Talkback + Chrome + Android on an Tablet in landscape orientation, should get widescreen media query (simplytest.me was failing to install environments)
Comment #10
yoroy CreditAttribution: yoroy at Roy Scholten commentedThank you @andrewmacpherson.
Here's the followup: #2942238: Umami Banner Block: check presence of text alternative Firefox + NVDA
Marking rtbc!
Comment #13
Gábor HojtsySuperb, thanks all!