可禁用、修正、增强或自定义ARIA提示:一、关闭html.validate.aria;二、补全tabindex、role父子关系及aria-label等;三、安装axe扩展运行扫描;四、通过settings.json或忽略特定警告。

如果您在使用 VSCode 编写 HTML 或 JSX 时看到编辑器自动提示 ARIA 属性或标记可访问性问题,则可能是由于内置的 HTML 语言服务或可访问性检查扩展对 ARIA 使用规范进行了实时校验。以下是针对该提示的多种处理方式:
本文运行环境:MacBook Air,macOS Sequoia。
一、禁用 ARIA 可访问性提示
此方法适用于开发阶段暂时忽略 ARIA 合规性检查,避免干扰快速编码流程。VSCode 的 HTML 语言功能默认启用 ARIA 验证,可通过配置关闭相关诊断提示。
1、打开 VSCode 设置界面,点击左上角“Code”→“Settings”,或使用快捷键 Cmd + ,。
2、在搜索框中输入 html.validate.aria。
3、将对应设置项的复选框取消勾选。
二、修正 ARIA 属性使用方式
此方法适用于希望保留可访问性检查并修复实际问题。ARIA 提示通常源于属性值缺失、角色与元素不匹配或未声明必要属性(如 aria-label、aria-labelledby)。
1、检查当前标签是否为交互元素(如 2、若使用 role="listitem",确保其父容器具有 role="list"。 3、对无文本内容的图标按钮,补充 aria-label="删除项目" 或关联可见文本的 aria-labelledby="label-id"。 此方法通过增强型工具提供更精准的 ARIA 诊断,替代默认提示逻辑,支持上下文感知和 WCAG 标准比对。 1、在 VSCode 扩展市场中搜索 axe Accessibility Linter 并安装。 2、重启 VSCode 后,打开任意 HTML 文件,右键选择 "Axe: Run Quick Scan"。 3、查看侧边栏输出面板中按严重等级分类的 ARIA 建议项,逐条定位并修改对应代码行。 此方法适用于项目中存在经评估后允许的 ARIA 模式(如第三方组件库封装的 role 组合),需局部屏蔽特定警告而非全局禁用。 1、在项目根目录创建或编辑 .vscode/settings.json 文件。 2、添加以下配置项:"html.suggest.html5": false 和 "html.validate.unknownAttributes": false。 3、在对应 HTML 文件顶部添加注释 以跳过单行检测。三、安装专用可访问性检查扩展
四、自定义 ARIA 规则忽略列表










