WAI-ARIA 可访问性尝试

上山打老虎了

发布于 2022-06-15 08:38:23

4090

发布于 2022-06-15 08:38:23

文章被收录于专栏：Article

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>

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

<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 一样，都是涉及用户体验方面。