Jaws 正在读取上述字段组的输入字段

Question

. Answers to this question are eligible for a +50 reputation bounty. Sarfraj Ansari is looking for an :

Need whats the issue in attached html that its not working and a fix for it

 <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 is not announcing text field information properly when focusing on 'city' text fields, as Jaws is reading previous field content information (street text box value). JAWS is reading the previous field value. When moved by the down arrow key to the city or street address field. It should only announce the input field value of the field which is focussed and not the field above it.

Answer 1

You are misusing <legend> here. Don't use legend to label the controls inside a fieldset!

Don't put <label> in <legend> . The legend is already a kind of label.

A <fieldset> is primarily a semantic grouping mechanism, labelled by (ie "accessibly named by") the (optional) <legend> . The legend labels the entire group , rather than any of its individual "children".

Yes, it is valid to have a fieldset containing only one control (or none at all), but... why would you want to do this? That just adds complexity, unwelcome chatter (and extra keypresses) to the assistive tech experience of your content. As you have discovered, it also confuses the JAWS screen reader.

Don't be seduced by the default visual appearance of a fieldset. It is not purely presentational - it actually means something, so it will be included in the accessibility tree and will be announced by screen readers - as a group , not as a control.

If you would like to have a presentational box around each control, add some CSS borders to the wrapper divs you have used already.

It might make sense for all these controls to be inside a single fieldset with legend "Contact Info" or something like that.

Then, use <label> elements with for attributes pointing at the id of the relevant control. Typically, the label will appear just before or after the control (or its wrapper div) in the DOM.

The for attribute is how the screen reader knows which label is associated with which control. With the for attribute in place, you can (and should) remove the aria-label attributes entirely. It's always better to use the onscreen label as the accessible name, if possible.

BTW why are your buttons marked as presentational? Why not use semantic HTML instead of ARIA? You've used <fieldset> and <legend> , why not <select> ?