Is there a way to write content that screen readers will ignore?

Question

I've just been working on a page which needs to be accessible to both sighted and visually impaired users. Some elements of the content, just by the nature of relating only to visual elements, simply do not apply to people using screen readers. For example, a link opens an audio-visual presentation in a new window, but due to circumstances beyond my control, the window is awkwardly resized, so there's a message saying that you should resize the window so you can see everything better. Obviously this is useless information to someone who can't see it anyway.

Is there an accepted way to make screen readers ignore some content?

Answer 1

Halfway through writing the question I remembered where to look.

CSS can do this:

<span class="dontRead">Screen readers shouldn't read this</span>

.dontRead {
    speak: none;
}

Answer 2

Actually the correct way of doing this is by using the ARIA role=hidden. Like this:

<button type="button">
  <span aria-hidden="true" class="icon">&gt;</span>
  <span class="hide">Go!</span>
</button>

By doing this you hide the > character so screen-readers won't read "right angle bracket", and instead read "Go!". Sighted users will only see > if you hide the content in the .hide class visually. Like this:

.hide{
  position: absolute;
  left:-999em;
}

The ARIA role presentation is for "normalizing" semantic meaning, like for example a <table> with role="presentation" won't be read as table content and will be just plain text.

If you want an image not to be read you can put in empty alt text like this:

<img src="decorative-flower.jpg" alt=""/>

..or if it's an <svg> omit the <title> and <description>

<svg>
  <!-- <title>Remove this line</title> -->
  <!-- <description> Remove this too..</description> -->
</svg>

I have noticed in some rare situations some screen-readers have still read the empty alt images, so you could use aria-hidden="true" here as well.

CSS' speak property is not supported at this point, and the same goes for the link attribute media="aural".

Answer 3

check for this

<h1 role="presentation" tabindex="-1">Some text that screen readers will ignore </h1>

because of role="presentation" and tabindex="-1" screen reader will ignore above tag.

i checked this on ie8 and firefox 3.5 it is working with JAWS screen reader.

Answer 4

CSS has those aural properties, but as they aren't implemented anywhere they are completely useless.

Answer 5

The issue with hiding specific pieces of information from users of assistive technologies is that it assumes they are using your software alone in some dark room, which simply not a safe assumption. Many users of assistive technology collaborate closely with other users (to whom this information would be relevant), and a few very fortunate ones even have assistants. You would be wise to de-emphasize or under-prioritize this content for them instead by placing it later in the document somehow.