随着科技的不断发展，我们的生活中越来越依赖于互联网，而 Web 网页已经成为我们获取信息、交流沟通的重要手段之一。但是，在 Web 网页设计中，无障碍（Accessibility）Web 缺乏关注，以至于很多用户无法享受到 Web 带来的便利。为了让 Web 网页更加贴近用户，人性化设计应运而生，无障碍 Web 技术也成为前端类开发者必须掌握的一项技能。
什么是无障碍 Web 设计
无障碍 Web 设计即让 Web 网页能够让所有人获取信息和使用，包括身体残障、认知残障、年龄、性别等不同群体。无障碍设计的目的在于让所有人都能获得公平的机会，不受任何限制。无障碍 Web 设计不仅仅是个道德或广告问题，也是设计团队的执行力的体现，只有考虑到无障碍，设计的 Web 才能更加人性化。
无障碍 Web 的前沿技术
语义化 HTML
语义化 HTML 是无障碍设计最重要的一项技术，它是 Web 网页中的内容与结构分离的基础。语义化能让页面内容更加清晰，而且让屏幕阅读器在解析时更容易理解和读取，进而输出到盲人用户的耳朵中。语义化有很多常见标签，比如 h1~h6 、 nav 、 article 等，这些标签都有自己的含义，设计者应该在正确的场景下使用。
下面举个例子，比较一下语义化标签与普通标签的区别：
// javascriptcn.com 代码示例
<!-- 普通结构 -->
<div>
<div>导航栏</div>
<div>内容</div>
<div>脚注</div>
</div>
<!-- 语义化结构 -->
<header>
<nav>导航栏</nav>
</header>
<main>
<article>内容</article>
</main>
<footer>脚注</footer>ARIA 属性
ARIA（Accessible Rich Internet Applications）属性是 HTML5 的扩展属性。它是为了类似表格、列表、菜单、输入框等 Web 组件，增加管理和策略集，使组件能在支持 ARIA 的浏览器和辅助设备中更容易地通讯，而不考虑浏览器或设备本身的语言。ARIA 技术结合 HTML 能提供更好的可访问性，比如 aria-label 属性，帮助屏幕阅读器读取缺少标签的图片，使用户更容易理解。
<button aria-label="播放视频">
<img src="play.svg" alt="播放视频">
</button>颜色对比度
设计师应该思考网站的颜色对比度，因为颜色对于人的感情和触觉都是很重要的。如果网页的颜色对比度很低，对于肉眼视觉受限的用户就会很困难，这样的用户群体在中国占比 10-12%。所以，设计师要考虑鲜明对比的颜色，或者通过表单或篮球文本标记来增强可访问性。
键盘导航
有些用户并不是通过鼠标来点击页面，他们需要通过键盘快捷方式，比如 Tab 键或者回车键来进行操作。所以，在开发 Web 时，应该考虑到这些用户，提高网站的键盘导航性。比如，当用户聚焦到某个元素时，可以提供一个聚焦反馈效果，需要按回车键时，按下“Enter”通常会执行有关元素的动作。
自适应布局
自适应布局可以让用户在任何设备上都能够获取网页信息和操作。设计者应该检查布局的宽度，并确保其在桌面、平板和移动端的设备上都能够正常表现。其次，因为很多人无法使用鼠标，设计者约定需要提高导航和按钮的尺寸，以确保用户可以轻松点击。
总结
通过上述介绍可以得出，无障碍设计并不是空谈，而是展现出了我们解决用户困难的能力，尤其是针对无障碍人群。如今，让所有人都能够获得所需的公平机会、更自由地浏览网页的诉求越来越强烈，所以人性化设计的无障碍 Web 技术也越来越受到关注。作为 Web 开发者，我们需要仔细思考这些因素，开始使用这些技术，感谢让更多人体验无障碍的 Web 网页。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653db56e7d4982a6eb76d7e7