2

状況

JavaScript を介して表示および非表示にできる画面領域があります (「高度な検索オプションの表示/非表示」など)。この領域内には、フォーム要素 (選択、チェックボックスなど) があります。スクリーン リーダー (この場合は JAWS) などの支援技術を使用するユーザーの場合、これらのフォーム要素をラベルでリンクするか、「タイトル」属性を使用して各要素の目的を説明する必要があります。ラベルに十分なスペースがないため、title 属性を使用しています。表示されるツールチップは、スクリーン リーダーを使用しないユーザーにとって便利です。

コードは次のようになります。

<div id="placeholder" style="display:none;">
  <select title="Month">
    <option>January</option>
    <option>February</option>
    ...
  </select>
</div>

問題

通常、JAWS は非表示の要素を読み取りません。なぜなら、それらは非表示であり、それを認識しているからです。ただし、要素にタイトルが設定されているかのように、JAWS は何があってもそれを読み取ります。タイトルを削除すると、JAWS は何も読み取りませんが、明らかにこれはアクセスできないマークアップです。

可能な解決策

私が最初に考えたのは、次のように、タイトルの代わりに隠しラベルを使用することでした。

<div id="placeholder" style="display:none;">
  <label for="month" style="display:none">Month</label>
  <select id="month">...</select>
</div>

これにより、まったく同じ動作が発生し、スクリーン リーダー以外のユーザー向けのツール ヒントが失われます。また、2 倍の Html を生成することになります。

2 番目のオプションは、引き続きラベルを使用し、画面の外に配置することです。そうすれば、スクリーン リーダーによって読み取られますが、ビジュアル ユーザーには表示されません。

<div id="placeholder" style="display:none;">
  <label for="month" style="position:absolute;left:-5000px:width:1px;">Month</label>
  <select id="month">...</select>
</div>

これは実際には機能しますが、ここでもツール ヒントが失われ、追加の Html が生成されます。

3 番目に考えられる解決策は、JavaScript で DOM を再帰的に移動し、領域が非表示のときにタイトルを削除し、領域が表示されたときにタイトルを追加することです。これも機能します...しかし、明らかな理由でかなり醜く、より一般的なケースにうまく対応できません。

他のアイデアはありますか？JAWS がこのように動作するのはなぜですか?

4

3 に答える 3

2

項目に aria-hidden="true" 属性を与えると、スクリーンリーダーから非表示になります。

于 2015-04-22T23:59:12.953 に答える
1

これは明らかに JAWS のバグのように見えます。仕様では、display:none によって要素とその子がどのメディアにも表示されないようにする必要があると明確に述べられているからです。

しかし、speak: aural プロパティをいじってみると役に立つかもしれません。JAWS が利用できないのでわかりません。

http://www.w3.org/TR/CSS2/aural.html#speaking-props

于 2008-10-29T00:53:17.953 に答える