輔助功能：使VoiceOver讀取文本而不關注網頁

我在網頁（HTML，JavaScript，Jquery）中有表單。如果沒有將焦點設置爲包含錯誤描述的元素，則表單提交因表單中的無效條目而失敗（一切發生在客戶端）時，如何讓VoiceOver讀取某些內容？輔助功能：使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>

來源

2015-10-14 EGN

您是否可以發佈代碼示例以防焦點方法或接收元素出現問題？重點通常是宣佈錯誤消息的最簡單方法。 – stringy

我加了代碼，謝謝你的幫助。正如我所說，NVDA宣佈這個錯誤。這是它的VoiceOver – EGN

張貼您的隱藏的CSS – unobf

有一個關於應該發生時，他們的顯示屬性改變爲居住區有什麼分歧/混亂請參閱以下頁面上的「註釋」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>

你會那麼每次產生錯誤及時更換警報的全部內容消息

來源

2015-10-15 16:10:51 unobf

非常感謝您的先生！ – EGN

輔助功能：使VoiceOver讀取文本而不關注網頁

回答

相關問題