能，但仅限语义层面——它告诉辅助技术“这应该被当作按钮使用”，不自动带来交互行为或键盘可访问性，需手动添加tabindex="0"、keydown事件监听及:focus样式等。
role="button" 能让 div 被屏幕阅读器识别为按钮吗？
能，但仅限语义层面——它告诉辅助技术“这应该被当作按钮使用”，不自动带来任何交互行为或键盘可访问性。浏览器不会给它添加 onclick、onkeydown 响应，也不会在 Tab 键导航中自动聚焦（除非你加了 tabindex="0"）。
常见错误现象：
– 屏幕阅读器读出“button”，但按空格/回车没反应
– 键盘用户无法用 Tab 进入该元素
– 视觉上像按钮，但焦点状态缺失（无 :focus 样式）
- 必须手动监听
click和keydown事件，响应空格键（event.key === ' '）和回车键（event.key === 'Enter'） - 必须显式设置
tabindex="0"才能让它进入标准 Tab 顺序 - 建议加上
aria-pressed（用于切换按钮）或aria-disabled（禁用态），否则语义不完整
为什么不用原生 button 元素而选 role="button"？
典型场景只有两个：需要自定义 button 无法直接包裹的 DOM 结构（比如内部要嵌套 svg + span + div 且不想破坏语义层级），或框架/库限制导致无法替换根元素（如某些 UI 组件强制渲染为 div）。
别因为“想统一用 div 写所有交互元素”而滥用 role="button"——原生 button 自带 focus、键盘响应、表单提交行为、禁用逻辑，还默认阻止冒泡中的某些默认动作。
-
button在表单中点击会触发表单提交；div[role="button"]不会，除非你手动调用form.submit() - 原生
button的disabled属性会自动禁用交互+灰显+移除焦点；role="button"必须靠aria-disabled="true"+ CSS[aria-disabled="true"]+ 移除事件监听三者配合 - 部分旧版 IE 对
role支持不稳定，尤其配合aria-*属性时
最小可用的 role="button" 实现长什么样？
以下代码满足基础可访问性要求：能被读出、能 Tab 进入、能用空格/回车触发、有视觉焦点反馈。
<div role="button" tabindex="0" aria-label="删除当前项目" onclick="handleDelete()" onkeydown="if (event.key === 'Enter' || event.key === ' ') { handleDelete(); event.preventDefault(); }">
<svg aria-hidden="true"></svg><span>删</span>
</div>
注意：
– aria-label 是必须的，除非内部文本已明确表达操作意图（如纯图标按钮）
– onkeydown 中必须调用 event.preventDefault()，否则空格键会触发页面滚动
– CSS 需补充 :focus { outline: 2px solid #007aff; }，否则键盘用户看不到焦点位置
- 不要只写
tabindex="0"就以为完事——没有keydown处理，空格键无效 - 避免在
div[role="button"]上用type="button"（无效，type只对原生button生效） - 如果按钮控制展开/折叠，优先用
aria-expanded而非aria-pressed，更符合语义
role="button" 和 aria-role="button" 有什么区别？
没有区别——aria-role 是完全不存在的属性名。正确的写法只有 role="button"。写成 aria-role="button" 不仅无效，还会让辅助技术忽略整个 role 声明。
其他常见拼写错误：
– rold="button"（拼错）
– role="Button"（大小写敏感，必须小写）
– role='button '（末尾空格导致解析失败）
- 所有合法 role 值都必须是 WAI-ARIA 规范定义的字符串，
button是其中之一，不能自造如role="my-button" - 检查是否生效：用 Chrome DevTools 的 Accessibility 面板查看 Computed Properties → Role，确认显示为
button - 用 NVDA 或 VoiceOver 实际测试，比看代码更可靠
tabindex 和 click，却漏掉 keydown，结果键盘用户卡在焦点上按不出效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
