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?
Actually the correct way of doing this is by using the ARIA
role=hidden
. Like this: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:
The ARIA role
presentation
is for "normalizing" semantic meaning, like for example a<table>
withrole="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:..or if it's an
<svg>
omit the<title>
and<description>
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".
CSS has those aural properties, but as they aren't implemented anywhere they are completely useless.
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.
check for this
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.
Halfway through writing the question I remembered where to look.
CSS can do this: