Comments on: Why “left: -9999px;” is Better For Accessibility Than “display: none;”

by: Joe Taylor

Wed, 13 Feb 2008 15:18:49 +0000

Nick - thanks for taking the time to de-scramble the MSDN explanation so it makes sense to laymen like myself.

I’m personally fond of the empty span within the hyperlink or heading for image replacement.

The one benefit over moving things off-screen is the instance where the user has a qualified browser, but for some reason has images turned off. The hidden text remains in place.

No method is without its downfall on some level.

by: mcdave.net » links for 2007-12-31

Mon, 31 Dec 2007 06:19:09 +0000

[…] Just a Coder - nickfitz.co.uk » Blog Archive » Why “left: -9999px;” is Better For Accessibility Than “display: none;” (tags: accessibility css webdesign webdev display design hide article) […]

by: Hiding content for image replacement - stillbreathing.co.uk - website design and development

Sun, 24 Jun 2007 12:17:41 +0000

[…] One of the most valuable tools in a web designers arsenal is the ability to replace text with images, of course in a graceful way. That technique is exactly what makes the CSS Zen Garden layouts work. Thanks to NickFitz we now know the right way to do this (and why the wrong way may sometimes be right). Read his excellent article Why “left: -9999px;” is Better For Accessibility Than “display: none;”. […]

by: Wild Ted

Fri, 16 Feb 2007 22:11:50 +0000

One problem I have found with offscreen positioning is that form elements seem to choke on the technique in JAWS (v8). I have also tested in Window-Eyes (v6) which seems fine. I would be interested to know if anyone else has had a problem with this in other versions of JAWS or other screen readers.

by: boog linkblog - Accessibility: left: -9999px versus display:none

Fri, 16 Feb 2007 14:12:17 +0000

[…] Accessibility: left: -9999px versus display:none […]

by: Blake Haswell

Thu, 15 Feb 2007 22:28:25 +0000

Hey, thanks for going to the trouble of writing a post about this. Very informative. :-)

by: nickfitz

Thu, 15 Feb 2007 13:56:19 +0000

Cole: If I understand the Microsoft documentation correctly, it’s only the display and visibility properties that will result in the item being treated as invisible. There is a mention of checking for iframes being of zero height or width, but it seems that this is a special case that authors of assistive software deal with in whatever way they think best.

Therefore, it’s down to what screen reading software actually does; the documentation doesn’t seem to make any specific recommendation. If anybody has done any tests on this, perhaps they could be kind enough to post a link here.

by: Cole

Thu, 15 Feb 2007 12:22:12 +0000

I dont know if ive been doing it wrong, but i ofter use

height:0;
overflow:hidden;

it seems to work in most of my testing browsers…

Am i doing it wrong?

by: Jon Jackson

Thu, 15 Feb 2007 12:01:12 +0000

Thanks for this article. Most informative! I started off using display:none; wuite a bit when starting off in CSS but the left:-9999px; technique has recently become my preffered technique of hiding elements from view… and now i know WHY! :-) Keep up the good work my friend.

by: David King

Thu, 15 Feb 2007 11:15:24 +0000

I use the same technique for hiding input tags - if you leave it as display: none; then Safari will not send it when submitting the form!

Good read!