对于网页开发者而言，无障碍性根据 Web 内容可访问性指南 (WCAG) 中的构建指南是至关重要的。创造一个无障碍性友好的网页需要考虑到一些较少为人所知的松散技巧。这篇文章将向您介绍如何使用 aria-describedby 和 aria-labelledby 属性来构建无障碍性表格。
什么是 aria-describedby 和 aria-labelledby?
"aria-describedby" 和 "aria-labelledby" 是两个在 HTML 中定义一个和多个不同目的的属性。它们都是用来提供网页上的更丰富语义和更好用户体验的结构化元数据操作方式。
- "aria-describedby" 属性的作用是为当前元素指定一个或多个文本，这些文本提供如何使用该元素更完整和详细的信息。
- "aria-labelledby" 属性的作用主要是为当前元素定义一个 ID，这个 ID 关联的元素内容被用来作当前元素的名称。
这两个属性的组合可以为在网页上访问带有障碍的用户提供更好的使用体验。
如何使用 aria-describedby 和 aria-labelledby 属性来构建无障碍性表格？
表格是一个常见的数据呈现方式。而因缺乏足够的结构标记，很容易影响到使用辅助技术的用户的网页阅读体验。
为表格创建标题
属性 "aria-describedby" 和 "aria-labelledby" 可以用来创建表格标题，从而使得障碍用户更容易了解表格的内容和结构。另外，正常用户也将遵循这一规则以改善理解该表格。
-- -------------------- ---- -------
-------
-------- --------------------- --------------------------------------------------------
-------
----
--- -------------------
--- ---------------------
-----
--------
-------
----
----------
------ ---- -------
-----
----
----------
------ --- -------
-----
--------
--------在上面的示例中，我们使用了 <caption> 标签来为表格创建描述文本。该元素的 ID 属性设置为 "table-caption-id"，以便我们能够在其他地方引用它。同时，通过定义 "aria-describedby" 属性，我们允许为该表格提供描述信息的其他元素被插入到该属性中去。
为表格列创建标题
表格内的列可以有一个多级标题。这个多级标题对于这一列的内容进行了更精确的描述，这个描述信息对于无障碍用户十分关键。我们使用 "aria-describedby" 属性来附加列的描述信息。
-- -------------------- ---- -------
-------
-------- --------------------- --------------------------------------------------------
-------
----
--- ----------- ------------------------
--- ----------- ---------------------------
-----
--------
-------
----
--- ------------------
--- --------------------------------------- ---- -------
-----
----
--- ------------------
--- --------------------------------------- --- -------
-----
--------
--------在这个例子中，我们给了标题和教程名称两个 <th> 元素普通和唯一的 ID。 "aria-describedby" 属性被绑定到 "td" 元素上并指向了标题的 ID。
结论
通过使用 "aria-describedby" 和 "aria-labelledby" 属性，我们可以更好地构建无障碍性友好的表格。对于使用辅助技术的人们，这个很重要。我们希望随着越来越多的人关注无障碍性设计，这些更细粒度的标签也将更加普及，并且更好地被 Web 服务开发者采用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b44569babaf620faa6cbf