更新后Aria-live不说标签

Question

我有一段HTML，可以用JS动态更新。 屏幕阅读器仅在更新后读取新值。 它没有说更新输入的标签。

<ul class="points-transfer-detail-points-calculation clearfix">
    <li>
        <label for="points-to-transfer">{{{ pointsToTransferLabel }}}</label>
        <input id="points-to-transfer" type="text" aria-controls="brand-points points-left-after-transfer" placeholder="XXX,XXX" {{#if disabled }}disabled{{/if}}>
        <p id="points-to-transfer-error" class="points-transfer-detail-form-error" aria-hidden="true" role="alert">{{{ pointsToTransferErrorMessage }}}</p>
    </li>
    <li>
        <label for="brand-points">{{{ brandPointsLabel }}}</label>
        <input id="brand-points" type="text" aria-live="polite" aria-atomic="true" disabled>
    </li>
    <li>
        <label for="points-left-after-transfer">{{{ pointsLeftLabel }}}</label>
        <input id="points-left-after-transfer" type="text" aria-live="polite" aria-atomic="true" disabled>
    </li>
</ul>

我尝试使用aria-labelledby ， aria-describedby ， role="alert"和aria-label但是没有结果，只有输入值，而不是他的标签。

根据我对Google和StackOverflow的所有研究，我没有找到合适的答案。

我正在Firefox中使用NVDA作为屏幕阅读器。

谢谢您的帮助。

Answer 1

屏幕阅读器唯一应读取标签的时间是将焦点放在其相应字段上。

您的输入字段全部被禁用。 因此，由于您无法专注于这些字段，因此不会读取标签。

从输入字段中删除aria-live和aria-atomic。 它们在输入字段上不可用。 Aria-live在分配给它的容器内的DOM更改时触发。 输入字段不是容器。 另外，标签无论如何也不应以这种方式宣布。

如果您想宣布对DOM的更改，建议您将内容注入到页面底部的空aria-live div中，并以可访问的方式隐藏它。

这是一个带有一个静态标签和3个动态标签的工作示例。 一种使用“禁用”属性，另一种使用禁用aria的功能，以便它仍然可以接收焦点。 还使用可访问隐藏的aria-live容器发布有关新标签渲染的公告。

已在FF的NVDA，IE的JAWS和Safari的VO中进行了测试。

 (function () { function populateLabels () { document.querySelector('[for="dogsName"]').appendChild(document.createTextNode('Dog\\'s Name')); document.querySelector('[for="catsName"]').appendChild(document.createTextNode('Cat\\'s Name')); document.querySelector('[for="lastName"]').appendChild(document.createTextNode('Last Name')); } function announceChange () { var announcement = "Some new labels have appeared. They are Last Name, Dog's Name, and Cat's Name.", ariaLiveContainer = document.querySelector('[aria-live]'); ariaLiveContainer.appendChild(document.createTextNode(announcement)); setTimeout(function () { ariaLiveContainer.innerHTML(""); }, 2000); } setTimeout(function () { populateLabels(); announceChange(); }, 3000); }()); 

 input { border: 1px solid black; } [disabled], [aria-disabled="true"] { border: 1px solid #ccc; background-color: #eee; } .acc-hidden { /* Hide only visually, but have it available for screenreaders */ position: absolute !important; display: block; visibility: visible; overflow: hidden; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0 0 0 0); } 

 <p>The first label is there on DOM load. The other three labels come in 3 seconds after DOM load. An announcement is made about the updated labels.</p> <form action=""> <ul> <li> <label for="firstName">First Name</label> <input type="text" name="first-name" id="firstName" /> </li> <li> <label for="lastName"></label> <input type="text" name="last-name" id="lastName" /> </li> <li> <label for="dogsName"></label> <input type="text" name="dogs-name" id="dogsName" disabled /> (uses the disabled attribute -- doesn't receive focus) </li> <li> <label for="catsName"></label> <input type="text" name="cats-name" id="catsName" aria-disabled="true" /> (uses the aria-disabled="true" attribute -- can receive focus) </li> </ul> </form> <div class="acc-hidden" aria-live="polite"></div>