[辅助功能] 我试图总结所有可以在 WAI-ARIA 中指定的属性。

介绍

你知道WAI-ARIA吗？

我使用 aria-label 和
我想我了解业务中经常使用的东西，例如使用角色来阐明一个元素的角色。

但是，我不太了解还有哪些其他类型的 WAI-ARIA 以及它们的作用。
所以我阅读了关于 WAI-ARIA 的 W3C 参考资料以获得更好的理解。

所以，这一次，我们总结了所有可以用 WA-ARIA 指定的属性，所以请看一看。

什么是 WAI-ARIA？

WAI-ARIA 是Web Accessibility Initiative 可访问的富 Internet 应用程序用于提高可访问性的 W3C 规范的缩写。

此外，通过使用 WAI-ARIA，可以用属性补充 HTML 中无法表达的意义（语义），
通过屏幕阅读器等辅助技术，残疾人将能够传达适当的信息。

WAI-ARIA 表示内容的作用角色属性并指明内容的状态或性质咏叹调属性被定义，并且通过充分利用角色和aria属性，可以通过补充复杂嵌套UI的含义（语义）来提高可访问性，因为它是无意义的<div>。

WAI-ARIA 的类型

现在我们对 WAI-ARIA 有了一个概述，让我们快速解释每个属性所扮演的角色。

其中有很多，每一个都需要费很大的力气来详细解释，所以我将给你一个简要的概述。
有关详细信息，请参阅 W3C 参考。

指示内容角色的角色属性

有四个角色属性指示内容的角色：抽象役割、ウィジェット役割、文書構造 和 ランドマーク役割。
抽象役割、ウィジェット役割、文書構造、ランドマーク役割在各自的章节中有详细的解释。

要使用角色属性，请像这样填写元素以指示内容的角色。

示例.html

<!-- 〇〇の部分に役割を記入します。 -->
<div role="〇〇">...</div>

<!-- 例: mainの役割の場合 -->
<div role="main">...</div>

抽象角色

抽象角色用于定义一般角色概念。是因为，不要对内容使用抽象角色。

命令
- 用于执行操作但不接收输入数据的小部件的表单。
合成的
- 一个小部件，可以包含可导航的后代或拥有的孩子。
输入
- 允许用户输入的通用类型的小部件。
地标
- 旨在作为导航地标的页面区域。
范围
- 表示用户可以设置的值范围的输入。
角色类型
- 所有其他角色在此分类中继承的基本角色。
部分
- 可以在文档或应用程序中呈现的结构包含单元。
部门负责人
- 对结构的相关部分中的主题进行分类或总结。
选择
- 允许用户从一组选项中进行选择的表单小部件。
结构体
- 文档结构元素。
小部件
- 图形用户界面 (GUI) 的交互式组件。
视窗
- 浏览器或应用程序窗口。

小部件角色

小部件角色用于独立的 UI 小部件和大型复合小部件。

警报
- 包含重要且通常对时间敏感的信息的消息。
- 查看相关的警报对话框和状态。
警报对话框
- 一种对话框，当初始焦点转到对话框中的某个元素时，它会包含一条警告消息。
- 查看相关警报和对话框。
纽扣
- 当单击或按下时允许用户触发操作的输入。
- 查看相关链接。
复选框
- 具有三个可能值的可检查输入：真、假或混合。
对话
- 对话框是一个应用程序窗口，旨在中断应用程序的当前处理，以提示用户输入信息或请求响应。
- 请参阅相关的警报对话框。
网格单元
- 网格或树形网格中的单元格。
关联
- 对内部或外部资源的交互式引用，当激活该资源时，会导致浏览器导航到该资源。
- 查看相关按钮。
日志
- 一种活动区域，其中以有意义的顺序添加新信息，而旧信息可能会消失。
- 参见相关的选取框。
选框
- 一种非必要信息频繁变化的活动区域。
- 查看相关日志。
菜单项
- 菜单或菜单栏中包含的一组选项中的一个选项。
菜单项复选框
- 具有可检查状态的菜单项，其可能值为真、假或混合。
菜单项收音机
- 一组元素中的可检查菜单项，其角色为 menuitemradio，一次只能检查一个。
选项
- 选项列表中的可选项目。
进度条
- 显示长时间运行任务进度的元素。
收音机
- 一组无线电角色中的可检查输入，一次只能检查一个。
滚动条
- 一个图形对象，它控制显示屏内内容的滚动，无论内容在显示屏内是否完全可见。
滑块
- 用户从给定范围内选择值的用户输入。
旋转按钮
- 期望用户在离散选项中进行选择的范围形式。
地位
- 一种容器，其内容对用户来说是有用的信息，但不足以证明警报的重要性，并且通常不需要显示为状态栏。
- 请参阅相关警报。
标签
- 一个分组标签，它提供了一种机制来选择要呈现给用户的选项卡内容。
选项卡面板
- 与选项卡关联的资源的容器，其中每个选项卡都在一个选项卡列表中。
文本框
- 允许自由格式的文本作为输入值。
计时器
- 一种包含数字计数器的活动区域，该计数器指示自起点以来经过了多少时间或距离终点还剩多少时间。
工具提示
- 显示元素描述的上下文弹出窗口。
树项目
- 树的可选项目。这是树中的一个元素，如果它包含一组较低级别的树项元素，则可以展开或折叠。
组合框
- 选择演示文稿。
- 用户可以向前键入以选择一个选项或键入任意文本作为列表中的新项目，通常类似于文本框。
- 参见相关列表框。
网格
- 网格是一种交互式控制角色，包含按行和列排列的表格数据单元格，就像表格一样。
列表框
- 允许用户从选项列表中选择一个或多个项目的小部件。
- 查看相关的组合框和列表。
菜单
- 一种向用户提供选择列表的小部件。
菜单栏
- 通常保持可见并水平显示的菜单演示。
无线电组
- 一组单选按钮。
表列表
- 一个选项卡元素列表，它们是对选项卡面板元素的引用。
树
- 一种可能包含嵌套在可以折叠和展开的较低级别的组的列表。
树网格
- 一种网格，其行可以像在树中一样打开和关闭。

