#如何通过 ARIA 和 jQuery 实现无障碍的数据表格
无障碍 (Accessibility) 是指为所有人创造一个可访问的 Web 环境。 在构建一个网站时，我们应该考虑如何满足各种不同能力水平的用户的需求。因此，为使访问者能够正确地使用我们的数据表格，我们需要了解一些基本的规则。
ARIA (Accessible Rich Internet Applications) 是一种 Web 标准，可以使我们为所有人创造更好的体验。它使开发人员能够为 Web 应用程序添加许多可访问的功能。在本文中，我们将使用 ARIA 和 jQuery 完成数据表格无障碍特性的实现。
什么是无障碍数据表格
数据表格是指一个由行和列组成的矩形图形，其中每个单元格都包含数据。但是，有一些人无法看到这个矩形图形，如盲人或视力有问题的人。此外，有人可能无法使用鼠标或无法通过触摸屏幕进行操作。
因此，为了使数据表格能够无障碍地使用，我们需要为这些人提供另一种方式来访问数据。这是我们需要使用 ARIA 和 jQuery 的地方了。
如何为数据表格添加无障碍特性
1. 使用语义化的 HTML 标记
在编写 HTML 代码时，请使用语义化的标记。数据表格应该是使用 <table> 标签嵌套 <thead>、<tbody>、<tfoot>、<th> 和 <tr>等标签来创建的。
2. 为每个单元格提供“注释”
对于每个单元格，我们需要将其内容添加到一个“注释”中。这样，当用户使用屏幕阅读器进行浏览时，它会读出注释中的内容。
以下代码演示如何向表格中的每个单元格添加注释：
-- -------------------- ---- -------
-------
-------
----
------------
------------
------------
-----
--------
-------
----
--- ---------------------------------
--- ---------------------------------
--- ---------------------------------
-----
----
--- ---------------------------------
--- ---------------------------------
--- ---------------------------------
-----
--------
--------在上面的代码中，我们使用了 aria-describedby 属性为每个单元格添加了一个唯一的 ID，这是用来引用每个单元格的注释的。这些注释可以在页面中的任何位置定义，只需确保它们包含正确的单元格 ID 即可。一个示例的注释可能如下所示：
<div id="cell1">这是内容1</div> <div id="cell2">这是内容2</div> <div id="cell3">这是内容3</div> <div id="cell4">这是内容4</div> <div id="cell5">这是内容5</div> <div id="cell6">这是内容6</div>
这些注释在页面中是看不见的，但对于使用屏幕阅读器的用户来说是非常有用的。
3. 设置表格的 role 属性
为了使数据表格更具可读性，我们需要为其添加一些角色。使用 role="table" 可以将表格标记为一个表格，使用 role="rowgroup" 可以将表格分组为表头、主体和页脚等区域。
以下代码展示如何为表格和其组件添加角色：
-- -------------------- ---- -------
------ -------------
------ ----------------
--- -----------
--- ----------------------------
--- ----------------------------
--- ----------------------------
-----
--------
------ ----------------
--- -----------
--- ----------- ---------------------------------
--- ----------- ---------------------------------
--- ----------- ---------------------------------
-----
--- -----------
--- ----------- ---------------------------------
--- ----------- ---------------------------------
--- ----------- ---------------------------------
-----
--------
--------在此示例代码中，我们使用了 role="table" 和 role="rowgroup" 属性来标记表格。我们还使用了 role="columnheader" 和 role="cell" 属性来为表头和单元格添加角色。
4. 添加键盘和焦点模式
除了屏幕阅读器，一些用户可能需要使用键盘或者通过在不同元素之间切换来浏览网页。为此，我们需要为表格添加一个焦点模式。我们还应该允许用户使用键盘上的箭头键在不同的单元格之间移动。
以下代码演示如何使用 jQuery 来为表格添加一个焦点模式和键盘支持：
-- -------------------- ---- -------
---------------------------- -
------------------------ --------------- -
--- ----------- - ------
--- ------- - ------------- -- ------------
------ --------- -
---- ---
-- ----
----------- - ----------------------
------
---- ---
-- ----
----------- - ---------------------------------------------------------------------
------
---- ---
-- ----
----------- - ----------------------
------
---- ---
-- ----
----------- - ---------------------------------------------------------------------
------
-
-- ------------------- - - -- ------------------------------- --- ----- -
-----------------------
-----------------------
-
---
---通过使用这个代码，用户可以在表格中使用箭头键导航。
结论
通过使用 ARIA 和 jQuery，我们可以使数据表格能够更好地满足不同能力水平的人的需求。 本文中已经对标记、注释、角色和键盘焦点进行了详细的讲解，并且为读者提供了一个实例。现在，你可以尝试在你的网站中实现一个无障碍数据表格了。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677235106d66e0f9aad5abb9