[英]Accessibility: Make VoiceOver read a text without focus on a Web page
我在網頁中有一個表單(HTML,JavaScript,Jquery)。 當表單提交因表單中的無效條目(一切都發生在客戶端)而沒有將焦點設置為包含錯誤描述的元素時,如何使VoiceOver讀取內容?
我能夠使它與NVDA一起使用,但是VoiceOver不喜歡在不關注它的情況下閱讀某些內容,或者至少我沒有為它設置適當的屬性。 這里有什么建議?
在NVDA中工作的代碼是這樣的
if(logic for error) {
$('#inline-errors-alert').attr({ 'aria-hidden': 'false' });
setTimeout(function() { $('#inline-errors-alert').attr({ 'aria-hidden': 'true' })}, 500);
}
HTML標記是這樣的
<div class="hidden" id="inline-errors-alert" role="alert" aria-describedby="inlineErrorsMessage" aria-hidden="true">
<p id="inlineErrorsMessage">some message here.</p>
</div>
當顯示屬性發生變化時,對於活區域會發生什么應該存在分歧/混淆,請參閱下頁的“注釋” https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/ Using_the_alert_role
您的實施必須提醒有視力的用戶不可見。 所以你應該使用以下CSS的屏幕外技術:
.hiddden {
border: 0;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
position: absolute;
}
然后使用以下HTML標記:
<div class="hidden" id="inline-errors-alert" role="alert" aria-atomic="true">
<p>some message here.</p>
</div>
然后,每次生成錯誤消息時,都會替換警報的全部內容
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.