Problem/Motivation
In Drupal 8 some content is being visually hidden (and exposed to screen reader users) using the "visually-hidden" class, which is styled as follows in system.module.css:
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
overflow: hidden;
height: 1px;
width: 1px;
}
This works as intended, with one exception: width: 1px
causes major problems in Firefox if the hidden content inherits word-wrap:break-word
. With this combination of properties, Firefox seems to eliminate all spaces from text before exposing the content to assistive technologies. Screen readers attempt to read the content without spaces which sounds like gobbledy-gook.
This problem has been observed in Firefox 22 using JAWS 14, Window-Eyes 7.5, NVDA 2013.1.1.
Here's a test page:
http://terrillthompson.com/tests/clip.html
This is not a problem in Internet Explorer 10 or Chrome 28.
Proposed resolution
Remove width: 1px from the style definition for .visually-hidden.
In Drupal 7, there was a similar class "element-invisible" defined in system.base.css which did not include a width
property. Otherwise Drupal 7's "element-invisible" class was identical to Drupal 8's "visually-hidden" class. The symptoms of this problem have not been observed in Drupal 7.
Comment | File | Size | Author |
---|---|---|---|
#15 | Screen Shot 2013-07-21 at 9.15.56 PM.png | 170.39 KB | mparker17 |
#13 | drupal8-FirefoxScreenreader-2045151-13.patch | 368 bytes | bowersox |
#1 | fix_visually-hidden_css.patch | 381 bytes | falcon03 |
Comments
Comment #1
falcon03 CreditAttribution: falcon03 commented@terrill: thanks for posting (and, most of all, uncovering) this issue. Here's a patch to remove the width property usage from the visually-hidden CSS class. Can you test this patch and confirm that it solves the issue?
At this point, I'm wondering whether it would make sense or not to remove the "height" property usage as well...
Also, let's make sure that this patch does not change anything for sighted users (when "visually-hidden" content is shown in the page), which is something that I can't do (I'm blind ! :D).
Comment #2
echoz CreditAttribution: echoz commentedSorry, I don't currently have a fix for this screen reader issue, but the width: 1px; part of .visually-hidden is needed for .visually-hidden on an element near the right edge of the viewport (for example, the span inside Bartik's Read more link) causes a horizontal scrollbar in webkit. On an iPhone, you don't see the scrollbar, you see the overflow as if scrolled to the right, showing a space on the right.
This part of .visually-hidden (formerly named .element-invisible) is is built from http://snook.ca/archives/html_and_css/hiding-content-for-accessibility.
The width: 1px; had been added, lost and re-added, most recently in #1973456: .element-invisible on element at right causes horizontal scrollbar on desktop or right gap on phone on webkit browsers. See comments #18 and #22 for explanations.
Comment #3
bowersox CreditAttribution: bowersox commentedInstead, can we solve this bug by applying a "word-wrap: normal" style into .visually-hidden?
@terrill, can you check whether that might work?
Comment #4
jessebeach CreditAttribution: jessebeach commentedComment #5
mparker17Assigning to myself.
Comment #6
mgiffordThanks for finding this problem. We should be able to fix it for D8.
There were some other proposed changes to this in http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
Fascinating to see this issue evolve #58941: 'display: none' causes problems for screenreaders
Comment #7
mparker17Steps to test:
Comment #8
echoz CreditAttribution: echoz commented#7, why ask to test patch from #1 when info in comment #2 explains that removing width: 1px; will cause breakage in another circumstance?
Comment #9
mparker17I've confirmed that @falcon03's patch from #1 fixes the problem with JAWS+Firefox. And, it does not appear to cause a horizontal scrollbar in Safari 6.0.5, Safari on iOS 6.1, or Chrome 28.
As suggested by @bowersox, I tried restoring the
width: 1px;
and adding the styleword-wrap: normal;
. This also appeared to fix the JAWS+Firefox problem, and it didn't cause any problems in any of the aforementioned browsers either.Thoughts?
Comment #10
bowersox CreditAttribution: bowersox commented@mparker, I think the next step is to roll a patch for that second approach, restoring the
width: 1px
and adding theword-wrap: normal
.Comment #11
echoz CreditAttribution: echoz commentedGreat on #10 suggestion, and that word-wrap: normal; resolves problem!
The horizontal scrollbar bug only appears when an element with this class is near the right edge of the viewport (and width: 1px; is omitted). You can see this in Bartik by creating content that has a read more link.
Comment #12
echoz CreditAttribution: echoz commentedComment #13
bowersox CreditAttribution: bowersox commentedHere's a patch with this
word-wrap: normal
approach.This needs testing in Firefox with JAWS and other screenreaders.
@terrill or @falcon03, can you check in screenreaders?
Comment #14
bowersox CreditAttribution: bowersox commentedComment #15
mparker17I can verify that the patch in #13 fixes the problem in JAWS+Firefox.
However, when I follow @echoz's suggestion in #11, I do see a funky margin in iOS 6.1. See attached screenshot.
Sorry :(
Comment #16
echoz CreditAttribution: echoz commented@ mparker17 is there a misunderstanding?
There is no problem I can see if the only fix in the patch is word-wrap: normal; and does NOT delete any other css (like width: 1px;).
Why are you giving the patch in #13 a status of needs work, after saying it fixes the problem in JAWS+Firefox?
Adding word-wrap: normal; is the only change in patch #13. Why "needs work"?
Comment #17
mparker17Sorry @echoz, I should have been more clear: I marked the patch as "needs work" because, when I tested the patch from #13, I saw a large border on the right side of the screen in iOS 6, as shown in the screenshot attached to #15.
However, while writing this reply, I decided to try to test again, and discovered that the broken margin was actually due to simplytest.me assigning a really long default site name, which pushed out past the edge of the page. When I shortened this string, the page worked correctly.
Therefore, I am marking the patch from #13 as RTBC.
Comment #18
alexpottCommitted 5b847ea and pushed to 8.x. Thanks!
Comment #20
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedCreating a tag to gather up old information about our approach to the
.visually-hidden
CSS class. We may need to modernize this, so this tag is to help me review the history.