Posted by mgifford on March 26, 2009 at 1:40pm
text-indent: -9999em;
36% (4 votes)
position: absolute; top: -1000em;
0% (0 votes)
height:0px; overflow: hidden;
18% (2 votes)
position: absolute; left: -1000em;
45% (5 votes)
Total votes: 11
Comments
Not enough coffee
What is the best approach in CSS to hide content for sighted users but have it remain visible to screen readers?
Realized just now that I don't seem to have permission to delete or edit this poll which is odd.
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
it srsrly depends
I think it depends on context really. Number 1 and 4 are my preferred, but it depends on the content that needs to go off screen.
RTL is a concern, but also how do you divide the content?
Thanks. How would you categorize when you would want to use them?
Would you use text-indent: -9999em; for text and position: absolute; left: -1000em; for div's? Do we need 2 ways to shove content off screen?
Also, I really want to bring this into core, so it has to work for LTR & RTL, I've heard that there are design problems using left: -1000em when you're doing RTL. Think top:-1000em would be better for that reason alone. I don't think that text-indent: -9999em; would mess up RTL, but haven't tested it either.
I'd like to have height:0px; overflow: hidden; tested with a screen reader as that seems to be working. I've attached screenshots from Fangs, but that's not JAWS. I could only attach one of the two, so have both of them over on flickr with notes attached - http://www.flickr.com/photos/mgifford/tags/cssnone/
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Style #4...
Style #4 is the most practical and accessible approach.
Regarding style #1: " if a link or form element is given this style, it may result in a focus indicator (the dotted lines or 'marching ants' that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left)"
See http://webaim.org/techniques/css/invisiblecontent/
Mike
+1 to style 4 (off to the left)
It's the one I am most familiar with, and I am not aware of any problems it causes. I know that #2 (above the top) causes problems in tab order.
RTL Problems
I am pretty sure it will break RTL sites. So anything in arabic, hebrew, farsi, etc..
Think off top is going to be the most universal.
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Hmm... toggle possible?
Being neither a themer nor a programmer, I might be making a silly suggestion, but is it at all possible to have the direction of the offset changeable? In other words, as one enables the theme, could one choose "Left" for LTR languages and "Right" (which I assume works) for RTL languages?
LTR, RTL & BIDI
Yeah, sorry. Language acronyms.
Left to Right (LTR) - most western languages
Right to Left (RTL) - Arabic, Persian, Hebrew
BIDI - Bidirectional (sites that serve RTL & LTR content)
Right now this change is proposed in the CSS which isn't dynamic. So it has to support both if it's going to get core.
Related link:
http://sonspring.com/journal/accessible-display-none
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Link to where I was reminded about BIDI
Wanted to give a link back to nfreear's comment that reminded me of the bidirectional issues that might come up with an offscreen option way to the left - http://drupal.org/node/364219#comment-1378390
I also thought it was good to mention that although there are -rtl.css files for a lot of modules, including system.css, why use offscreen left if there isn't a good reason to do so.
Also, noted that I had assumed that doing this would produce a very minor difference between them:
$ diff system.css system-rtl.cssUnfortunately, I was wrong. In D7 they are pretty dramatically different. I guess that someone will clean this up before it is released, but..
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Clarification About RTL CSS
Just needed to point out the override rules for right-to-left languages here - http://drupal.org/node/302199
I do still think that the left/right is going to get nasty when using a left offscreen solution with the javascript (which I don't think has the same convention as CSS).
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
direction is more than a change of attribute
When one changes content to go from LTR to RTL, there has to be CSS changes made anyway, most of the time, maybe... :p
But seriously, just because you change the direction doesn't automatically change float:left to float:right.
Any examples of Drupal without display:none?
Occurs to me that there may not be any examples of sites that have used position: absolute; left: -1000em; I've got one using height:0px; overflow: hidden; that seems to be working for collapsed fields. However, I'd really like to see what other folks have come up with.
If someones got a diff I can apply to the D7 CVS that would be fine too, but it can take a bunch of mucking about to remove display:none;
So, are there any examples of Drupal sites out there where collapsed fields (and other elements) are not being managed by display:none that we could look at?
If anyone wants to see my sandbox, just send me a note.
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Blog Post
There is a good blog post about avoiding
display:noneand how #4 is the preferred alternative technique over at 456 Berea Street site.Mike
Mike
Used Examples vs Comparisons
Hi Mike,
The 456 article as I read it uses an offscreen left solution. However, it doesn't compare different solutions to hide the css.
off-top vs off-left
height 0 vs off-screen
text-indent seems to be an easy one to get rid of.
I would like to have someone else roll an off-left solution, particularly for collapsible menus. It's not an easy patch to create (least if you aren't a CSS expert).
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Don't think I'd provided these links
Just for clarification, the thoughts on height:0px; overflow: hidden;
Came from these discussions:
http://drupal.org/node/386462#comment-1306896
http://groups.drupal.org/node/18563#comment-67796
These hadn't been mentioned in this thread.
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Off-left vs off-top
When I worked at RNIB, our recommendation was to use position: absolute; left: -1000em; as the preferred way to move content out of the viewport but have it remain available to screen reader users.
It's my understanding that the position: absolute; top: -1000em; method is equally acceptable in most situations and preferable where the site might need to be bi-directional.
However, these techniques were always recommended on the condition that any content moved out of the viewport does not contain any links, as this causes serious problems for keyboard only users who can see just fine. Losing keyboard focus while tabbing through a page is seriously disorientating.
Ann
http://www.d7ux.org/accessibility/
http://www.pixeldiva.co.uk
Ann
http://www.d7ux.org/accessibility
http://www.pixeldiva.co.uk