CSS 是前端开发中必不可少的一项技术，主要用于样式控制和页面布局。在页面设计中，CSS 常被用来美化页面以及改善用户体验。除此之外，CSS 还可以帮助我们实现更加无障碍友好的页面，并为需要辅助功能的用户提供更好的体验。
1. 无障碍是什么？
无障碍是指为所有人开放的设计，包括身体上、听力上和视力上的残疾人，老年人以及其他需要辅助功能的人群。在页面设计中，无障碍表现为设计能够在任何场景下都可以正常使用，而不因为任何人的身体限制而受限制。
2. CSS 如何决定无障碍？
CSS 可以通过控制页面的外观和布局来决定无障碍。对于辅助功能的用户来说，CSS 可以帮助他们更容易地阅读和导航页面。以下是一些 CSS 属性与无障碍的关联：
2.1. 颜色对比度（color-contrast）
对于视觉上有障碍的用户来说，颜色对比度非常重要。如果页面上的文本和背景颜色对比不明显，用户将很难阅读页面上的内容。使用适当的颜色和对比度，可以帮助页面更容易地被辅助功能的用户使用。
以下示例代码展示如何使用 CSS 属性 color 和 background-color 来改变文本和背景颜色，很容易调整颜色对比度：
-- -------------------- ---- ------- ---- - ------ ----- ----------------- ----- - --- --- --- --- --- -- - ------ ----- - - - ------ -------- -
2.2. 字体大小（font-size）
对于视觉上有困难的用户和老年人，字体大小和行距非常重要。通过使用 CSS 属性 font-size 和 line-height，可以增加页面上文本的可读性。同样，使用相对尺寸（如 em 或 rem）而不是绝对尺寸（如 px）可以使文本更具灵活性。
以下示例代码展示如何使用 CSS 属性 font-size 和 line-height 来设定文本字体和行距：
-- -------------------- ---- ------- ---- - ---------- ----- ------------ ---- - -- - ---------- ---- - -- - ---------- ------ - -- - ---------- ------- - -- - ---------- ---- - -- - ---------- ------ - -- - ---------- ------ -
2.3. 聚焦效果（focus）
对于键盘用户来说，聚焦效果非常重要。在使用键盘导航页面时，聚焦效果可以帮助他们更容易地知道他们当前的位置。键盘用户可以使用 Tab 键和 Shift+Tab 键在页面上导航，并在各个元素之间切换。
以下示例代码展示如何在使用键盘导航时添加聚焦效果：
a:focus, button:focus, input:focus, textarea:focus {
outline: 3px solid #0077dd;
outline-offset: 2px;
}2.4. 隐藏内容（hidden-content）
有时候，我们需要隐藏一些内容，以便提高页面的可访问性。例如，在移动设备上，我们可能需要隐藏侧边栏，以便更好地适应小屏幕。
以下示例代码展示如何使用 CSS 属性 display 和 visibility 来隐藏元素：
-- -------------------- ---- ------- -- ---- -- ----- - -------- ----- - -- --------- -- ---------- - ----------- ------- -
3. 总结
CSS 不仅用于页面美化和排版，还可以帮助我们实现更加无障碍友好的页面。通过控制页面的外观和布局，我们可以为需要辅助功能的用户提供更好的体验，使他们能够更轻松地阅读和导航页面。
我们应该尽可能地使用无障碍设计来创造真正的 Web 普及。在无障碍设计上投入时间和资源，将为所有人带来更好的体验，同时让我们更好地了解如何为真正的 Web 程序编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9281b48841e9894570d3b