In the old days we used LAYER tags and Z-INDEX. Is this not a viable option for hiding text? Just create one div that is 100% high and wide and not transparent and then send your hidden objects behind it?
It could be that I totally missed the point of this article but when you hide stuff visually it should be hidden from screen readers too. The “Idea” presented here is to keep hidden stuff available to screen readers. THAT is ridiculous. Every modal window would always be in view for screen reader users. There would be no expand/collapse for accordion controls … That is just plain wrong.
The only use for positioning off-screen – is not to hide, but to place a message on the page that is intended for blind visitors and specifically not for visual users. For example there might be a section of the page that is visually obviously a log in section, but no heading text is available. You might position a heading “Log-in form” off screen so a blind user would find that section using headings navigation (the H key). Another nice example of using this technique is a skip link, positioned off screen for blind visitors, but which becomes visible when focused and basically hidden for mouse users. That is the case for the skip links on my site.
Copy & paste the code below to embed this comment.
Suzanne Taylor
This is also incorrect: “height: 0; width: 0; overflow: hidden; Element is collapsed and contents are hidden Content is ignored by screen readers”
I just double checked and it is read everywhere I tried: JAWS 11 with IE and FireFox, WindowEyes 7.5 with IE and FireFox and NVDA 2010.2 with IE and FireFox.
The main point that I take away from the article is that just because I cannot see something on the screen, it does not mean that a screen reader will also not see and thus read the content. When using a JavaScript library such as jQuery, you don’t always know what the animation is doing and it is possible that it will change in future releases. I was working on a page and animating the opacity of an object and later realized that the screen reader still had access to that content. I changed my code to use a callback function to apply a class that set the visibility to hidden after the animation was complete. This is the opposite of his example, but the principle is the same.
About MikeB’s commment. If the principle being advocated is the use of callback functions, then you have used that principle in a way that is effective for everybody. The author here suggests the use of that principle to explose for screen readers all hidden content – which, as I suggested above, is a disaster!
Excellent stuff! Thank you for sharing. I’m also seeing more and more mobile websites on smart phones (iphone and android) using these techniques which is important because of the small screen real-estate. Worth sharing is mobileInDesign, http://www.mobileInDesign.com which shows mobile website trends.
None of the projects I’ve ever worked on had enough budget and resources for working on accessibility. I don’t know if there is a better way to do this, or a kind of international force for implementing it. But whatever it is, I know that it’s budget which directs products, not us directing it. A good example is my own website, http://www.thoughtresults.com which can not be updated on a daily basis, just because I don’t make money enough to recruit for it. So, I suggest that we take accessibility as a lower priority concern.
Thank you for give me the chance to learn more about Hollaback scripts, but I have question:
‘(function(){
var $button = $(’#myButton’),
$text = $(’#myText’),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp(‘fast’);
} else {
$text.slideDown(‘fast’);
}
visible = ! visible;
});
})();’
how to change the size of the button?
The absolute positioning method is something I’ve never really thought of using before (to to hide content anyhow). In terms of accessibility I guess it is the best way of going about hiding things. However as some have already mentioned, I can’t help but feel it’s a little… hacky.
I’m quite surprised W3C haven’t considered adding a new display decoration to CSS3, that does what we all require – hides content, leaves no space, but is readable by screen readers.
Copy & paste the code below to embed this comment.
Detlev Fischer
Thanks for the article and the interesting discussion! Since the discussion somehow broke off after the strong statement by Jim Thatcher (“This is the wrong advice”) I have tried to revise and order the arguments in favour of both approaches (hiding or not hiding content for screen reader users) in a short article “Dealing with hidden content: what is best for screen reader users?”:http://www.bitvtest.eu/articles/article/lesen/hidden-content.html
I’d be glad to hear views especially of screen reader users (expert and not expert).
The author here suggests the use of that principle to explose for screen readers all hidden content — which, as I suggested above, is a disaster!
I’m sorry, but I disagree with you (at least partially) Jim. While it is true that you may want to hide some content from both sighted and non-sighted users, in most cases content that is hidden by default and meant to be exposed via JavaScript (as in a tabbed interface or accordion) is never exposed to screen readers because the default styles turn it off and (in some cases) those users are surfing with JavaScript turned off (because of its traditional accessibility issues).
There’s also the issue of alerting users to changes/updates in the content. ARIA provides mechanisms for this, but support is currently uneven at best.
All of that said, I do think it makes sense to hide unnecessary content with display:none in order to speed document traversal for keyboard users and screen readers as well as to limit potential confusion. I would group lightboxes, modal dialogs, tooltips, etc. in this category. This assumes, of course, their function is not required in order to actually use the page/site. If you are using a modal login box, I’d recommend a link to a login page somewhere prominent.
If jQuery has non-accessible code, why not fix jQuery so that it produces accessible content by default? After all, it’s open source.
It’s a noble idea, for sure, but one fix may not be best for everyone. Also, techniques change. I think it’s fine to have a certain default in jQuery and then to override it with a class-based hiding mechanism that you control and can update as you deem necessary.
Thank you for give me the chance to learn more about Hollaback scripts, but I have question: how to change the size of the button?
CSS.
Thanks for the article and the interesting discussion! Since the discussion somehow broke off after the strong statement by Jim Thatcher (“This is the wrong advice”) I have tried to revise and order the arguments in favour of both approaches (hiding or not hiding content for screen reader users) in a short article Dealing with hidden content: what is best for screen reader users?
I’d be glad to hear views especially of screen reader users (expert and not expert).
First off Rovo makes a good point, I think the truth is that placing things off screen versus a proper solution is a shortcoming of the readers themselves, this needs to be improved all around, if screen readers want to avoid elements styled with “display: none;” I think this is the perfect scenario for them to avoid the content. However, “visibility: hidden;” seems like the perfect method for us, and it should be the way the screen readers work, this is by far the cleanest most meaningful, logical implementation for hidden text thats screen readable.
To recap: no, neither of the methods mentioned above work, but “in a perfect world” screen readers would support them.
Beyond screen readers, I wonder about search engines as well, can they crawl via “display: none” or “visiblity: hidden”? Becomes a much more usable scenario.
But I digress, before my long post my original point was to post updated code for a method to do this that removes the inline style created by a framework like jQuery (in my example jQuery was used.)
thats needed to remove the inline style, but be careful where you do it, if you’re animating anything this will need to be done in a certain order to avoid glitches
38 Reader Comments
Back to the ArticleCasa Jarm
In the old days we used LAYER tags and Z-INDEX. Is this not a viable option for hiding text? Just create one div that is 100% high and wide and not transparent and then send your hidden objects behind it?
michaelwhyte
For nav menus that use images as links I have been using the following method to hide the link text…but hopefully keep it readable by screen readers…
a {
background-image: path to image
width: bg-image width
height: bg-image height
text-indent: -9999px;
overflow: hidden
}
Acording to this article it would seem that the text would still be readable by screen readers…
http://www.abilitynet.org.uk/webarticle67
Any responses are greatly appreciated…
espressive
Hey Aaron,
Great article. I decided to take a stab at changing the jQuery hide() function to use this technique to hide elements as apposed to display:none.
I got it working it seems ;) Have a look over here: http://goo.gl/2nIHQ
Thoughts?
Jim Thatcher
It could be that I totally missed the point of this article but when you hide stuff visually it should be hidden from screen readers too. The “Idea” presented here is to keep hidden stuff available to screen readers. THAT is ridiculous. Every modal window would always be in view for screen reader users. There would be no expand/collapse for accordion controls … That is just plain wrong.
The only use for positioning off-screen – is not to hide, but to place a message on the page that is intended for blind visitors and specifically not for visual users. For example there might be a section of the page that is visually obviously a log in section, but no heading text is available. You might position a heading “Log-in form” off screen so a blind user would find that section using headings navigation (the H key). Another nice example of using this technique is a skip link, positioned off screen for blind visitors, but which becomes visible when focused and basically hidden for mouse users. That is the case for the skip links on my site.
Suzanne Taylor
This is also incorrect: “height: 0; width: 0; overflow: hidden; Element is collapsed and contents are hidden Content is ignored by screen readers”
I just double checked and it is read everywhere I tried: JAWS 11 with IE and FireFox, WindowEyes 7.5 with IE and FireFox and NVDA 2010.2 with IE and FireFox.
Nathan Davies
This is an interesting article that has clarified a few points. I’ll be sure to use the tips next time.
MikeB
The main point that I take away from the article is that just because I cannot see something on the screen, it does not mean that a screen reader will also not see and thus read the content. When using a JavaScript library such as jQuery, you don’t always know what the animation is doing and it is possible that it will change in future releases. I was working on a page and animating the opacity of an object and later realized that the screen reader still had access to that content. I changed my code to use a callback function to apply a class that set the visibility to hidden after the animation was complete. This is the opposite of his example, but the principle is the same.
Jim Thatcher
About MikeB’s commment. If the principle being advocated is the use of callback functions, then you have used that principle in a way that is effective for everybody. The author here suggests the use of that principle to explose for screen readers all hidden content – which, as I suggested above, is a disaster!
Charles Belov SFMTA
If jQuery has non-accessible code, why not fix jQuery so that it produces accessible content by default? After all, it’s open source.
mieuxdessei
Excellent stuff! Thank you for sharing. I’m also seeing more and more mobile websites on smart phones (iphone and android) using these techniques which is important because of the small screen real-estate. Worth sharing is mobileInDesign, http://www.mobileInDesign.com which shows mobile website trends.
saeedneamati
None of the projects I’ve ever worked on had enough budget and resources for working on accessibility. I don’t know if there is a better way to do this, or a kind of international force for implementing it. But whatever it is, I know that it’s budget which directs products, not us directing it. A good example is my own website, http://www.thoughtresults.com which can not be updated on a daily basis, just because I don’t make money enough to recruit for it. So, I suggest that we take accessibility as a lower priority concern.
cocopark2012
Thank you for give me the chance to learn more about Hollaback scripts, but I have question:
‘(function(){
var $button = $(’#myButton’),
$text = $(’#myText’),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp(‘fast’);
} else {
$text.slideDown(‘fast’);
}
visible = ! visible;
});
})();’
how to change the size of the button?
JackS11
Nice article.
The absolute positioning method is something I’ve never really thought of using before (to to hide content anyhow). In terms of accessibility I guess it is the best way of going about hiding things. However as some have already mentioned, I can’t help but feel it’s a little… hacky.
I’m quite surprised W3C haven’t considered adding a new display decoration to CSS3, that does what we all require – hides content, leaves no space, but is readable by screen readers.
PHP Programmer
Your information or instructions are really useful. I think your job is perfect.
Detlev Fischer
Thanks for the article and the interesting discussion! Since the discussion somehow broke off after the strong statement by Jim Thatcher (“This is the wrong advice”) I have tried to revise and order the arguments in favour of both approaches (hiding or not hiding content for screen reader users) in a short article “Dealing with hidden content: what is best for screen reader users?”:http://www.bitvtest.eu/articles/article/lesen/hidden-content.html
I’d be glad to hear views especially of screen reader users (expert and not expert).
Aaron Gustafson
I’m sorry, but I disagree with you (at least partially) Jim. While it is true that you may want to hide some content from both sighted and non-sighted users, in most cases content that is hidden by default and meant to be exposed via JavaScript (as in a tabbed interface or accordion) is never exposed to screen readers because the default styles turn it off and (in some cases) those users are surfing with JavaScript turned off (because of its traditional accessibility issues).
There’s also the issue of alerting users to changes/updates in the content. ARIA provides mechanisms for this, but support is currently uneven at best.
All of that said, I do think it makes sense to hide unnecessary content with display:none in order to speed document traversal for keyboard users and screen readers as well as to limit potential confusion. I would group lightboxes, modal dialogs, tooltips, etc. in this category. This assumes, of course, their function is not required in order to actually use the page/site. If you are using a modal login box, I’d recommend a link to a login page somewhere prominent.
It’s a noble idea, for sure, but one fix may not be best for everyone. Also, techniques change. I think it’s fine to have a certain default in jQuery and then to override it with a
class-based hiding mechanism that you control and can update as you deem necessary.CSS.
Reading it now.
GnarMedia
First off Rovo makes a good point, I think the truth is that placing things off screen versus a proper solution is a shortcoming of the readers themselves, this needs to be improved all around, if screen readers want to avoid elements styled with “display: none;” I think this is the perfect scenario for them to avoid the content. However, “visibility: hidden;” seems like the perfect method for us, and it should be the way the screen readers work, this is by far the cleanest most meaningful, logical implementation for hidden text thats screen readable.
To recap: no, neither of the methods mentioned above work, but “in a perfect world” screen readers would support them.
Beyond screen readers, I wonder about search engines as well, can they crawl via “display: none” or “visiblity: hidden”? Becomes a much more usable scenario.
But I digress, before my long post my original point was to post updated code for a method to do this that removes the inline style created by a framework like jQuery (in my example jQuery was used.)
here is my solution:
$navMenu = $(’#mastHead .menu’);
$navButton = $navMenu.find(‘dt’);
$navDropDown = $navMenu.find(‘dd’);
$navMenu.click(function () {
$(this).toggleClass(‘active’);
// cannot be toggle, too complex of an ordering is required
if ($navMenu.hasClass(‘active’)) {
$navMenu.addClass(‘down’);
$navDropDown.fadeIn(200, function() {
$navDropDown
.addClass(‘show’)
.attr(“style”, “”);
});
} else {
$navDropDown.fadeOut(200, function() {
$navDropDown
.removeClass(‘show’)
.attr(“style”, “”);
$navMenu.removeClass(‘down’);
});
}
});
GnarMedia
ok, here is more or less the meat of the post:
.attr(“style”, “”);
thats needed to remove the inline style, but be careful where you do it, if you’re animating anything this will need to be done in a certain order to avoid glitches