必须用aria的三类场景：自定义组件（如下拉菜单）、动态内容更新（用aria-live）、状态同步（如aria-pressed）；原生元素已有语义时滥用aria反而破坏可访问性。

能，但不是加了 aria- 属性就自动可访问——它只在语义缺失、动态状态变化或复杂控件场景下才真正起作用，滥用反而破坏屏幕阅读器体验。

哪些情况必须用 ARIA

原生 HTML 元素已有完整语义和键盘行为（比如 <button></button>、<nav></nav>、<main></main>），此时加 role 或 aria-* 不仅多余，还可能覆盖默认行为。只有以下三类场景才需要 ARIA：

• 自定义组件：比如用 <div> 实现的下拉菜单、标签页（<code>tablist/tabpanel）或模态框（dialog）
• 动态内容更新：AJAX 加载后区域内容变更，需用 aria-live="polite" 告知屏幕阅读器
• 状态同步：如开关按钮视觉上是“开”，但 DOM 仍是 <button></button>，需用 aria-pressed="true" 或 aria-checked="true"

role 和 aria-* 不能乱配

ARIA 角色（role）有隐含属性要求，强行组合会触发校验失败或被屏幕阅读器忽略。例如：

• role="button" 必须支持空格/回车触发，且需手动加 tabindex="0" 才能获得焦点
• role="checkbox" 必须配合 aria-checked，不能只靠 class 名称模拟状态
• role="listbox" 下的选项必须是 role="option"，且需用 aria-activedescendant 管理焦点，不能靠 tabindex 暴力聚焦

浏览器开发者工具的「Accessibility」面板会标出不合规的 ARIA 组合，比靠肉眼检查靠谱得多。


HTML Extract
使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
下载

别用 ARIA 修补语义错误

常见误区是用 aria-label 掩盖结构缺陷，比如：

<div aria-label="搜索">
  @@##@@
</div>

这不如直接写成语义正确的：

<button type="submit" aria-label="搜索">
  @@##@@
</button>

• 前者不可键盘聚焦、无默认交互、无法被表单逻辑识别
• 后者自带焦点、回车触发、可被 form 包含，aria-label 只是补充说明
• 更推荐用 <input type="search"> + <label for></label>，连 aria-label 都省了

ARIA 是补丁，不是胶带。它解决不了结构混乱、焦点流断裂、键盘操作缺失这些底层问题——那些得靠语义化 HTML 和 JavaScript 行为控制来修复。