无障碍性是指让所有人都能够使用网站或应用程序，包括那些有视觉、听力、身体或认知障碍的人群。在网页设计和开发中，有障碍的人群应该是我们重点考虑的用户群体之一。旅游网站对于很多人来说是一个日常的需求，而这些用户可能具有各种障碍。今天我们就来探讨一下如何设计和开发一个无障碍性之旅选项卡。
什么是选项卡？
选项卡是一种常见的交互设计模式，它可以让用户在一组相关数据或信息中进行导航和选择。在旅游网站中，我们通常会使用选项卡来提供不同类型的旅游产品，例如度假村、游轮、旅行团等等。
构建无障碍性选项卡的重要性
对于许多人来说，这个套件的可用性是很重要的，因此开发无障碍的选项卡对于网页设计师和开发人员是有意义的。做到这一点，可以为所有人提供平等的访问和使用体验，让所有用户都能够浏览、选择和购买他们所需的旅游产品。
HTML
在开始编写代码之前，我们首先需要了解一下必要的 HTML 元素和属性，以构建一个具有无障碍性的选项卡组件。以下是我们需要使用的元素和属性：
role属性：这个属性告诉网页浏览器该元素的角色，例如选项卡、标签页、面板等等。在这个例子里，我们需要使用的是role="tablist"和role="tab"，它们分别用于选项卡列表和单个选项卡。aria-selected属性：这个属性用于指示用户是否选择了该选项卡。当选项卡被激活时，aria-selected属性设置为true，否则设置为false。aria-controls属性：这个属性用于指定由选项卡控制的相应面板的 ID。
下面是一个基本的 HTML 模板，包含了所有必要的 HTML 元素和属性：
---- --------------- ------- ---------- -------------------- -------------------------- ---------- ------- ---------- --------------------- -------------------------- ---------- ------- ---------- --------------------- -------------------------- ---------- ------ ---- ------------ -------- - -------- ------ ---- ----------- ------------------- -------- - -------- ------ ---- ----------- ------------------- -------- - -------- ------
在这个例子中，我们使用了 button 元素作为选项卡，这是一个更好的选择，因为它不需要额外的 JavaScript 代码即可使键盘操作和焦点处理更加准确、可靠。
CSS
接下来，我们需要使用 CSS 样式来美化选项卡和面板，以提高用户体验和可读性。以下是一个基本的 CSS 样式表：
-- ------ -- -------------------- - -------- ----- - -- ------ -- ----------------------------------------- - -------- ------ - -- ----- -- ------------------ - ----------- -------- ------- --- ----- ----- -------- ----- ------------- ---- ------- -------- - -- ------- -- ---------------------------------------- - ----------- ----- -------------- --- ----- ----- - -- ---------- -- ---------------------------------------- ---- - ------------ -------- - ---------------------------------------- ---------- - -------- -- -- ------------ -- -
这个 CSS 样式表主要用于控制选项卡和面板的外观和行为。第一个规则隐藏所有的面板元素。第二个规则会显示通过 aria-hidden 属性指定为 false 的面板元素。接下来，我们设置了选项卡的外观和激活的选项卡的外观，以便用户知道哪个选项卡是当前激活的选项卡。最后，我们添加了一些辅助标注，以告诉用户他们所选的选项卡。
JavaScript
最后，我们需要编写一些 JavaScript 代码来实现选项卡的交互功能。以下是一个基本的 JavaScript 代码模板，该模板实现了以下功能：
当选项卡被点击时，将其设置为激活状态，并隐藏其他选项卡和面板。
当用户使用键盘导航时，允许用户使用键盘控制选项卡。
--- ------- - -------------------------------------------------
--- -----
--- -------
-----------------
-------- ---------------- -
---- - ------------------------------------------
------ - -----------------------------------------------
-
--- -- - -- - - ------------ ---- -
----------------
-
-------- ------------------- -
------------------------------------- ---------- - -------------------------- ---
--------------------------------------- ---------- - --------------------------- ------- ---
----------------- - ------
-
-------- ------------------------- -
--- --- - ------------
---------------- -------
-
-------- --------------------------- ------ -
--- --- - --------------
------ ----- -
---- ---
------------------------ ------
------
---- ---
-------------- - ---
------
---- ---
-------------- - ---
------
---- ---
-------------------- - ---
------
---- ---
------------
------
--------
------
-
-
-------- ---------------- --------- -
--- --------- - -------------------------------------------------
-- ----------- -
--------------------------------------- ---------
-
--------------------------------- --------
--- ----- - --------------------
--- -- - -- - - -------------- ---- -
-- -- -- ------ -
------------------------------------- ---------
-
---- -
------------------------------------- --------
-
-
-- ---------- -
------------
-
-
-------- --------------- -
--------------------
-
-------- ----------------------- -
--- - - --
----- -------- - ------------------------------- -
----
-
------ --
-这个 JavaScript 代码主要负责处理选项卡组件的交互行为。我们首先使用 querySelectorAll() 方法获取选项卡和面板元素，然后使用 generateArrays() 函数将它们转换为数组，以便我们可以遍历和操作它们。接下来，我们使用 addListeners() 函数为每个选项卡添加单击和按键事件。单击事件将调用 clickEventListener() 函数，该函数激活选项卡并隐藏其他面板。按键事件将调用 keydownEventListener() 函数，该函数根据按键代码执行相应的操作。
结论
无障碍性是网页设计和开发的一个重要方面，因为它可以提供一个平等的访问和使用体验，同时为不同障碍程度的人们提供便利。本文提供了一个无障碍性选项卡组件的基本示例，它可以帮助设计师和开发人员为旅游网站创建无障碍的选项卡。借此机会提醒设计师们，请在为新网站和新应用程序设计和开发之前，始终考虑无障碍性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67386edc317fbffedf1075ed