tags:

views:

66

answers:

5

I want to hide text which is in <span> . but why it's not working?

.pdf {text-indent: -9999}

<p>
   <a href="reader_overview.pdf" title="Open in a new Window" target="_blank"><img src="pdf.gif" alt="PDF" width="16" height="16" />
   <span class="pdf">PDF 34KB, Opens in a new window</span> </a>
</p>
+4  A: 

I thought hiding with CSS worked like this:

.pdf {
  display: none;
}
Tomalak
but Display:none is skipped by screen reader i want to just hide this text from sighted user but it should be read by screen readers
metal-gear-solid
You can have separate CSS for screen, print and screen reader media types. Check out the @media keyword: http://www.w3.org/TR/CSS2/media.html
Tomalak
"screen reader media type" is really a different media for scree reader available?
metal-gear-solid
Wrong. You can have separate stylesheets for "screen" and "aural" but **screen** readers are impacted by screen stylesheets.
David Dorward
@David: Sure? I would expect them to be affected by @speech or @aural (you know, because they are screen **readers**).
Tomalak
@Tomalack — Good ones respect aural stylesheets as well (at least for things like tone), but `display: none` for the screen still hides the content.
David Dorward
+8  A: 

Use .pdf {display: none}

Andreas Bonini
+2  A: 

text-align

Applies to: block-level elements, table cells and inline blocks

http://www.w3.org/TR/CSS2/text.html

Span is, by default, inline.

The value it takes is also a length and so requires units if the value is non-zero.

There seems little point in including the information in the document if you are going to hide it though. I assume you are trying to provide information to screen reader users instead of all users … but that information is as useful to people not using screen readers.

David Dorward
"and inline blocks" doesn't cover this?
GalacticCowboy
No, it doesn't. `display: inline` is not the same as `display: inline-block`. By default spans are inline and not in the least bit block like.
David Dorward
@David Dorward - You are right but sigted user i will put `title="...."`
metal-gear-solid
Screen readers are capable of reading title attributes.
David Dorward
yes but not by default. it reads only if user allowed using change in scren reader settings
metal-gear-solid
And visual mouse users only see them if they point at the link for a while, meanwhile people using a keyboard, breath switch or other non-pointing device with a normal visual display don't get to see the information at all.
David Dorward
As a rule of thumb — if you start trying to target information at different devices, you are doomed to failure.
David Dorward
you are right. but for sighted keyboard user they can get clue from icon. i want to do this for this type of design http://stackoverflow.com/questions/2525076/what-is-preferred-accessible-and-semantically-correct-method-to-code-this-type-of
metal-gear-solid
Why can't screen reader users get a clue from the icon? It has alt text.
David Dorward
"if you start trying to target information at different devices, you are doomed to failure" explain this"
metal-gear-solid
@David - Alt text is "PDF" only because it's a CMS and i'm using one images for icon and only can add alt to that images
metal-gear-solid
@David - Do you think then `title` is enough in this condition? is there any other better solution?
metal-gear-solid
I'd get rid of the title attribute, get rid of the textual file type or set the alt attribute on the image to a blank string, leave the file size visible (its useful to *everyone*!), get rid of the target attribute, and set a content-disposition attachment header on the downloads so they trigger "Open or Save" instead of using an obnoxious browser plugin that could have people closing a window with their history in it by mistake.
David Dorward
you mean like this `<p> <a href="reader_overview.pdf"><img src="pdf.gif" alt="" width="16" height="16" /> 34KB, Opens in a new window</a></p>` but then how screen reader user will know this is the PDF?
metal-gear-solid
`<a href="reader_overview.pdf"><img src="pdf.gif" alt="" width="16" height="16" /> PDF</a> (34KB)`
David Dorward
but in this method PDF Icon and text "PDF" bot would be used. which is for for same thing
metal-gear-solid
Then `<a href="reader_overview.pdf"><img src="pdf.gif" alt="PDF" width="16" height="16" /></a> (34KB)` (but there is something to be said for using icons as a visual cue for people who can skim and recognize them and text to describe what it actually means for those who cannot)
David Dorward
A: 

If you want to hide it, use the CSS that is intended for that purpose:

.pdf { visibility: hidden; display: none; }
GalacticCowboy
A: 

try this

.pdf {display: block; height: 40px; line-height: 200px;}
pixeltocode