关于WAI-ARIA那些事儿

[FrankKai]

参加完第二届VUECONF 杭州之后，印象最深的还是勾三股四关于Web无障碍的分享，其中有几个关键概念WAI-ARIA，widget，role，props以及states值得深入学习，于是我从MDN找到了相关资料，会记录一些知识点，也会写一些自己的思考。

资料链接：https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics\

• 存在的问题
• 三个WAI-ARIA的核心概念
• 常见的ARIA Landmarks

[FrankKai]

存在的问题

developers quite often rely on JavaScript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using CSS and controlled using JavaScript，The problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.

为了解决这个问题，WAI-ARIA规范定义了一系列的附加的HTML attributes，从而增强semantic，也进一步增强accessibility。

[FrankKai]

三个WAI-ARIA的核心概念

关键词：Roles，Properties，States

Roles

定义了一个元素是is或者does。大多数被称作里程碑角色，很大程度上是复制了语义化的HTML5结构化标签的语义值。例如role="navigation"（<nav>）或者role="complementary"（<aside>），但是同样有其他的可以描述不同页面结构的，例如role="banner"，role="search"，role="tabgroup"，role="tab"等等通用的UI。

Properties

• aria-required="true"，指明表单输入需要输入有效值。
• aria-labelledby="label"，允许你向元素传入一个ID，从而引用页面上的元素，这适用于<label for="input">不能用的情况。可以直接复用其他地方的内容当做alt的内容。

<img src="dinosaur.png" aria-labelledby="dino-label">
<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

States

• 定义了当前情况下的标签的特殊属性，例如aria-disabled="true"。
• state与property最大的不同在于，state不会在app的生命周期内变化，只能通过javascript改变。

有一个很重要的点：WAI-ARIA不会影响webpage的结构，DOM等等，虽然这些属性可以当做CSS的属性选择器。

roles的定义：https://www.w3.org/TR/wai-aria-1.1/#role_definitions
properties和states（所有aria-*属性）的定义：https://www.w3.org/TR/wai-aria-1.1/#state_prop_def

[FrankKai]

常见的ARIA Landmarks

Main Landmark

Main Landmark设计模式

• 每一个page应该有一个main陆标。
• main 陆标应该作为顶级陆标。
• 嵌套的document或者application，例如iframe或者frame也需要一个main 陆标。
• 若一个页面有多个main 陆标，每一个都应该有一个独立的label。
• 有两种实现方式，ARIA和HTML5这两种方式。

实现方式可查阅：https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html