时间戳

首页 > 解决方案 > 占位符未与 Aria 一起显示

html - 占位符未与 Aria 一起显示

问题描述

我有一个占位符，您可以在其中搜索多个名称。我这样做是为了让屏幕阅读器 NVDA 显示您按下的每个切换按钮的列表中的人数（例如，如果您按 a，则显示有 20 个结果，如果按 ag，则显示有 12 个结果，等等。 .)

问题是，当您完成删除所有字母时，屏幕阅读器会读取搜索器中所有人员的总数，而我不希望这样，我希望它什么也不说。这是我的代码（重要的部分是这个）

<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>

标签： htmlvue.jswai-aria

解决方案

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

  • 您有一个alt无效的<div>html。如果您通过 html 验证器（例如https://validator.w3.org/nu/ ）运行它，您将收到有关alt.
  • 除非您希望屏幕阅读器说出的公告非常重要，否则请避免使用aria-live="assertive". 改为使用aria-live="polite"。
  • 看起来您有一个aria-labelon a<span>但您role的<span>. aria-label在非语义元素上通常被忽略。请参阅https://www.w3.org/TR/using-aria/#label-support上的倒数第三个要点
  • 看起来您正在根据搜索结果更新aria-labelon<span>并且没有利用aria-live容器。 将宣布在元素内部aria-live进行的任何文本更改。因此，如果您在 之间插入新文本，它将宣布“此处有新文本”。<span>new text here</span>

鉴于这一切，我认为如果你有类似的东西，你的代码应该可以工作：

<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>

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

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

并且屏幕阅读器应该是静音的（因为没有要阅读的新文本，或者更确切地说，新文本只是空白）。

推荐阅读