在 JAWS 和 chrome 中，占位符包含城市、州、国家，但在 Jaws 中，它读取为城市\州\国家

Question

这是我的代码 谁能帮我解决这个问题吗

<div class="location has-feedback ph-a11y-location" data-ph-at-id="location" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-MYIYtj">
                        <label for="hasfeature-location" id="hasFeature-search-location-label" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-y9rfkd">
                            <ppc-content key="HdNSNY-qkzjzs-ph-event-search-v1-default-searchLocationText" data-ph-at-id="label-text" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-DFwDbG">
                                Search location
                            </ppc-content>
                        </label>
                    <!-- autocomplete="location" -->
                        <input type="text" ref="locationbox" ph-a11y-autocomplete="is-show-results-on-focus.bind: !isNewEventLocationSearch" name="location" aria-controls="loc-listbox" value.bind="formData['location'].value" id="hasfeature-location" aria-owns="loc-listbox" aria-haspopup="listbox" class="form-control location ph-a11y-location-box au-target" placeholder="City,State,Country" key-placeholder="aQgj4W-qkzjzs-ph-event-search-v1-default-locationsearchboxplaceholderText" data-ph-at-id="input" aria-labelledby="hasFeature-search-location-label" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-7ChQ5X" au-target-id="49" aria-activedescendant="">
                    
                        <span aria-hidden="true" show.bind="!formData['location'].value" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-0TiVEf" class="au-target icon icon-map-pin form-control-feedback location-icon" au-target-id="50"></span>
                        <button aria-label="Clear text" type="button" key-aria-label="RHJ2eO-qkzjzs-ph-event-search-v1-default-clearLocationText" class="form-control-feedback phs-keysearch-clear location-clear-icon au-target aurelia-hide" data-ph-at-id="clear-eventsearch-link" click.delegate="clearFieldValue('location', locationbox)" show.bind="formData['location'].value" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-LLyYrP" au-target-id="51">
                            <i class="icon icon-cancel" aria-hidden="true" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-ln6ufj"></i>
                            <span class="sr-only" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-hKDCAz">
                                <ppc-content key="SivoXp-qkzjzs-ph-event-search-v1-default-locationMenuOpenClearText" data-ph-at-id="clear-eventsearch-text" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-ELD0zf">
                                    location clear text
                                </ppc-content>
                            </span>
                        </button>
                        <ul class="on-focus location phs-location-suggested-list au-target aurelia-hide" id="loc-listbox" aria-labelledby="loc-listbox" aria-label="locations" role="listbox" tabindex="-1" show.bind="fieldData.location.showListbox" data-ph-at-id="suggested-data-list" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-THexzy" au-target-id="52" data-ol-has-click-handler="" aria-expanded="false">
                            <!--anchor-->
                            <li ref="facetRef" data-ph-at-id="no-data" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-DzgLbR" class="au-target" au-target-id="56">
                                <div class="no-facet-results" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-bf6eoG">
                                    <span data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-RRGnuz">
                                        <ppc-content key="wApLmD-qkzjzs-ph-event-search-v1-default-noLocationResultsFound" data-ph-at-id="no-data-text" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-g9TfpZ">
                                            No results found
                                        </ppc-content>
                                    </span>
                                </div>
                            </li><!--anchor-->
                        </ul>
                    </div>

不知道为什么 Jaws 宣布反斜杠并且它发生在占位符文本中

Answer 1

我认为这是颌骨中的一个错误> aria-label 与＆lt; input＆gt;关联。

因此，它没有将其读为“城市，州，国家”，而是将逗号逃脱了两次，并将其称为“城市\，州\，国家”。

我建议您删除占位符文本中的逗号，以避免下巴错误。另一种选择是将占位符文本放在＆lt; input＆gt;（例如下面的输入字段作为帮助文本）之外，并使用aria-descriped属性将其关联。例如：

<label for="location" id="search-location-label">Search location</label>
<input type="text" name="location" id="location" aria-labelledby="search-location-label" aria-describedby="location-helptext">
<span id="location-helptext">City, State, Country</span>