选项卡，或称为标签页，是一种经典的前端组件，广泛应用于导航栏、信息展示等场景中。然而，对于视觉障碍人士和键盘操作者而言，使用选项卡可能存在很多问题，例如无法确定当前选中的选项卡，无法通过键盘操作切换选项卡等。因此，让选项卡组件具备良好的可访问性是非常必要的。本文将介绍如何通过使用 ARIA（Accessible Rich Internet Applications）属性，使得选项卡组件更具可访问性。
ARIA 是什么？
ARIA 是由 W3C 制定的一组用于增强 Web 应用程序的可访问性的技术规范。ARIA 的目标是为开发人员提供一组可访问性相关的语义化标准，以方便辅助技术（例如屏幕阅读器、键盘操作工具等）更好地理解 Web 页面的结构和交互方式。
ARIA 通过以下几个方面来增强 Web 应用程序的可访问性：
- 角色与状态：通过定义角色和状态，描述特定的 UI 组件在 Web 界面上的行为和特点。
- 属性：增加可访问性相关的属性，如描述文本、标题、标签等。
- 事件：定义交互行为的事件，如键盘事件、鼠标事件等。
在本文中，我们将会使用 ARIA 角色、状态和属性来增强选项卡组件的可访问性。
实现可访问的选项卡组件
首先，我们来设计一个简单的选项卡组件。该组件由多个选项卡按钮和对应的选项卡内容组成。每次只能显示一个选项卡内容，其他选项卡内容则隐藏。
-- -------------------- ---- ------- ----- --------------------- --------------------- --------------------- ------ ----- ----------------- ----------------- ----------------- ------
下面，我们将使用 ARIA 角色、状态和属性来增强该组件的可访问性。我们将为每个选项卡按钮和选项卡内容定义适当的 ARIA 角色和属性。
定义选项卡按钮
首先，我们需要为选项卡按钮添加角色 tab。使用 role 属性对按钮元素进行标注。
同时，我们可以使用 aria-selected 属性来标记当前选中的选项卡按钮。对于未选中的按钮，aria-selected 属性应该设置为 false。
<div role="tablist"> <button role="tab" aria-selected="true">选项卡一</button> <button role="tab" aria-selected="false">选项卡二</button> <button role="tab" aria-selected="false">选项卡三</button> </div>
定义选项卡内容
接下来，我们需要为选项卡内容添加角色 tabpanel。使用 role 属性对内容元素进行标注。
同时，我们需要为选项卡按钮和选项卡内容建立关联。使用 aria-controls 属性指定选项卡内容的 id 值。
-- -------------------- ---- ------- ---- ---------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------ ---- --------------- ------- ---------- -------------------- ---------------------------------- ------- ---------- --------------------- ---------------------------------- ------- ---------- --------------------- ---------------------------------- ------
安排焦点和键盘操作
最后，我们需要为选项卡组件安排焦点和键盘操作。我们需要为选项卡按钮添加 tabindex 属性，使其可以通过键盘切换到。使用 tabindex 属性指定选项卡按钮在焦点顺序中的顺序。
同时，我们需要使用 aria-activedescendant 属性来指定当前选中的按钮。对于未选中的按钮，该属性应该省略。
-- -------------------- ---- ------- ---- ---------------- ---- --------- ------------------------- ---- --------- -------------------------- ---- --------- -------------------------- ------ ---- -------------- ----------------------------- ------- ---------- -------------------- -------------------- -------------------------- ------- ---------- --------------------- -------------------- --------------------------- ------- ---------- --------------------- -------------------- --------------------------- ------
除了上述 ARIA 属性之外，我们还可以使用 aria-labelledby 属性描述选项卡按钮的标签，在某些情况下可以提高可访问性。另外，我们还可以通过键盘事件监听，处理键盘切换选项卡的操作。这些内容可以在具体实现中考虑。
总结
通过 ARIA，我们可以使用角色、状态和属性来描述选项卡组件的结构和交互方式，从而增强其可访问性。同时，我们也需要关注键盘操作和焦点顺序等方面，确保组件在不同环境下都具有正确的行为。通过合理使用 ARIA，我们可以让 Web 应用程序更加健壮和友好，为更多的用户提供便利和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503bae395b1f8cacd0811e4