文件结构

文档结构角色用于描述页面的文本结构，而不是交互元素。

文章
- 由构成站点独立部分的文本组成的文档、页面或页面部分。
列标题
- 包含列标题信息的单元格。
定义
- 术语或概念的定义。
目录
- 对组成员的引用列表，如静态目录。
文件
- 包含声明为文档内容的相关信息的区域，与 Web 应用程序不同。
团体
- 一组用户界面对象不打算通过辅助技术包含在页面摘要或目录中。
标题
- 页面部分的标题。
图像
- 构成图像的元素集合的容器。
列表
- 一组非交互式列表项。
- 参见相关列表框。
列出项目
- 列表或目录中的单个项目。
数学
- 表示公式的内容。
笔记
- 内容包含或附带于资源主要内容的部分。
介绍
- 具有不映射到辅助功能 API 的隐式本机角色语义的元素。
地区
- 网页或文档的一个大的感知部分，其重要性足以包含在页面摘要或目录中，例如包含现场体育赛事统计数据的页面区域。
排
- 网格中的单元格行。
行组
- 在网格中包含一个或多个行元素的组。
行标题
- 网格中带有行单元格的标题信息。
分隔器
- 分隔和区分内容部分或菜单项组的分隔符。
工具栏
- 以紧凑、常用的视觉格式表示的功能按钮或控制角色的集合。

地标角色

地标角色用于指示页面的预期区域，例如导航。

应用
- 声明为 Web 应用程序的区域，而不是 Web 文档。
横幅
- 主要包含面向站点的内容而不是特定于页面的内容的区域。
补充
- 文档的支持部分，旨在与 DOM 层次结构中同等级别的主要内容互补，但在与主要内容分开时仍然有意义。
内容信息
- 包含有关父文档的信息的大型可感知区域。
形式
- 一个标志性区域，作为一个整体，包含一组项目和对象，这些项目和对象组合起来创建一个表单。
- 参见相关搜索。
主要的
- 文档的主要内容。
导航
- 用于在文档或相关文档中导航的导航元素（通常是链接）的集合。
搜索
- 一个标志性区域，作为一个整体，包含一组项目和对象，这些项目和对象组合起来创建一个搜索功能。
- 参见相关表格。

指示内容状态或性质的 aria 属性

有四个 aria 属性，ウィジェット属性、ライブ領域属性、ドラッグアンドドロップ属性 和 関係属性，指示内容的状态和性质。
ウィジェット属性・ライブ領域属性・ドラッグアンドドロップ属性・関係属性将在各自的章节中进行说明。

要使用 aria 属性，您可以通过填充元素来指示内容的状态或性质，如下所示：

示例.html

<!-- 〇〇の部分にaria属性を、✖️✖️にはその値を記入します。 -->
<div 〇〇="✖️✖️">...</div>

<!-- 例: aria-hiddenがtrueの場合 -->
<div aria-hidden="true">...</div>

小部件属性

