20

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に自動的にフォーカスすることもできます）。

4

4 に答える 4

34

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

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

于 2012-04-27T13:38:55.793 に答える
10

コンテンツに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/

于 2012-10-04T19:02:55.013 に答える
9

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');
于 2012-04-27T11:47:17.223 に答える
3

私は、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

于 2015-04-08T01:14:36.930 に答える