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

By: Twitter Trackbacks for Just a Coder Â» Blog Archive Â» Why â€œleft: -9999px;â€ is Better For Accessibility Than â€œdisplay: none;â€ [nickfitz.co.uk] on Topsy.com

Wed, 06 Jan 2010 16:33:15 +0000

[...] Topsy Retweet Button var topsy_style = “small”; var topsy_order = “count,retweet,badge”; var topsy_url = “http://www.nickfitz.co.uk/2007/02/14/why-left-9999px-is-better-for-accessibility-than-display-none/”; Add Topsy Retweet Button to your Blog or Web Site. WordPress Web Sites [...]

By: Joe Taylor

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

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

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

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

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

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

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

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.