Jaws 正在讀取上述字段組的輸入字段

Question

賞金將在 6 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Sarfraj Ansari正在從可靠的來源尋找答案：

需要附件 html 中的問題是什么，它不起作用並修復它

 <div class="ms-Panel-content content-410"> <div class="panelSubheadingStyle-396"> We recommend you keep only one phone number and one address in your profile for easy communication. </div> <fieldset class="groupedElements-421"> <legend class="legendStyle-422"> <label class="ms-Label titleLabelStyle-423">Phone number</label> </legend> <div class="ms-TextField root-425"> <div class="ms-TextField-wrapper"> <div class="ms-TextField-fieldGroup fieldGroup-426"> <input type="text" id="TextField134" maxlength="15" class="ms-TextField-field field-427" aria-label="add phone number" aria-invalid="false" value="545465464" /> </div> </div> </div> </fieldset> <h3 class="panelSubheadTitleStyle-397">Address</h3> <fieldset class="groupedElements-436"> <legend class="legendStyle-422"> <label class="ms-Label titleLabelStyle-423" >Street address<span class="requiredLabelStyle-419" >&nbsp;(required)</span ></label > </legend> <div class="ms-TextField root-425"> <div class="ms-TextField-wrapper"> <div class="ms-TextField-fieldGroup fieldGroup-426"> <input type="text" id="TextField139" aria-required="true" maxlength="100" class="ms-TextField-field field-427" aria-label="add street address" aria-invalid="false" value="asd" /> </div> </div> </div> </fieldset> <fieldset class="groupedElements-436"> <legend class="legendStyle-422"> <label class="ms-Label titleLabelStyle-423" >City<span class="requiredLabelStyle-419">&nbsp;(required)</span></label > </legend> <div class="ms-TextField root-425"> <div class="ms-TextField-wrapper"> <div class="ms-TextField-fieldGroup fieldGroup-426"> <input type="text" id="TextField144" aria-required="true" maxlength="100" class="ms-TextField-field field-427" aria-label="add city" aria-invalid="false" value="city input" /> </div> </div> </div> </fieldset> <fieldset class="groupedElements-436"> <legend class="legendStyle-422"> <label class="ms-Label titleLabelStyle-423" >Country/region of residence<span class="requiredLabelStyle-419" >&nbsp;(required)</span ></label > </legend> <div class="ms-ComboBox-container dropdownStyle-394"> <div data-ktp-target="true" id="ComboBox149wrapper" class="ms-ComboBox css-437" > <input autocapitalize="off" autocomplete="off" aria-autocomplete="inline" data-ktp-execute-target="true" data-is-interactable="true" id="ComboBox149-input" class="ms-ComboBox-Input css-438" type="text" aria-expanded="false" role="combobox" aria-label="select your country or region" aria-describedby="ComboBox149-error" spellcheck="false" placeholder="Select a country/region" data-lpignore="true" value="Venezuela" style="font-family: inherit" /><button type="button" class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446" role="presentation" data-is-focusable="false" tabindex="-1" > <span class="ms-Button-flexContainer flexContainer-67" data-automationid="splitbuttonprimary" ><i data-icon-name="ChevronDown" aria-hidden="true" class="ms-Icon root-32 css-321 ms-Button-icon icon-447" style="font-family: FabricMDL2Icons" ></i ></span > </button> </div> </div> </fieldset> <fieldset class="groupedElements-436"> <legend class="legendStyle-422"> <label class="ms-Label titleLabelStyle-423" >State/province<span class="requiredLabelStyle-419" >&nbsp;(required)</span ></label > </legend> <div class="ms-ComboBox-container dropdownStyle-394"> <div data-ktp-target="true" id="ComboBox153wrapper" class="ms-ComboBox css-437" > <input autocapitalize="off" autocomplete="off" aria-autocomplete="both" data-ktp-execute-target="true" data-is-interactable="true" id="ComboBox153-input" class="ms-ComboBox-Input css-438" type="text" aria-expanded="false" role="combobox" aria-label="select your state or province" aria-describedby="ComboBox153-error" aria-disabled="false" spellcheck="false" placeholder="Select a state/province" data-lpignore="true" value="" style="font-family: inherit" /><button type="button" class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446" role="presentation" data-is-focusable="false" tabindex="-1" > <span class="ms-Button-flexContainer flexContainer-67" data-automationid="splitbuttonprimary" ><i data-icon-name="ChevronDown" aria-hidden="true" class="ms-Icon root-32 css-321 ms-Button-icon icon-447" style="font-family: FabricMDL2Icons" ></i ></span > </button> </div> </div> </fieldset> </div>

當關注“城市”文本字段時，JAWS 未正確宣布文本字段信息，因為 Jaws 正在讀取以前的字段內容信息（街道文本框值）。 JAWS 正在讀取先前的字段值。 當通過向下箭頭鍵移動到城市或街道地址字段時。 它應該只宣布焦點字段的輸入字段值，而不是它上面的字段。

Answer 1

您在這里濫用<legend> 。 不要將圖例用於 label 字段集中的控件！

不要將<label>放在<legend>中。 傳說已經是label的一種了。

<fieldset>主要是一種語義分組機制，由（可選的） <legend>標記（即“可訪問地命名為”）。 圖例標記了整個組，而不是它的任何單獨的“孩子”。

是的，擁有一個僅包含一個控件（或根本不包含任何控件）的字段集是有效的，但是......您為什么要這樣做？ 這只會增加內容的輔助技術體驗的復雜性、不受歡迎的喋喋不休（和額外的按鍵）。 正如您所發現的，它還會混淆 JAWS 屏幕閱讀器。

不要被字段集的默認視覺外觀所迷惑。 它不是純粹的展示 - 它實際上意味着一些東西，因此它將包含在可訪問性樹中，並將由屏幕閱讀器宣布 - 作為一個組，而不是一個控件。

如果您希望每個控件周圍都有一個展示框，請向您已經使用的包裝 div 添加一些 CSS 邊框。

將所有這些控件放在帶有圖例“聯系信息”或類似內容的單個字段集中可能是有意義的。

然后，將<label>元素與指向相關控件 ID for屬性一起使用。 通常，label 將出現在 DOM 中控件（或其包裝器 div）之前或之后。

for屬性是屏幕閱讀器如何知道哪個 label 與哪個控件相關聯的。 有了for屬性，您可以（並且應該）完全刪除aria-label屬性。 如果可能，最好使用屏幕上的 label 作為可訪問的名稱。

順便說一句，為什么你的按鈕被標記為演示？ 為什么不使用語義 HTML 而不是 ARIA？ 您使用過<fieldset>和<legend> ，為什么不用<select> ？