随着无障碍性（Accessibility）的重要性日益凸显，越来越多的网站和应用程序开始关注如何提高自己的无障碍性。表格作为页面中常见的信息呈现方式，在无障碍性设计中也必须重视。下面我们将介绍如何通过 Aria 和 HTML 实现无障碍性表格。
Aria 是什么？
Aria（Accessibility Rich Internet Application）是一种语言规范，旨在帮助开发人员提高 Web 应用程序中的无障碍性。通过使用 Aria 规范，开发人员能够通过添加 HTML 属性和角色，提供有关特定元素的更多信息，从而使这些元素更易于理解和使用。
对于表格，Aria 规范提供了以下两种角色：
role="table"
将该属性添加到 <table> 元素上，即可指示该元素为表格。这将通知有视觉障碍的用户和辅助技术，这是一个表格，它的布局和功能应该与其他表格相同。
<table role="table"> <!-- 表格内容 --> </table>
role="row", role="columnheader" 和 role="cell"
将这些属性添加到 <tr>、<th> 和 <td> 元素上，分别表示表格行、表头单元格和数据单元格。这些属性可以让辅助技术更好地了解表格的结构并提供更好的访问方式。
-- -------------------- ---- -------
------ -------------
-------
----
--- ------------------- -------------------
--- ------------------- -------------------
--- ------------------- -------------------
-----
--------
-------
--- -----------
--- -------------------
--- -------------------
--- ------------------
-----
--- -----------
--- -------------------
--- -------------------
--- ------------------
-----
--------
--------在上述示例代码中，我们给表格、表头行、数据行和各个单元格添加了不同的角色属性，以提供更详细的表格结构信息。
HTML 中的无障碍性技术
除了 Aria 规范之外，HTML 本身也提供了一些无障碍性技术，用于为有视觉障碍的用户提供更好的访问体验。
scope 属性
scope 属性指示表格中的单元格所属的行或列。它告诉辅助技术该单元格是行头单元格、列头单元格还是数据单元格，以便更好地组织结构和呈现内容。
-- -------------------- ---- -------
-------
-------
----
--- -------------------
--- -------------------
--- -------------------
-----
--------
-------
----
--- -------------------
-----------
----------
-----
----
--- -------------------
-----------
----------
-----
--------
--------在上述示例代码中，我们使用 scope 属性来指示表格各个单元格所属的行或列。这可以让辅助技术更好地了解表格的结构，并为有视觉障碍的用户提供更好的访问体验。
id 和 headers 属性
id 和 headers 属性一起使用，可以让表头单元格和数据单元格建立联系。这告诉辅助技术该数据单元格属于哪个表头单元格。在一些情况下，单独使用 scope 属性可能无法满足表格结构的要求，这时候 id 和 headers 属性可以派上用场。
-- -------------------- ---- -------
-------
-------
----
--- -----------------
--- ----------------
--- -------------------
-----
--------
-------
----
--- ----------------------
--- ---------------------
--- -----------------------
-----
----
--- ----------------------
--- ---------------------
--- -----------------------
-----
--------
--------在上述示例代码中，我们为表头单元格和数据单元格分别添加了 id 和 headers 属性，以建立联系。这可以让辅助技术更好地了解表格的结构，并为有视觉障碍的用户提供更好的访问体验。
总结
通过合理使用 Aria 规范和 HTML 本身提供的无障碍性技术，我们可以实现更具有可访问性的表格。开发人员应该时刻牢记无障碍性设计的重要性，并在设计和实现过程中加以重视。
示例代码：https://codepen.io/jaychen-github/pen/ZELjdjL
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f54018f6b2d6eab3df18c6