SEO 百科

ARIA

本页目录

ARIA

ARIA 是一组属性，用来扩展 HTML 的语义，由角色（role）、状态与属性三类组成，用来把自定义控件的含义与当前状态告诉辅助技术[1]。它不改外观，也不产生行为。

第一原则是有原生标签就用原生标签

<button> 自带按钮语义与键盘行为，用 <div role="button"> 就得自己补点击与按键处理[1]。MDN 直接引用了一句行话：错误的 ARIA 比不加 ARIA 更糟[1]。WebAIM 抽样统计了超过一百万个首页，比较两类页面的检出错误。带 ARIA 的那组平均检出错误更多，比不带 ARIA 的多 41%[1][2]。

一个进度条的写法

<div id="percent-loaded" role="progressbar"
     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>

<div> 本身没有含义，role="progressbar" 说明它是什么，三个 aria-value* 给出取值范围与当前值[1]。当前值要靠脚本同步更新，静态写死会一直报 75%[1]。

地标与命名

<main>、<nav> 等元素会自动生成地标，多数情况下不需要再加 role[3]。需要区分同类的多个区块时，用 aria-label 或 aria-labelledby 给块起名[3]。整页地标数量建议不超过 7 个[3]。

与搜索的关系

结构化数据是另一套机制，走 JSON-LD 或微数据，与 ARIA 的用途不同[4]。搜索结果里的标题与摘要取自可见文字与既定标记，ARIA 属性里的说明文字不参与这部分处理[4]。

常见误用

第一种是给原生 <a> 加 role="button"，读屏与右键行为不一致。第二种是菜单收起时把隐藏区留在可访问树里，用户跳到不存在的项目[1]。第三种是只加 ARIA 不配键盘事件，鼠标能用键盘不能用[5]。

附录

参见

参考资料

官方（境外）

  1. 《ARIA》，MDN Web 文档。
  2. 《WebAIM Million》，WebAIM。
  3. 《Landmarks Pattern》，W3C WAI-ARIA Authoring Practices Guide。
  4. 《结构化数据简介》，Google 搜索中心。
  5. 《Keyboard accessible》，MDN Web 文档。

外部链接