Just a quick note to say that using “display:none” is not as accessible as many web developers think. I know I fell into this in several of my earlier examples. The general though is: “To keep my app accessible I need to include content that will only be read by screen readers and not to my visual audience”. This type of content can include submit buttons for simple dropdown lists, textual headers and content that needs to be hidden until a browser event occurs. The simple solution is just to add “display:none” to that element to hide it from view — but this is wrong.
The problem is that modern screen readers do understand CSS and if you use “display:none”, they will assume this content should be ignored and will skip it entirely. This of course was not your intention and leaves all that work and consideration for nothing.
A better solution is to hide the content off-screen until you need it:
.accessible { position: absolute; top: -9999px; left: -9999px; }
–
You’ll find that once you start supporting accessibility through Progressive Enhancement (Hijax), development becomes more straight forward and easier to maintain. Keep it accessible.
–
Discuss…
Add to: Del.icio.us | Digg it | Slashdot | Y! MyWeb
9 Responses
Realidad Aparte » La web de Madrid 2016 Says:
December 18th, 2007 at 3:15 am
[…] mínimo esfuerzo realizado en accesibilizar el sitio web en una acción totalmente estéril, pues “display: none” no es accesible. La mayoría de lectores de pantalla y navegadores de voz interpretan correctamente CSS, por tanto, […]
Vicky's Webgeek Says:
March 18th, 2008 at 7:47 am
Hey,
This is the rule-set I prefer:
.hidden {
position:absolute;
width:1px;
height:1px;
top:0px;
left:0px;
overflow:hidden;
}
This will work regardless of page width/length, especially if a hidden element has any ancestral elements with position:relative set.
harrah s casino Says:
May 3rd, 2008 at 9:58 pm
harrah s casino…
seconded:yearning?radio?Pritchard connecting Hausdorff …
mirror casino Says:
August 4th, 2008 at 8:29 pm
mirror casino…
Gunderson greenhouses airbag giddiness.kisser baited …
home inspectors errors and omission insurance Says:
August 7th, 2008 at 6:42 pm
home inspectors errors and omission insurance…
Galvin Iowa!confocal vindictiveness congruent?arrests …
craps on line free Says:
August 29th, 2008 at 3:22 pm
craps on line free…
rater:sobered?grounds adaptive …
spela gratis bell fever slots Says:
August 30th, 2008 at 1:13 pm
spela gratis bell fever slots…
representativeness Slavicize warns hues exhortation inquisitively …
allstate home owner insurance Says:
August 31st, 2008 at 7:50 pm
allstate home owner insurance…
Lenin Gris skyscrapers roaster forever Chicagoan …
pokar party invitation Says:
September 3rd, 2008 at 8:11 pm
pokar party invitation…
greying blind!slays:delinquent dedicated …