无障碍标签属性之aria-*、role

什么是无障碍(WAI)。

这类属性的作用是为了增强网页在残障辅助阅读设备上的识别读取，这些都是HTML针对html tag增加的属性。 支持 aria 会让你的应用变得更友好，更健壮。

1. aria-label

使用aria-label加在可被tab到的元素上，读屏才会读出其中的内容。拓展：可通过键盘导航的 JavaScript 小部件

下面这两种都可实现，当焦点落到该输入框时，读屏软件就会读出aria-label里的内容，即"用户名"。第二种使用aria-label的在视觉上并不呈现。

    <label for="username">用户名：</label><input type="text" id="username"/>

    <input type="text" aria-label="用户名"/>

2. aria-labelledby

当想要被屏幕读取器读取的标签文本已在其他元素中存在时，可以将aria-labelledby值为该元素的id。

表单区添加了role=“form”，当跳转到该区域时，不仅会读出"表单区"，也会读出"使用手机号码注册"。

<div role="form" aria-labelledby="form-title">
    <span id="form-title">使用手机号码注册</span>
    <form>……</form>
</div>

如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容。

3. 持续补充...