Is there a way to write content that screen reader

2019-01-17 07:28发布

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?

5条回答
Juvenile、少年°
2楼-- · 2019-01-17 07:47

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

查看更多
太酷不给撩
3楼-- · 2019-01-17 07:48

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

查看更多
Fickle 薄情
4楼-- · 2019-01-17 07:58

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.

查看更多
够拽才男人
5楼-- · 2019-01-17 07:59

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.

查看更多
相关推荐>>
6楼-- · 2019-01-17 08:03

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;
}
查看更多
登录 后发表回答