HTML5中role属性是否必要？W3验证警告与ARIA文档矛盾解惑

嘿，这个问题其实挺多人碰到的，我来帮你理清楚这里的逻辑～

首先要明确一个核心原则：HTML5的原生语义化元素本身就自带了对应的ARIA角色，完全不需要你手动重复添加，这就是验证工具警告你“多余”的原因。

具体到你遇到的两个情况：

• 对于<button>元素：它从诞生起就自带了button的语义角色，浏览器会自动识别并告知辅助技术（比如屏幕阅读器）这是一个按钮。你手动加上role="button"属于画蛇添足，验证工具自然会给出警告。
• 对于<nav>元素：同样的道理，这个原生元素默认就对应ARIA的navigation角色，手动添加role="navigation"完全没必要。

那为什么W3C的ARIA文档里会提到button角色适用于<button>元素呢？其实文档是在说明ARIA角色的适用范围——意思是如果你用非原生按钮的元素（比如用<div>模拟按钮），可以通过添加role="button"来赋予它按钮的语义，让辅助技术能正确识别。但原生<button>本身已经具备这个语义了，重复添加反而会造成冗余。

给你两个实用建议：

• 立刻移除所有原生语义元素上的冗余ARIA角色，比如把<button role="button">改成<button>，<nav role="navigation">改成<nav>
• 只有当你用非语义化元素（比如<div>、<span>）模拟交互组件时，才需要添加对应的ARIA角色，比如用div做自定义按钮时，要写<div role="button" tabindex="0">（别忘了加tabindex保证键盘可访问性）

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