Vue ARIA开发：如何解决v-if报错及输入为空时阻止屏幕阅读器播报

报错含义说明 #

你遇到的VS Code报错是Vue指令语法不规范触发的校验提示：

• 你在v-if后额外加了冒号，Vue会将冒号后的内容识别为指令修饰符，但v-if本身不支持任何修饰符，因此触发「v-if directives require no modifer」报错
• 错误的v-if:写法导致Vue无法正确解析指令的绑定值，因此同时触发「require that attribute value」报错

代码修正方案 #

1. 语法错误修正 #

首先去掉v-if后的多余冒号即可解决编辑器报错。

2. 功能适配（满足ARIA播报需求） #

结合你“输入时仅播报结果数量、清空时仅播报空内容、不播报具体人员信息”的需求，完整代码调整如下：

<!-- 屏幕阅读器专属动态播报区域 -->
<span 
  class="sr-only" 
  aria-live="polite"
>
  <span v-if="filterCities.length > 0">Showing {{ filterCities.length }} results</span>
  <span v-else>Empty result</span>
</span>

<!-- 人员列表容器，添加aria-hidden避免被屏幕阅读器读取 -->
<ul class="your-list-class" aria-hidden="true">
  <!-- 原有列表项代码 -->
</ul>

调整说明： #

• 新增aria-live="polite"属性，告知屏幕阅读器该区域为动态更新区域，会在用户操作空闲时自动播报内容变化
• 补充v-else分支的空内容提示，实现清空输入时播报空内容的需求
• 给人员列表容器添加aria-hidden="true"属性，会让屏幕阅读器跳过列表内容的解析，避免播报具体人员信息
• 直接将播报文本写在标签内部，配合sr-only类实现视觉隐藏、仅屏幕阅读器可见的效果，比使用aria-label兼容性更好

内容的提问来源于stack exchange，提问作者Pony