21 Old School Hiding Content

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?

posted at 06:37 pm on May 6, 2011 by Casa Jarm

22 What about text-indent combined with overflow hidd

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…

posted at 04:29 pm on May 8, 2011 by michaelwhyte

23 Implementing this in jQuery

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?

posted at 05:06 pm on May 8, 2011 by espressive

24 This is the wrong advice

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.

posted at 08:06 pm on May 8, 2011 by Jim Thatcher

25 Width 0 Height 0 Overflow Hidden is Read in Screen

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.

posted at 03:36 pm on May 9, 2011 by Suzanne Taylor

26 Thanks for the pointers

This is an interesting article that has clarified a few points. I’ll be sure to use the tips next time.

posted at 05:22 am on May 11, 2011 by Nathan Davies

27 Re: This is the Wrong Advice

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.

posted at 01:29 pm on May 11, 2011 by MikeB

28 Re; Re: This is the worng advice

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!

posted at 05:48 pm on May 11, 2011 by Jim Thatcher

29 Why not fix jQuery?

If jQuery has non-accessible code, why not fix jQuery so that it produces accessible content by default? After all, it’s open source.

posted at 08:34 pm on May 13, 2011 by Charles Belov SFMTA

30 Well Done!!

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.

posted at 12:54 pm on May 19, 2011 by mieuxdessei