无障碍是指为面向全体人群的使用而设计，不论是否有残障，所有的用户均可以很好地使用该产品。在前端开发中，无障碍性已成为非常重要的一环。无障碍的选择列表也会提升用户体验，使您的网站更符合无障碍性要求。本教程将引导你如何创建无障碍选择列表，让你的网站更加易于使用和无障碍。
HTML 结构
首先，我们需要创建一个基础的 HTML 结构。以下 HTML 代码片段演示了表单的结构，其中包含了一个标签为选择列表的 select 元素，以及一些包含选项的option 元素。
-- -------------------- ---- -------
------
------ ------------------------------------------
------- ---------------------- ------------------
------------ ----- -------------
------- ---------- - ----------- ------------
------- ----------- -------- -----------
------- -------------------- ---------------------- ------------
---------
-------label 元素与 select 元素的 id 属性相同，可以使屏幕阅读器说出与 select 元素关联的标签。这样，用户使用屏幕阅读器时，将知道应该选择哪一个项目。
CSS 样式
接下来，我们需要通过 CSS 样式，改善选择列表的可访问性。以下 CSS 样式将为您展示 一些改善无障碍性的技巧：
-- -------------------- ---- ------- ------ - ------ ----- -------- ----- ---------- ----- ------------ ------ ----------- ------- --- ----- ----- -------------- ---- ----------------- ----- - -- ------------ -- ------------------ - -------- ----- - ------------ - -------- ----- ------- --- ----- -------- -- ----------------------- ----------- --- --- --- --- ---------------- -------- ---- - ------ ------ - -------- ----- ---------- ----- ------------ ---- ----------------- ----- ------ -------- ------- --- ----- -------- - ------ -------------- - ----------------- -------- ------ ----- -
您可以根据自己的需求，自由地更改样式。但在下面中会解释这些 CSS 样式。
调整样式
width调整选择列表的宽度。padding调整元素内部填充量。font-size调整字体大小。font-family调整字体系列。border调整边框样式。border-radius将边框角线圆滑，使其更加美观。background-color调整选择列表的背景颜色。
移除蓝色边框
当 select 元素处于激活状态（即在选择项目时）时，浏览器自动添加了一条蓝色边框。要删除这个边框，我们在 CSS 中使用了 outline: none 属性。
去除 IE 的箭头符号
在 Internet Explorer 中，select 元素将其自定义展开按钮称为“arrow”。::-ms-expand 伪类帮助我们更改 IE 中的箭头或按钮，添加 display: none 属性就可以过剩了 ('gone')。
调整选择列表的背景颜色
可以通过 CSS 的 background-color 属性来调整选择列表的背景颜色。
调整选项的样式
为了改善选项的可读性，我们可以自定义option 元素的样式。主要就是给选项添加 padding 属性。在这个例子里，我们就添加了 15 像素的 padding 属性。
高亮选中的项目
最后，调整当前选中项目的样式。通过为选中的选项设置 background-color 和 color 属性可以调整其颜色。要向选中的项目提供视觉意味，我们需要添加一个 checked 类。
完整 CSS 样式
-- -------------------- ---- ------- ------ - ------ ----- -------- ----- ---------- ----- ------------ ------ ----------- ------- --- ----- ----- -------------- ---- ----------------- ----- - -- ------------ -- ------------------ - -------- ----- - ------------ - -------- ----- ------- --- ----- -------- -- ----------------------- ----------- --- --- --- --- ---------------- -------- ---- - ------ ------ - -------- ----- ---------- ----- ------------ ---- ----------------- ----- ------ -------- ------- --- ----- -------- - ------ -------------- - ----------------- -------- ------ ----- -
结论
现在你已经学会如何制作无障碍选择列表， 根据此模板可以在更多前端项目中使用。要将可访问性的标准增加到您的下一个完整的 Web 项目中，请确保正确使用相应的 HTML 标签；当然，还需要遵循一些最佳实践，以使您的界面具有更好的可读性和易用性，具有更高的无障碍性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f28cffa44b36ee5766550b