role属性是向辅助技术声明元素在当前上下文中承担的角色，而非赋予语义；它仅影响无障碍树，不改变dom行为、样式或seo，且必须静态设置、不可动态修改。

role 属性不是“给元素加语义”，而是**向辅助技术声明：“这个元素在当前上下文中，实际承担的角色，和它原生标签的默认语义不一致”**。它只影响无障碍树，不改变 DOM 行为、样式或 SEO 解析。

哪些元素必须加 role 才能被正确识别

只有当原生 HTML 标签无法准确表达组件意图，且你又无法改用语义化标签时，才需要手动加 role。典型场景包括：

• div 或 span 实现的交互控件（如自定义下拉、手写模态框、卡片式按钮）
• 动态渲染的容器（React/Vue 中返回 div，但运行时确定它是导航区 → 补 role="navigation"）
• 旧浏览器兜底（IE11 不识别 main，需用 div role="main"）
• 无对应原生标签的结构（如仪表盘中的实时指标流 → role="feed"）

别给 button、nav、main 这类已有明确语义的元素加 role——覆盖会破坏辅助技术对 landmark 的识别逻辑。

role="button" 不是加了就完事的硬性条件

仅写 role="button" 会让屏幕阅读器报“按钮”，但键盘用户按空格/Enter 没反应、焦点进不去、视觉无反馈，等于制造了一个“假按钮”。必须同步满足：

• tabindex="0"：否则不在 Tab 键焦点流中
• onclick + onkeydown 监听 Enter 和 Space，并调用 event.preventDefault()
• 提供可访问名称：可见文本，或 aria-label / aria-labelledby
• CSS 中实现 :focus 和 :active 状态样式

漏掉任意一项，都可能让键盘用户卡在页面某处，反复按空格却毫无响应。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

role 值不能乱选，更不能运行时修改

WAI-ARIA 规范定义了几十个 role，但日常开发真正稳定可用的不到 10 个。优先用这些：

• role="alert"（配 aria-live="assertive"）
• role="dialog" + aria-modal="true"（二者缺一不可）
• role="navigation"、role="main"、role="status"
• role="listbox" / role="option" / role="combobox"（必须成组使用）

动态 JS 修改 role（比如从 role="button" 改成 role="alert"）不会触发辅助技术重读——它们只在元素插入 DOM 时读取一次。状态变化该用 aria-live 区域配合文本更新，而不是换 role。

检查 role 是否生效的关键动作

写了不等于起效。验证必须落在真实环境里：

• Chrome DevTools → Accessibility 面板 → 点击元素，确认 Role 字段显示为你设的值（不是 generic 或 fallback 值）
• NVDA 开启后按 D 键，看 role="navigation" 是否出现在 landmark 列表中
• 禁用 CSS 后纯 HTML 浏览：如果仅靠 role 而没有语义标签，整个页面只剩一堆 div，协作和维护成本会陡增

最常被忽略的是：role 是静态契约，不是运行时指令。它定义“这个元素**是什么**”，不是“它**现在正在做什么**”。想表达状态变化，别动 role，去配 aria-* 属性或 aria-live。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！