随着互联网的迅速发展，无障碍性设计越来越受到关注。在前端开发中，设计无障碍性的 TabPanel 和 TabPage 是至关重要的一步。本文将介绍如何使用 aria-controls 和 aria-labelledby 来设计无障碍性的 TabPanel 和 TabPage，以及如何获得更好的无障碍性效果。
什么是 TabPanel 和 TabPage？
TabPanel 和 TabPage 是一种常见的界面设计模式，用户可以通过 Tab 标签页进行页面的切换。TabPanel 是 Tab 标签页的集合容器，而 TabPage 是单个标签页的容器。
无障碍性设计的重要性
对于有视觉障碍的用户，无法看到标签页的外观，只能通过屏幕阅读器获取内容。因此，设计无障碍性 TabPanel 和 TabPage 是至关重要的，以确保阅读器能够正常地识别标签页，并向用户提供正确的信息。
如何设计无障碍性 TabPanel 和 TabPage？
- 使用 aria-controls
aria-controls 属性指定当前 TabPage 所属的 TabPanel，以及 TabPanel 中与其相关的标签页 ID 数组。这个属性可以让屏幕阅读器识别页面的关联性，并正确地报告相关的信息。
-- -------------------- ---- -------
---- ------------------
--- ------------ ---------------
--- --------------------
-- ------------ ------------- ----------- ---------- -------------------- ------------------------ -----
-----
--- --------------------
-- ------------ ------------- ----------- ---------- --------------------- ------------------------ -----
-----
--- --------------------
-- ------------ ------------- ----------- ---------- --------------------- ------------------------ -----
-----
-----
---- --------- ---------------- --------------- ---------------------------
------- - ------------
-------- ----- ----- --- ---- ----------- ----------- ----- ---- --- ------ ---- -------- --------- --------
------
---- --------- ---------------- --------------- -------------------------- -------
------- - ------------
------------- ------- --------- --- --------- --------- ------------ -------- ------ ----- ------ -- -- ------- --------- ---------- --- ----------- ----- --------- ----- ----- ---------
------
---- --------- ---------------- --------------- -------------------------- -------
------- - ------------
------ ------ ----- ------- ---- ------- --------- --- ------- ----- ----- ------------ ----- ---------------
------
------上面的示例代码中，aria-controls 属性被用于 TabPanel 中与相关 TabPage 的 ID 数组。同时，Tab 标签页中也包含 aria-selected 属性，以标记当前选中的标签页。而 TabPage 中则包含 aria-labelledby 属性，指向与其相关联的 Tab 标签的 ID。
- 使用 aria-labelledby
对于屏幕阅读器用户来说，TabPanel 中的 Tab 标签与标签页是两个不同的元素。可以通过使用 aria-labelledby 属性将 Tab 标签与相应的 TabPage 关联起来，这样屏幕阅读器可以正确地报告关联信息。
总结
设计无障碍性 TabPanel 和 TabPage 是一个重要的前端任务，为无障碍性用户提供良好的体验。使用 aria-controls 和 aria-labelledby 属性可以有效地改善屏幕阅读器的识别能力，并使标签页更为易于实现。
上述示例代码可以帮助您快速了解如何在您的前端项目中实现无障碍性 TabPanel 和 TabPage。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eab1fbf6b2d6eab3583578