Hidding text with css?

[Samuël van Laere]

Dear all,

I wonder if it is possible to hide text onscreen, while still allowing
screenreaders to read the text.
I've tried both display: none and visibility: hidden but in both cases Jaws
couldn't read the text.

Any thoughts on this?

Just in case one like to know what text i like to hide onscreen but not in
screenreaders:
End of page

Thanks in advance,
Samuël van Laere
the Netherlands

 

[Mark Parnell]

I wonder if it is possible to hide text onscreen, while still allowing
screenreaders to read the text.

@media screen { .foo {display:none;} }

Just in case one like to know what text i like to hide onscreen but not in
screenreaders:
End of page

Surely a screen reader is capable of working out where the page ends?

 

[Spartanicus]

@media screen { .foo {display:none;} }

Screen readers typically render what is shown on screen. Positioning the
element off screen is the way to do this.

Surely a screen reader is capable of working out where the page ends?

Indeed.

 

[Mark Parnell]

Screen readers typically render what is shown on screen.

Ah. Because they just sit on top of another browser (e.g. IE), and use
its rendering engine. Are there any "true" aural browsers (i.e. with
their own rendering engine)?

I have to admit, I have a fairly limited understanding of aural
browsers. I guess I was being a bit too idealistic.

 

[Spartanicus]

Are there any "true" aural browsers (i.e. with
their own rendering engine)?

Afaik http://emacspeak.sourceforge.net/ is so far the only to support
aural css. I don't know anything about it's rendering engine.

 

[Deryck]

Dear all,

I wonder if it is possible to hide text onscreen, while still allowing
screenreaders to read the text.
I've tried both display: none and visibility: hidden but in both cases
Jaws
couldn't read the text.

Any thoughts on this?

Is this what you are looking for?....
..hidden
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
} <div class="hidden">This text is hidden.</div>The text is out of the
viewable area but still gets read by a screen reader. I'm not sure whether
your definition of screen is the same as the viewable area or not.The above
was taken from http://www.webaim.org/techniques/articles/hiddentextHTHDeryck

 

[Samuël van Laere]

Thanks for the input all,
I'll go with Bohman's method described here:
http://www.webaim.org/techniques/articles/hiddentext
thanks for the URI Deryck


Regards,
Samuël van Laere
the Netherlands

 

[Jukka K. Korpela]

<div class="hidden">This text is hidden.</div>The text is out of the
viewable area but still gets read by a screen reader.

But, of course, it is in no way hidden to any browser that has CSS
support disabled, or has no CSS support. This includes search engines.

 

[Michael Fesser]

.oO(Mark Parnell)

@media screen { .foo {display:none;} }

ScreenreaderVisibility
http://css-discuss.incutio.com/?page=ScreenreaderVisibility

Micha