簡體   English   中英

更新后Aria-live不說標簽

[英]Aria-live doesn't say label after updates

我有一段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-labelledbyaria-describedbyrole="alert"aria-label但是沒有結果,只有輸入值,而不是他的標簽。

根據我對Google和StackOverflow的所有研究,我沒有找到合適的答案。

我正在Firefox中使用NVDA作為屏幕閱讀器。

謝謝您的幫助。

屏幕閱讀器唯一應讀取標簽的時間是將焦點放在其相應字段上。

您的輸入字段全部被禁用。 因此,由於您無法專注於這些字段,因此不會讀取標簽。

從輸入字段中刪除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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM