| Good evening,
We are currently working on an issue in the Drupal community where we are trying to determine an appropriate method to provide a CSS class definition that when applied to an element will hide the element visually, but will allow the element to be visible to screen-readers.
Our current class definition is:
.element-invisible { height: 0; overflow: hidden; position: absolute; }
To the best of my knowledge this class performs as expected with all screen-readers tested, including VoiceOver on OS X Leopard. However, the class doesn't seem to work as expected with VoiceOver on Snow Leopard. When elements have this class applied VoiceOver on Snow Leopard will read the name of he element, and sometimes a relevant attribute, but not the text.
For example:
<code> <h1 class="element-invisible">This is a heading</h1> <a href="" class="element-invisible">This is a link</a> </code>
Will be read by VoiceOver / Safari 4.0.5 on Snow Leopard as:
Heading level 1, text Link, 'slash'
I am curious if the Apple community has a recommended best practice to visually hide web content, but to make that content available to screen-readers like VoiceOver?
|