WAI-ARIA 可访问性尝试

WAI-ARIA 的全称是 Web Accessibility Initiative – the Accessible Rich Internet Applications Suite。简而言之:我们使用这个标准定义的一些方式,来实现无障碍化,目的是为了让那些残障人士也可以顺利的访问我们的站点。

目前而言,ARIA 是唯一一种可以添加可访问帮助或说明文本的方式。以下是官方的解释:

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

可访问性示意图
可访问性示意图

注意点1:

官方给出的最佳实践中指出:

  • 与其乱用、错用 aria 属性,那还是不要用的好
  • role 属性和 aria 属性之间的区别

比如说:

<div role="button">Button</div>

使用了role属性后,默认认为开发者会通过 JavaScript 来赋予这个 div button 的一些基本功能,比方说可以使用键盘事件触发等行为,而 aria 则只是单纯的为标签做一些说明,这是二者的差别

click me

注意点2:

另一方面,通过结合 aria 标签,我们可以额外描述说明一些 web 元素的实际含义

<a role="menuitem">Assistive tech users perceive this element as an item in a menu, not a link.</a>
<a aria-label="Assistive tech users can only perceive the contents of this aria-label, not the link text">Link Text</a>

同时这也是一把双刃剑,错误的使用会覆盖掉原来的语义,就像上面使用了 rolediv 标签定义成按钮那样。

<table role="log">
  <!--
    Table that assistive technology users will not perceive as a table.
    The log role tells browser this is a log, not a table.
  -->
</table>
<ul role="navigation">
  <!-- This is a navigation region, not a list. -->
  <li><a href="uri1">nav link 1</li>
  <li><a href="uri2">nav link 2</li>
  <!-- ERROR! Previous list items are not in a list! -->
</ul>

所以,看到这里的话,大致上理解了 aria 的副作用以及正向的优势,由于 Chrome 的 Lighthouse 的评分中有可访问性这一项评判,个人猜测在 SEO 中这方面的优化或多或少会影响到搜索引擎给站点的权重,这和网站的响应速度,是否启用 HTTPS 一样,都是涉及用户体验方面。

发展阶段

2014 年 03 月 20 日 WAI-ARIA 1.0
2017 年 12 月 14 日 WAI-ARIA 1.1
2018 年 12 月 18 日 WAI-ARIA 1.2
近两年节奏加快,看一下 caniuse 上的兼容性,还是 1.0 的版本

caniuse-aria-support
caniuse-aria-support

HTML 5 标签 和 aria 属性

  • HTML5 发布之后,很多原先需要使用 aria 属性来增强语义化的方式都可以使用 H5 的语义化标签来表示了。
  • H5 的标签和 aria 属性之间应该是相辅相成结合使用,单纯的 H5 标签表达不了深层次的含义,则可以通过 aria 属性来实现。
  • 以下 4 种场景中 img 标签中的 alt 属性应该留空

实际的优化体验

aria 标签更像是对 HTML 结构和一系列不能直接表达含义的内容的补充,感兴趣的可以看我之前写的一篇,使图片更具有语义化的文章,做了可访问性优化后,对于残障人士的帮助是非常大的,可以想象,不看屏幕只通过语音朗读,你就可以知道网站的结构,需要导航到哪个页面,这个页面的重点内容是什么。

通过学习相关的文档,在开发过程中可以进一步纠正书写 HTML 代码结构时的一些不足,aria 属性让开发者聚焦如何将网页中的内容进一步清晰化,梳理层次。

下面这个图是我做完可访问性优化后网站首页的评分,不用纠结为啥没到 90, 因为掺杂了 google 广告,以及埋点的相关代码,权衡利弊,无伤大雅。

Google Chrome Lighthouse audit
Google Chrome Lighthouse audit

参考资料:
aria 最佳实践
关于 role 属性的 w3c 文档
使用 role 和 aria 属性所需的描述性词汇
aria 工作组的日程计划和状态
aria 官网