web-dev-qa-db-ja.com

スクリーンリーダーで読み取りを停止し、さまざまなコンテンツを読み取る方法

JQueryを使用してモーダルポップアップを表示するサイトを作成しました。基本的に、画面の表示可能領域全体をオーバーレイでカバーし、オーバーレイの上に実際のポップアップを含むDIVを表示します。このプロジェクトの要件の1つは、アクセシビリティに関係しています。

ページが読み込まれると、スクリーンリーダーはページの上部から読み始めます。ユーザーが特定のリンクをクリックすると、モーダルダイアログが表示されます。私の質問は、スクリーンリーダーによるサイトの主要部分の読み取りを中断し、ダイアログテキストの読み取りを開始するように指示するにはどうすればよいですか？

私のモーダルコンテナは次のようなdivにラップされています：

<div id="modalcontainer"  tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" >

モーダルを起動するjQueryは次のようになります。

$("#modalLink").click(function (e) {
    e.preventDefault();

    $("#modalcontainer").center();
    $("#modalcontainer").show();
    $("#closeBtnLink").focus();
    $("#wrapper").attr('aria-disabled', 'true');
});

「closeBtnLink」は、モーダルダイアログ内の閉じるボタンです。これに焦点を合わせると、スクリーンリーダーがその要素から読み始めるように指示されると思いました。

「ラッパー」要素は、モーダルダイアログの兄弟です。別のSOユーザーからのさまざまな理由による提案により、ページ全体を含むラッパー要素に「aria-disabled = true」を設定しました。モーダルダイアログは、このコンテナーの外部に兄弟として存在します。 。

ここでの私の主な目標は、スクリーンリーダーが特定のリンクをクリックしたときに、モーダルDIV要素のコンテンツを読み取れるようにすることです。どんな助けでもいただければ幸いです。

javascriptjqueryhtmlaccessibilityscreen-readers
22
Scott

スクリーンリーダーが読みやすいようにページのコンテンツを表示するのは、開発者としてのあなたの責任です。

から http://www.anysurfer.be/en/index.html ：

  • 適切なHTMLタグを使用して、ドキュメントを構造化します。そうすることにより、支援技術は、見出し、段落、リスト、および表を、わかりやすい方法で点字またはスピーチに翻訳することができます。
  • マウスを使用せずにWebサイトも操作できることを確認してください。ドロップダウンメニューを使用する場合を除いて、ほとんどの場合、特別なアクションは必要ありません。この特定のガイドラインは、キーボードしか使用できない訪問者にとって非常に重要です。
  • 字幕を追加するか、文字起こしを提供することで、聴覚的または視覚的な制約がある訪問者がオーディオとビデオのフラグメントにアクセスできるようにすることができます。
  • 構造情報を伝えるために色だけに頼らないでください。 「赤のフィールドは必須です」というメッセージは、目の見えない人や色覚異常の人には役に立ちません。
  • 点字ディスプレイは画像を表示できません。したがって、画像とグラフィックボタンの簡単な説明を追加する必要があります。それらは画面には表示されませんが、視覚障害者や視覚障害者が使用するスクリーンリーダーソフトウェアによって検出されます。
  • FlashやJavaScriptなどのテクノロジーの使用は十分に検討する必要があります。さらに、重いアニメーションとちらつきは、失読症またはてんかんに苦しむ人々にとって非常に厄介です。

ただし、最終的にはスクリーンリーダーの責任で、ユーザーにとって意味のあるときに停止および開始するようにします。不可能な場合は、ユーザーがリーダー自体を一時停止する必要があります。

スクリーンリーダーは多種多様であるため、あなたが求めていることはまったく不可能に思えます。

6
Michiel Cornille

これは、ARIA role="dialog"を使用して実行できます。あなたはあなたの例のためにこのコードを修正しなければならないでしょう、それはバニラjsです、それであなたはおそらくjQueryを通してより短く/より簡単になるでしょう。

HTML：


<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
  <h3 id="myDialog">Just an example.</h3>
  <button id="ok" onclick="hideDialog(this);" class="close-button">OK</button>
  <button onclick="hideDialog(this);" class="close-button">Cancel</button>      
</div>

JavaScript：


var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;

function showDialog(el) {
    lastFocus = el || document.activeElement;
    toggleDialog('show');
}
function hideDialog(el) {
    toggleDialog('hide');
}

function toggleDialog(sh) {
    dialog = document.getElementById("box");
    okbutton = document.getElementById("ok");
    pagebackground = document.getElementById("bg");

    if (sh == "show") {
        dialogOpen = true;

        // show the dialog 
        dialog.style.display = 'block';

        // after displaying the dialog, focus an element inside it
        okbutton.focus();

        // only hide the background *after* you've moved focus out of the content that will be "hidden"
        pagebackground.setAttribute("aria-hidden","true");

    } else {
        dialogOpen = false;
        dialog.style.display = 'none';
        pagebackground.setAttribute("aria-hidden","false");
        lastFocus.focus(); 
    }
}


document.addEventListener("focus", function(event) {

    var d = document.getElementById("box");

    if (dialogOpen && !d.contains(event.target)) {
        event.stopPropagation();
        d.focus();
    }

}, true);


document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        toggleDialog('hide');
    }
}, true);

ソース： http://3needs.org/en/testing/code/role-dialog-3.html
続きを読む： http://juicystudio.com/article/custom-built_dialogs.php

7
albert

aria-hidden = "true"を使用すると、スクリーンリーダーはその要素とそのコンテンツを認識できなくなります。つまり、読み上げられません。

aria-labelは、支援技術（スクリーンリーダーなど）が認識するテキストを設定します。

http://www.w3.org/TR/wai-aria/states_and_properties

2
Wesley

私は同じ問題に直面し、次のsetpで解決しました

  • すべてのメッセージを配置するために、モーダルコンテナラッパー内にもう1つのdiv（#message）を作成しました
  • そして、aria-labelledby属性を閉じるボタンに設定して、＃messageコンテナをポイントします
0
Velusamy Dhamodaran

ARIAライブリージョンを使用できますか？ https://developer.mozilla.org/en/ARIA/Live_Regions 次に、モーダル表示中にJavascriptで、リージョンをアサーティブとオフに交換します。

0
matthewnreid