占位符未与 Aria 一起显示

Question

我有一个占位符，您可以在其中搜索多个名称。我做到了，所以屏幕 reader NVDA 会显示您每次按下切换时列表中的人数（例如，如果您按 a，它表示有 20 个结果，如果您按 ag，则有12 等.)

问题是，当您删除所有字母后，屏幕 reader 会读取搜索器中的所有人员总数，我不想要那个，我想要它不说什么。这是我的代码（重要的是这个）

<div class="sr-only" alt="This div read on screen reader the results of searched persons and its not visible" aria-atomic="true" aria-live="assertive">
    <span class="sr-only" v-bind:aria-label=" 'Showing '+filterPeople.length + ' results.'"></span>
</div>

和另一个

<div class="nav-new-scrollbar"></div>

<div v-show="addMore == 2 && myPeople.length < 5 && !plannerOpened" class="wc-search"> 
    <img src="imagesnew/search-icon-peopleSearch.svg" title="Search" alt="Search" tabindex="0" class="wc-searchbox-btn" />
    <input v-model="search" type="text" placeholder="Search to add a person" tabindex="0" class="keyboard-outline" aria-label="Search to add a peopleF" />
    
    <div v-show="search != ''" class="wc-select-city">
        <div v-for="(person, index) in filterPeople" :key="person.Id + '-' + index" class="wc-result-people" tabindex="0" :value="city.Id" @click.stop.prevent="addCity(person.Id)" @keyup.enter.stop.prevent="addPerson(person.Id)">
            <p :title="person.PersonName">
                {{ city.PersonName }}
            </p>
        </div>
    </div>
</div>

Answer 1

没有足够的代码来真正了解问题所在，但我可以指出一些需要修复的问题，这些问题不会导致您的问题，但一般可访问性最佳实践。

您在 <div> 上的 alt 无效 html。如果你运行它通过 html 验证器，例如 https://validator.w3.org/nu/ 你会得到关于 alt.
除非您想让屏幕 reader 说的公告非常关键，否则请避免使用 aria-live="assertive"。请改用 aria-live="polite"。
您的  上似乎有 aria-label，但  上没有 role。 aria-label 在非语义元素上通常被忽略。请参阅 https://www.w3.org/TR/using-aria/#label-support
您似乎正在根据搜索结果更新  上的 aria-label，而没有利用容器上的 aria-live。 aria-live 将公布在内部元素所做的任何文本更改。因此，如果您在 new text here 之间插入新文本，它会宣布“此处有新文本”。

考虑到所有这些，我认为如果你有类似的东西，你的代码应该可以工作：

<div aria-live="polite" aria-atomic="true">
  <span> <!-- put text here --> </span>
</div>

所以当你输入 'a' 时，你会得到

<div aria-live="polite" aria-atomic="true">
  <span> Showing 20 results </span>
</div>

并且屏幕 reader 会显示 “显示 20 个结果”。当您删除所有字符时，您将不会在跨度中放置任何内容（或空白）。

<div aria-live="polite" aria-atomic="true">
  <span> </span>
</div>

并且屏幕reader应该保持沉默（因为没有新文本可读，或者更确切地说，新文本只是空白）。

占位符未与 Aria 一起显示

Placeholder not showing with Aria

html

wai-aria

vue.js