24

目の見えるユーザーと視覚障害のあるユーザーの両方がアクセスできるようにする必要があるページに取り組んでいます。コンテンツの一部の要素は、視覚要素のみに関連するという性質上、スクリーン リーダーを使用しているユーザーには当てはまりません。たとえば、リンクをクリックするとオーディオビジュアル プレゼンテーションが新しいウィンドウで開きますが、私の手に負えない状況により、ウィンドウのサイズが不自然に変更され、すべてがよく見えるようにウィンドウのサイズを変更する必要があるというメッセージが表示されます。明らかに、これはとにかくそれを見ることができない人にとっては役に立たない情報です。

スクリーン リーダーに一部のコンテンツを無視させる方法はありますか?

4

5 に答える 5

36

実際、これを行う正しい方法は ARIA を使用することrole=hiddenです。このような：

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

これにより、> 文字が非表示になるため、スクリーン リーダーは「直角かっこ」を読み上げず、代わりに「Go!」を読み上げます。> .hide クラスのコンテンツを視覚的に非表示にした場合にのみ、目が見えるユーザーには > が表示されます。このような：

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

ARIA ロールpresentationは、セマンティックな意味を「正規化」するためのものです。たとえば、<table>withrole="presentation"はテーブル コンテンツとして読み取られず、単なるプレーン テキストになります。

画像を読み上げたくない場合は、次のaltように空のテキストを入力できます。

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

..または、 and を<svg>省略した場合<title><description>

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

いくつかのまれな状況で、一部のスクリーンリーダーがまだ空の代替画像を読み取っていることに気付いたので、aria-hidden="true"ここでも使用できます。

CSS の speak プロパティは現時点ではサポートされておらず、リンク属性 media="aural" についても同様です。

于 2014-02-10T09:56:20.040 に答える
28

質問を書いている途中で、どこを見るべきかを思い出しました。

CSSはこれを行うことができます：

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

.dontRead {
    speak: none;
}
于 2009-03-23T03:38:44.717 に答える
6

これを確認してください

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

role="presentation"およびtabindex="-1"により、スクリーン リーダーは上記のタグを無視します。

私はie8とfirefox 3.5でこれをチェックしました.JAWSスクリーンリーダーで動作しています.

于 2011-10-10T11:01:47.433 に答える
2

CSS にはこれらの聴覚特性がありますが、どこにも実装されていないため、まったく役に立ちません。

于 2009-06-04T14:10:22.753 に答える
1

支援技術のユーザーから特定の情報を隠すことの問題点は、ユーザーがソフトウェアを暗い部屋で単独で使用していると想定していることですが、これは安全な想定ではありません。支援技術の多くのユーザーは、他のユーザー (この情報が関係するユーザー) と密接に協力しており、非常に幸運なユーザーの中には、アシスタントを持っている人もいます。代わりに、何らかの方法でドキュメントの後半に配置することで、このコンテンツを強調しないか、優先度を低くすることが賢明です。

于 2011-10-11T21:24:40.057 に答える