web-dev-qa-db-ja.com

WAI-ARIAを使用してスクリーンリーダーにdivが表示されるようになったことを通知する方法

WAI-ARIAを使用しているスクリーンリーダーに、divが表示されたことをどのように通知しますか？

HTMLを取得した場合

<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>

そして私達は

$('#foo').hide();
$('#bar').show();

現在表示されているdivについてユーザーに通知する必要があることをスクリーンリーダーに通知するにはどうすればよいですか（または、表示されているdivに自動的にフォーカスすることもできます）。

javascripthtmlaccessibilityscreen-readerswai-aria
19
finnsson

通常、コンテンツが表示されるようになったことをスクリーンリーダーに伝える必要はありません。 aria-hiddenを使用しても実際には違いがないため、使用しないことをお勧めします。非表示のdivのテキストコンテンツをスクリーンリーダーでアナウンスする場合は、role=alertまたはaria-live=politeを使用できます（たとえば）。これは、コンテンツの場所に移動せずにスクリーンリーダーに聞いてもらいたい、更新されたコンテンツに使用します。たとえば、フォーカスを受け取らないが、ボタンを押すなどのアクションの後にユーザーに関連するテキスト情報を含むポップアップメッセージ。

update：ARIA 1.0を開発した人の一人と話し合ったところ、彼は代わりに HTML5 hidden を使用することを提案しましたコンテンツが非表示になっていることを意味的に示すaria-hiddenの。古いブラウザの場合は、CSS display:noneと組み合わせて使用​​します。 HTML5 hiddenをサポートするブラウザは、ユーザーエージェントスタイルシートのdisplay:noneを使用してHTML5を実装します。

34
Steve Faulkner

コンテンツにrole = "alert"のタグを付けると、アラートイベントが発生し、スクリーンリーダーが表示されたときに応答します。

<div id="content" role="alert">
...
</div>

$("#content").show();

これにより、＃contentが表示されたときにユーザーに警告が表示されます。

aria-hiddenは、スクリーンリーダーから隠したいものがあるが、目の見えるユーザーには見せたい場合に使用する必要があります。ただし、注意して使用してください。詳細については、こちらをご覧ください： http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

9
Rich Caloggero

使用 aria-hidden

要素とそのすべての子孫が、作成者によって実装されているように、どのユーザーにも表示または認識されないことを示します。関連するaria-disabledを参照してください。

要素が何らかのユーザーアクションの後にのみ表示される場合、作成者はaria-hidden属性をtrueに設定する必要があります。要素が提示された場合、作成者はaria-hidden属性をfalseに設定するか、要素が表示されていることを示す属性を削除する必要があります。一部の支援技術は、ブラウザでサポートされているプラ​​ットフォームのアクセシビリティを介さずに、DOMを介して直接WAI-ARIA情報にアクセスします。 作成者は、非表示にするメカニズムに関係なく、表示されないコンテンツにaria-hidden = "true"を設定する必要があります。これにより、支援技術またはユーザーエージェントは、ドキュメント内の非表示の要素を適切にスキップできます。

だからあなたのコードは

$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');
8
fcalderan

私は、role = "alert"を使用して、スクリーンリーダーユーザーがtextarea要素の文字数制限に近づいたときに通知する方法を示すサンプルを作成しました。alertロールの使用方法を理解しようとしている場合は、次のようになります。

それだけではありませんが、アラートを生成するコードのごく一部を次に示します。

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it's faster */
       newAlert.setAttribute("role", "alert");
       newAlert.setAttribute("id", "alert");
       newAlert.setAttribute("class","sr-only");
       var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left');
       newAlert.appendChild(msg);
       document.body.appendChild(newAlert);
     }

http://codepen.io/chris-hore/pen/emXovR

3
Chris Hore