在网站中，选项卡是一种常见的导航方式。但是，对于使用辅助技术的人来说，选项卡可能会带来一些无障碍问题。在这篇文章中，我们将介绍如何使用 CSS 和 JavaScript 创建带有“无障碍”特性的选项卡。
为什么需要无障碍选项卡？
选项卡可以帮助用户浏览和访问网站上的不同内容。但是，对于使用屏幕阅读器、放大器或其他辅助技术的人来说，选项卡可能会带来一些无障碍问题。如果选项卡没有正确的标记和结构，辅助技术可能无法识别它们，并且可能会导致用户无法访问选项卡中的内容。
因此，我们需要创建带有“无障碍”特性的选项卡，以确保所有用户都可以访问它们。
如何创建无障碍选项卡？
HTML 结构
在创建选项卡之前，我们需要考虑正确的 HTML 结构。选项卡应该使用语义化的 HTML 标记，例如 <ul> 和 <li>。每个选项卡标签都应该包含一个唯一的 ID，并且与选项卡内容的容器相对应。
以下是一个基本的 HTML 结构：
-- -------------------- ---- -------
---- -------------
--- ---------------
--- --------------------
-- ------------ ---------- -------------------- ----------------- -----
-----
--- --------------------
-- ------------ ---------- -------------------- ----------------- -----
-----
--- --------------------
-- ------------ ---------- -------------------- ----------------- -----
-----
-----
---- --------------- -------------------------- ----------
------ - ------- ---- ---------
------
---- --------------- -------------------------- ----------
------ - ------- ---- ---------
------
---- --------------- -------------------------- ----------
------ - ------- ---- ---------
------
------在上面的代码中，我们使用了 <ul> 和 <li> 标记来创建选项卡标签。每个标签都有一个唯一的 ID，并且与选项卡内容的容器相对应。我们还为每个选项卡标签添加了 role="presentation" 属性，以将其标记为选项卡标签。
每个选项卡标签中的链接使用了 role="tab" 属性，并且与选项卡内容的容器相对应。我们还为每个链接添加了 aria-controls 属性，以指示它们控制哪个选项卡内容。为了使链接与选项卡内容相关联，我们还为每个链接添加了一个唯一的 ID。
选项卡内容的容器使用了 role="tabpanel" 属性，并且与选项卡标签中的链接相对应。我们还为每个容器添加了 aria-labelledby 属性，以指示它们由哪个选项卡标签控制。
CSS 样式
接下来，我们需要添加一些 CSS 样式来创建选项卡的外观和交互。以下是一个基本的 CSS 样式：
-- -------------------- ---- ------- ----- - ------- --- ----- ----- -------- ----- - ----- -- - ----------- ----- ------- -- -------- -- - ----- -- - -------- ------------- ------------- ----- - ----- ------------- - ------------- -- - ----- - - ----------------- ----- ------- --- ----- ----- ------ ----- -------- ------ -------- ----- ---------------- ----- - ----- ------- - ----------------- ----- -------- ----- - ----- -------------------- - -------- ----- - ----- --------------------------- - -------- ------ -
在上面的代码中，我们为选项卡容器添加了一些基本的样式，例如边框和内边距。我们还为选项卡标签的 <ul> 元素添加了一些样式，例如去除默认列表样式和设置间距。
每个选项卡标签的链接使用了 display: block 属性，以使其占据整个选项卡标签的空间。我们还为链接添加了一些基本的样式，例如背景颜色、边框和内边距。
最后，我们使用 display: none 属性将所有选项卡内容隐藏起来。当用户点击选项卡标签时，我们将添加一个 .active 类来显示相应的选项卡内容。
JavaScript 交互
最后，我们需要添加一些 JavaScript 代码来处理选项卡的交互。以下是一个基本的 JavaScript 代码：
-- -------------------- ---- -------
--- ---- - -------------------------------- ----
--- ---- - - -- - - ------------ ---- -
--------------------------------- ----------- -
-------------------
--- -------- - --------------------------------------------------
--- ----- - ------------------------
----------------------------- -------------------------------------
----------------------------------------
------------------------------------------- - ----- - ------------------------------
---------------------------------
---
-在上面的代码中，我们首先选择所有选项卡标签的链接，并为每个链接添加一个 click 事件监听器。当用户点击链接时，我们使用 preventDefault() 方法来阻止链接的默认行为。
接下来，我们获取与链接相关联的选项卡内容的容器，并将其添加一个 .active 类。我们还获取链接的 ID，并将其添加到与选项卡内容相关联的容器的 aria-labelledby 属性中。
最后，我们将删除所有选项卡标签的 .active 类，并将其添加到当前选项卡标签的父级元素中。我们还将删除所有选项卡内容的 .active 类，并将其添加到与当前选项卡标签相关联的选项卡内容容器中。
结论
使用上述 HTML、CSS 和 JavaScript 代码，我们可以创建一个带有“无障碍”特性的选项卡。这将确保所有用户都可以访问选项卡中的内容，而不管他们是否使用辅助技术。
我们希望本文能够帮助您了解如何创建无障碍选项卡，并且能够应用这些技巧来改进您的网站。如果您有任何问题或疑问，请随时在下面的评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753f4e31b963fe9cc4b3e23