WAI-ARIA 可访问性尝试

By Noxxxx from https://www.noxxxx.com/?post_type=post&p=1037
欢迎分享与聚合，尊重版权，可以联系授权

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>