0

我在使用 nvda 时遇到问题。我有一个主 div 标签，并且在该 div 标签内有多个 div 标签。每当我单击按钮时，这个主要的 div 标签就会获得焦点。我期望屏幕阅读器应该阅读整个内容。我能知道我缺少哪些代码吗？

这是muy fiddle：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”标签，那么NVDA会读取所有内容。任何有关填空的帮助。

4

1 回答 1

0

你的实现在 NVDA 和 Firefox 中为我读到了，虽然不是最理想的方式。我会推荐一些改变。

  1. 您可能遇到困难的原因之一是因为您正在弹出警报窗口，然后您希望阅读重点文本。删除对警报窗口的调用，它应该按照您的预期读取。
  2. 不要将内容包装在<label>. <label>只能与表单输入元素一起使用。在您的实现中，您实际上并不需要该<label>元素。
  3. 上的for属性<label>无效。它们不能包含空格。
  4. 你不需要role="button"在<button>元素上。那是多余的。
  5. 不要将aria-label属性放在文本元素上。通常，屏幕阅读器不会阅读它们。
于 2015-09-09T12:27:49.827 回答