许多人都会想到 Web 无障碍（Accessibility）的开发是优化 HTML 标签，如增加语义化标签、带名字和角色的表单元素等等，但是仅仅只做到这些仍有许多人因为使用 Web 的问题而无法得到完整的用户体验。这就强调了另一个重要的因素：CSS。
在本文中，我们将会讨论一些 CSS 技巧，它们能够提高你的 Web 无障碍性开发，让你的 Web 应用程序更加易于访问、反应迅速，同时给出实例代码和详细的解释。
1. 只使用 CSS 去外观化内容
CSS 是用来给你的站点添加样式和布局的，但无论如何都不应该用来更改文本的意义。只有改变外观应该意味着在不同设备之间进行优化处理的方式。
下面是一个错误的例子：
<span style="font-size: 2em;">重要的事情</span>
使用 CSS 可以这样实现：
<span class="important-text">重要的事情</span>
.important-text {
font-size: 2em;
}2. 明晰开发者的意图
为你的 HTML 元素提供语义化 class 和 ID 是让你的 CSS 更明晰看起来的一种方式。它可以让喜欢阅读代码的开发者理解你 CSS 的表达意图，从而更容易地修改或继承你的 CSS 样式。
下面是一个例子：
<div id="blogpost"> <h2 class="blogpost-title">标题</h2> <p class="blogpost-description">内容摘要</p> <a class="blogpost-readmore" href="#">阅读更多</a> </div>
-- -------------------- ---- ------- --------------- - ---------- ---- - --------------------- - ---------- ------ - ------------------ - ---------- ------ -
3. 使用较少的动画和滚动条
滚动条和动画可以使你的 Web 应用程序看起来精美，但如果滚动条和动画过长或者时刻出现的话，会对用户造成恼人的分心，问题最终会影响到 Web 应用程序的使用性。
在下面的代码中，我们将滚动速度调慢为 0.2s，并通过 CSS 动画实现了简化的效果：
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
.smooth-scroll {
transition: all 0.2s ease;
}4. 打破复杂表格的头疼问题
大而复杂的表格会让一些人脑海疲惫，页面上滑动到顶部的时候更是让人头疼。通过 CSS 可以轻松打破复杂的表格结构，使其更易于使用。
如下面的代码所示，我们通过为表格列定义 min-width 和 max-width 来使该表格更具可读性，并使表格内容不会重叠或移动：
-- -------------------- ---- ------- ----- --------------- ----- -------------- - ---------- ------ - ----- ---------------- ----- --------------- - ---------- ------ -
5. 增加对焦状态
在向页面添加对焦状态时，可以对用户的界面反应速度得到加强，帮助他们更快地完成必要的任务。
在下面的例子中，我们可以通过为被选中的对象添加 focus 样式，使该元素更加醒目、可观察，并且具有更多交互反馈：
input[type='text']:focus {
box-shadow: 0 0 0 2px blue;
}结论 CSS 技巧对于 Web 无障碍（Accessibility）的开发是十分必要的。通过这篇文章中的示例，希望你能掌握有助于 Web 应用程序更好使用的 CSS 技巧。无论你是开发人员还是设计师，开发可访问的 Web 应用程序都应该是你的首要任务，这样可以更大地激发你的创造力，并得到更多的用户关注。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef5ac26fbf9601972ed95f