Vue.js：条件渲染下使用aria-controls的HTML校验报错问题

这个问题我之前做Vue无障碍优化时也碰到过！核心原因就是aria-controls的规范要求受控元素必须始终存在于DOM中，而v-if会在条件不满足时直接把元素从DOM里移除，导致对应的id缺失，触发HTML校验报错。下面给你几个实用的解决方案：

方案1：用v-show替代v-if（最简单直接） #

v-show只是通过CSS的display: none隐藏元素，元素始终保留在DOM结构里，对应的id一直存在，完美符合aria-controls的要求。

代码示例：

<template>
  <!-- 按钮加上aria-expanded，告诉屏幕阅读器当前展开状态 -->
  <button 
    aria-controls="screen-info"
    :aria-expanded="isInfoVisible"
    @click="isInfoVisible = !isInfoVisible"
  >
    切换屏幕附加信息
  </button>

  <!-- 用v-show控制显示/隐藏，元素始终在DOM中 -->
  <div 
    id="screen-info"
    v-show="isInfoVisible"
    class="screen-info-content"
  >
    这里是需要展示的屏幕附加信息内容
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isInfoVisible = ref(false)
</script>

注意：如果你的信息框包含大量复杂组件或数据，v-show会始终渲染这些内容，可能有轻微性能影响，但如果是简单的附加信息，完全不用顾虑。

方案2：动态绑定aria-controls（保留v-if的场景） #

如果你必须用v-if（比如信息框内容很重，不想提前渲染），可以通过动态绑定让aria-controls只在元素存在时生效，避免校验报错。

代码示例：

<template>
  <button 
    <!-- 只有当信息框可见时，才绑定aria-controls -->
    :aria-controls="isInfoVisible ? 'screen-info' : undefined"
    :aria-expanded="isInfoVisible"
    @click="isInfoVisible = !isInfoVisible"
  >
    切换屏幕附加信息
  </button>

  <!-- 用v-if条件渲染，满足条件才加入DOM -->
  <div 
    id="screen-info"
    v-if="isInfoVisible"
    class="screen-info-content"
  >
    这里是需要展示的屏幕附加信息内容
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isInfoVisible = ref(false)
</script>

当isInfoVisible为false时，按钮的aria-controls属性会被移除，这样就不会触发“找不到对应id”的校验错误；当元素被渲染到DOM后，属性会自动加上，符合无障碍规范。

无障碍最佳实践补充 #

不管用哪种方案，都一定要加上aria-expanded属性！它能告诉屏幕阅读器用户：当前按钮控制的元素是展开还是收起状态，这是无障碍交互的关键细节，能大幅提升视障用户的体验。

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