咏叹调自动完成
- 指示是否建议建议以完成用户输入。
咏叹调检查（情况）
- 表示复选框、单选按钮和其他小部件当前处于“选中”状态。
- 请参阅相关的 aria-pressed 和 aria-selected。
咏叹调禁用（情况）
- 表示该元素是可感知的但已禁用，因此既不可编辑也不可操作。
- 请参阅相关的 aria-hidden 和 aria-readonly。
咏叹调扩展（情况）
- 指示元素或其控制的另一个分组元素当前是展开还是折叠。
咏叹调-haspopup
- 表示元素具有弹出上下文菜单或下级菜单。
咏叹调隐藏（情况）
- 表示元素及其所有后代对任何用户均不可见或不可感知，如作者指定的那样。
- 请参阅相关的 aria-disabled。
咏叹调无效（情况）
- 表示输入的值不符合应用程序预期的格式。
咏叹调标签
- 定义一个标记此元素的字符串值。
- 参见相关的 aria-labelledby。
咏叹调级别
- 定义层次结构中元素的级别。
咏叹调多行
- 指示文本框是接受多行输入还是仅接受单行输入。
咏叹调多选
- 表示用户可以从这个可选择的后代中选择多个项目。
咏叹调
- 指示元素或方向是水平的还是垂直的。
咏叹调（情况）
- 表示切换按钮当前处于“按下”状态。
- 请参阅相关的 aria-checked 和 aria-selected。
咏叹调只读
- 表示该元素不可编辑，但可以正常工作。
- 请参阅相关的 aria-disabled。
需要咏叹调
- 表示在提交表单之前元素需要用户输入。
咏叹调（情况）
- 指示各种小部件的当前“选定”状态。
- 请参阅相关的 aria-checked 和 aria-pressed。
咏叹调排序
- 指示表或网格中的项目是按升序还是降序排序。
咏叹调值最大值
- 定义范围小部件的最大允许值。
咏叹调值最小值
- 定义范围小部件的最小允许值。
现在的咏叹调值
- 定义范围小部件的当前值。请参阅相关的 aria-valuetext。
咏叹调值文本
- 为范围小部件的 aria-valuenow 值（当前值）定义人类可读的替代文本。

活区属性

咏叹调原子
- 根据 aria-relevant 属性定义的更改通知，指示辅助技术是显示所有更改区域还是仅显示部分更改区域。
- 参见相关的 aria-relevant。
咏叹调忙（情况）
- 元素及其子树。
咏叹调现场
- 表示将更新元素并描述浏览器、辅助技术和用户可以从活动区域指定的更新格式。
咏叹调相关
- 表示辅助技术在活动区域内收到的浏览器更改通知（添加、删除等）。
- 参见相关的 aria-atomic。

拖放属性

咏叹调效果
- 指示将拖动的对象放在放置目标上时可以执行的功能。
- 这允许辅助技术向用户传达可用的拖动选项，包括应用程序中是否有可用的选择弹出菜单。
- 一般来说，拖放效果功能只能在抓取对象进行拖动操作时提供，因为可用的拖放效果功能取决于被拖动的对象。
咏叹调（情况）
- 表示元素在拖放操作中被“抓取”。

关系属性

咏叹调活跃的后代
- 标识复合小部件的当前活动后代。
咏叹调控制
- 标识其内容或存在受此元素控制的元素。
- 查看相关的 aria-owns。
咏叹调描述的
- 找到描述对象的元素。
- 参见相关的 aria-labelledby。
咏叹调流
- 根据用户的判断，确定辅助技术将覆盖文档源顺序的一般默认阅读顺序的备用阅读顺序中的下一个元素。
咏叹调-labelledby
- 标识标记此元素的元素。
- 请参阅相关的 aria-label 和 aria- describeby。
咏叹调拥有
- 当 DOM 层次结构不能用于表示这种关系时，要定义 DOM 元素之间的视觉、功能或上下文父/子关系，请指定一个元素。
- 参见相关的 aria-controls。
咏叹调-posinset
- 定义元素在相应的列表项或树项集中的数量和位置。
- 如果集合中的所有元素都存在于 DOM 中，则不需要。
- 参见相关的 aria-setsize。
咏叹调集大小
- 定义给定列表项或树项集中元素的项数。
- 如果集合中的所有元素都存在于 DOM 中，则不需要。
- 参见相关的 aria-posinset。

概括

这一次，我阅读了 W3C WAI-ARIA 参考并试图总结 WAI-ARIA。

每个属性很容易理解，但是如果你有几十个，处理起来很麻烦，你无法组织它们。

因此，我希望这篇文章可以作为组织 WAI-ARIA 元素的第一步。

无论如何，这篇文章很有帮助・如果有人对WAI-ARIA有所了解
LGTM 和股票，请。 ?

参考

感谢您阅读到最后！
如果你想听更多的细节，让我们直接在 Dev Talk 中交谈！

我们也在推特上发送信息，所以如果你喜欢，请关注我们！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308632743.html