NVDA 屏幕閱讀器無法讀取最新 Chrome 版本的警報消息
[英]NVDA screenreader not reading alert message with latest Chrome version
問題描述
我創建了以下 HTML 演示頁面。 In that page a message is added to a div when selecting the "No" radiobutton. div 上有 aria-tags。 有問題的 div 的 ID 為“lblErr”/“lblErr2”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Screenreader Errormessage Test with Radiobuttons</title> </head> <body> <label id="instructionLbl"> Please select below </label> <div> <div id="firstItemGroup"> <label id="headerTextLbl"> Select no to generate the error message </label> <fieldset aria-labelledby="headerTextLbl"> <div id="selectionGroup1"> <table id="radioBtnTable"> <tbody> <tr> <td> <label for="button:conf:1">Yes</label> <div class="ui-radiobutton ui-widget"> <div class="ui-helper-hidden-accessible"> <input tabindex="1" id="button:conf:1" name="button:conf" type="radio" value="false" onchange="var errorDiv = document.getElementById('lblErr');while(errorDiv.hasChildNodes()){errorDiv.removeChild(errorDiv.lastChild);}"> </input> </div> </div> </td> <td> <label for="button:conf:2">No</label> <div class="ui-radiobutton ui-widget"> <div class="ui-helper-hidden-accessible"> <input tabindex="2" id="button:conf:2" name="button:conf" type="radio" value="false" onchange="var errorDiv = document.getElementById('lblErr');errorDiv.style.display = 'block';var newDiv = document.createElement('div');var spanOne = document.createElement('span');spanOne.classList.add('ui-message-error-icon');var spanTwo = document.createElement('span');spanTwo.classList.add('ui-message-error-detail');var errMsg = document.createTextNode('Very long error message with special red font, details, paragraphs and recovery suggestion is displayed here');spanTwo.appendChild(errMsg);newDiv.appendChild(spanOne);newDiv.appendChild(spanTwo);errorDiv.appendChild(newDiv);"> </input> </div> </div> </td> </tr> </tbody> </table> <div id="lblErr" style="display: none;" role="alert" aria-atomic="true" aria-live="polite" tabindex="3"></div> </div> </fieldset> </div> <div id="subItemsGroup"> <label id="headerTextLbl2"> Label with headertext </label> <fieldset aria-labelledby="headerTextLbl2"> <div id="selectionGroup2"> <label id="instructionLbl2">Select no to generate the error message</label> <table id="radioBtnTable2"> <tbody> <tr> <td> <label for="button:conf:3">Yes</label> <div class="ui-radiobutton ui-widget"> <div class="ui-helper-hidden-accessible"> <input tabindex="4" id="button:conf:3" name="button:conf:2" type="radio" value="false" onchange="var errorDiv = document.getElementById('lblErr2');while(errorDiv.hasChildNodes()){errorDiv.removeChild(errorDiv.lastChild);}"> </input> </div> </div> </td> <td> <label for="button:conf:4">No</label> <div class="ui-radiobutton ui-widget"> <div class="ui-helper-hidden-accessible"> <input tabindex="5" id="button:conf:4" name="button:conf:2" type="radio" value="false" onchange="var errorDiv = document.getElementById('lblErr2');errorDiv.style.display = 'block';var newDiv = document.createElement('div');var spanOne = document.createElement('span');spanOne.classList.add('ui-message-error-icon');var spanTwo = document.createElement('span');spanTwo.classList.add('ui-message-error-detail');var errMsg = document.createTextNode('Very long error message with special red font, details, paragraphs and recovery suggestion is displayed here');spanTwo.appendChild(errMsg);newDiv.appendChild(spanOne);newDiv.appendChild(spanTwo);errorDiv.appendChild(newDiv);"> </input> </div> </div> </td> </tr> </tbody> </table> <div id="lblErr2" style="display: none;" role="alert" aria-atomic="true" aria-live="polite" tabindex="6"></div> </div> </fieldset> </div> </div> </body> </html>
添加錯誤消息的 JavaScript 代碼。 我將它添加到單選按鈕的 onChange 中：
var errorDiv = document.getElementById('lblErr'); var newDiv = document.createElement('div'); var spanOne = document.createElement('span'); spanOne.classList.add('ui-message-error-icon'); var spanTwo = document.createElement('span'); spanTwo.classList.add('ui-message-error-detail'); var errMsg = document.createTextNode('Very long error message with special red font, details, paragraphs and recovery suggestion is displayed here'); spanTwo.appendChild(errMsg); newDiv.appendChild(spanOne); newDiv.appendChild(spanTwo); errorDiv.appendChild(newDiv);
這是我們生產 HTML / JS 的提取和簡化版本。 在生產中，有 5 到 6 個這樣的選擇，一個在另一個之下，它被嵌入到一個更大的 HTML 結構中（有多個父 div，其中也有導航元素和其他東西）。
此 HTML 與 Google Chrome 和 NVDA 屏幕閱讀器結合使用時存在問題。 In production when selecting the "No" selection the error message is added to the HTML, but no error message is read at all by NVDA. Firefox 中的相同情況導致 NVDA 讀取“警報...”。
以下部分已被編輯，請參閱下面的編輯。
這個簡化的演示片段的行為略有不同。 在這里 Firefox 讀取錯誤消息兩次。 一次只有消息文本，然后第二次“警報”，然后是消息文本。 Chrome 只讀取一次並忽略以“alert”開頭的第二條消息。 我只希望它在兩個瀏覽器中都讀取“警報...”。
圍繞錯誤消息的span和div結構在生產環境和我的代碼片段中是相同的。
我的問題是：在 Chrome 中添加消息時，為什么 NVDA 沒有讀取“alert ...”？ 這是 HTML、Chrome 或 NVDA 的問題嗎？ 我可以通過對 HTML 進行不間斷更改來修復它嗎？
編輯：我現在編輯了 HTML/JS，這樣它就不會在 Chrome 中讀取任何錯誤消息，而在 Firefox 中仍然可以讀取它。 改變的是 div lblErr/lblErr2 現在以“display: none”樣式屬性開始，即使我在添加錯誤消息之前刪除了它。 因此，Chrome / NVDA 似乎忽略了對以“display: none”開頭的 div 的修改。 這是符合規范還是Chrome中的錯誤？
2 個解決方案
解決方案1
0 2021-10-20 17:17:34
屏幕閱讀器是否說出實際的“警報”一詞是屏幕閱讀器和瀏覽器組合的選擇。 你不能指望宣布這個詞。 如果您絕對需要宣布它，那么它應該是您信息的一部分。
警報規范說：
“如果操作系統允許，用戶代理應該通過可訪問性 API 觸發系統警報事件”
請注意，“應該”並不意味着“必須”。 “應該”的定義在rfc2119 中說：
“3. 應該這個詞，或形容詞“推薦”，表示在特定情況下可能存在合理的理由忽略特定項目，但在選擇不同的課程之前必須理解並仔細權衡全部含義。
也就是說，應該意味着它是鼓勵的，但不是必需的。 因此，回過頭來，建議發布“警報”通知（通過發布警報系統事件），但不是必需的。
因此，如果您的主要問題是如何在所有平台（PC、Mac、移動設備）上的所有瀏覽器上通過所有屏幕閱讀器宣布“警報”一詞，那么您需要直接在錯誤消息中對這個詞進行編碼。 “警報”一詞不必在屏幕上可見，但必須注入實時區域。
另請注意， role="alert"為您提供了一個隱式的aria-live="assertive"和aria-atomic="true"因此您無需指定這些屬性。 在您的情況下，您正在覆蓋隱式aria-live="assertive"並專門設置aria-live="polite" 。 這樣做不應該有任何傷害，但是您違背了使用警報角色的目的。
屏幕閱讀器是一次還是兩次宣布實際消息是屏幕閱讀器的決定。 在 Firefox 上，我確實聽到了兩次宣布的錯誤消息，一次在它前面帶有“alert”，一次沒有它。 在 Chrome 上，我只聽過一次，但沒有說“警報”。 但是在兩個瀏覽器上，消息都被宣布了，這就是實時區域的目的。
您在實際生產代碼中提到，Chrome/NVDA 上沒有公布任何內容。 那會很奇怪。 我從來沒有遇到過使用aria-live並且消息沒有公布的情況。 我只能評論您發布的示例代碼。
解決方案2
0 已采納 2021-11-24 09:02:53
正如我在問題的編輯部分中已經提到的，核心問題是我使用 JavaScript 添加錯誤消息的 div 的初始顯示樣式屬性設置為“無”。 它最初也是空的。
<div id="lblErr" style="display: none;" role="alert" aria-atomic="true" aria-live="polite" tabindex="3"></div>
使用此設置 Google Chrome + NVDA 不會讀取動態添加的錯誤消息。
一旦我刪除了初始顯示樣式或將其更改為其他樣式，Google Chrome + NVDA 就會開始讀取動態添加的錯誤消息。
NVDA 在 Chrome 中兩次讀取文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.