0

nvdaに問題があります。メインの div タグが 1 つあり、その div タグ内に複数の div タグがあります。ボタンをクリックするたびに、このメインの div タグがフォーカスされます。スクリーン リーダーがコンテンツ全体を読み上げることを期待しています。不足しているコードを知ることができますか?

これはかなりのフィドルです：http://jsfiddle.net/o27ogt2z/

HTML コード:

<button id="btnSave">Save Click</button>
<div id="mrndialog" class="mrndialog" style="display: block;">
<div id="mrn_description" tabindex="0" aria-label="MRN detail description">
<label for="MRN title">
<div><span id="label_mrn_title">
 <h3>Where is the Health/Medical Record number?</h3>
</span></div></label>
<label for="MRN Description">

<div id="label_mrn_body_1">You'll find this number on a Kaiser Permanente 
card.It's the number used when making appointments.</div>
<div id="label_mrn_body_2">If you are in Northern California, don't include 
the '11' prefix when entering the MRN.</div></label></div>
<div><button class="button i18n" id="back_mrn_button" role="button">       
<b>BACK</b></button></div></div>

これは私のJSファイルです。

$(document).ready(function () {

    $("#btnSave").click(
        function () {
            $("#mrn_description").focus()
            AlertSave();
        }            
    );
  $("#back_mrn_button").click(
        function () {
            AlertSave();
        }            
    );
});

function AlertSave() {
alert("Alert Message OnClick");
}

1: 保存ボタンをクリックします。したがって、フォーカスは「mrn_description」div に転送されます。その後、スクリーン リーダーがその div 内のすべてを読み取ることを期待しています。子の div と span を含みます。集中している間、NVDAは何も読んでいません。タブ フォーカスの後、[戻る] ボタンに移動します。ここで、「mrn_description」タグにフォーカスするために Shift + Tab (戻る) すると、NVDAがすべてを読み取ります。空白を埋めるための任意のヘルプ。

4

1 に答える 1

0

あなたの実装は、最も理想的な方法ではありませんが、Firefox を使用した NVDA で読み取れます。いくつかの変更をお勧めします。

  1. 問題が発生する理由の 1 つは、アラート ウィンドウをポップアップさせて、フォーカスされたテキストを読み上げたい場合です。警告ウィンドウへの呼び出しを削除すると、期待どおりに表示されるはずです。
  2. で内容をラップしないでください<label>。<label>フォーム入力要素でのみ使用する必要があります。あなたの実装では、<label>要素は本当に必要ありません。
  3. のfor属性<label>が無効です。スペースを含めることはできません。
  4. 要素role="button"には必要ありません。<button>それは冗長です。
  5. aria-labelテキスト要素に属性を配置しないでください。通常、これらはスクリーン リーダーでは読み上げられません。
于 2015-09-09T12:27:49.827 に答える