《重学前端》学习笔记Day125

HTML·ARIA：可访问性是只给盲人用的特性么？

ARIA全称为Accessible Rich Internet Applications，它表现为一组属性，是用于可访问性的一份标准。
实际上，可访问性其实一个相当大的课题，它定义包含各种设备访问、各种环境、各种人群访问的友好性。不单单是永久性的残障人士需要用到可访问性，健康的人也可能在特性时刻处于需要可访问性的环境。
ARIA是以交互形式来标注各种元素的一类属性。所以，在ARIA属性中，交互形式往往跟我们直觉的“控件”非常相似。ARIA的角色对我们UI系统的设计有重要意义。

综述

ARIA给HTML元素添加的一个核心属性就是role。

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label">Remember my preferences</label>

role的定义是一个树形的继承关系，我们先来理解一下它的整体结构：

其中，widget表示一些可交互的组件，structure表示文档中的结构，window则代表窗体。

widget角色

这一类角色跟我们你桌面开发中的控件类似，它表示一种可交互的组件，它们有：

注意，这些role可以出现在任何一个HTMl元素之上，同时要注意，这些ARIA属性，不会真实地改变任何一个元素的行为。比如，我们刚才提到的checkbox，即使我们给一个span添加了Checkbox角色，我们也需要用JavaScript编写相应的逻辑。

structure角色

结构角色其实跟HTML5中不少新标签作用重合了，这里建议优先使用HTML5标签。
这部分角色的作用类似于语义化标签，但内容稍微有些不同，提供一张参考图：

window

在我们的网页中，有些元素表示“新窗口”，这时候，会用到window角色。window系角色非常少，只有三个角色：

• window

  • dialog

    • alertdialog

dialog可能会产生“焦点陷阱”，也就是说，当这样的角色被激活时，焦点无法离开这个区域。

此文章为7月Day28学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