html - 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

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".