随着智能手机的广泛普及，越来越多的人使用手机 APP 来满足日常生活中的需求。而在人们之中，有一些人因为视力、听力、偏振色盲等问题，需要使用一些辅助工具才能顺畅地使用 APP。这时候，如果 APP 没有考虑无障碍性，就会给他们带来诸多困难。因此，改善 APP 的无障碍性，是提升 APP 可用性的重要手段之一。
什么是无障碍技术？
无障碍技术（Accessibility）是一种让所有用户都能够等同地使用产品或服务的技术。它主要涉及到视觉、听力、运动能力、认知能力等多方面。其中，我们最熟悉的是 Web Accessibility（Web 无障碍），即能让视力障碍、听力障碍、运动障碍和认知障碍的人能够使用或操作 Web 内容的技术。
无障碍技术有三个关键方面：
- Perceivable（可感知性）：让所有用户都能够感知和察觉 Web 内容以及界面组件。
- Operable（可操纵性）：让所有用户都能够操作 Web 内容以及界面组件。
- Understandable（可理解性）：让所有用户都能够理解 Web 内容以及界面组件。
如何为 APP 添加无障碍功能？
文本与颜色
为了让视觉障碍者能够理解 APP 内容，我们应该始终使用足够大的字体，一般来说，字体大小应该不小于 14px。同时，我们还应该确保颜色对比度足够明显，以满足偏振色盲者的需求。可以使用以下一行代码来检查颜色对比度：
background-color: #333333; color: #dddddd;
在进行颜色、字号等样式设计时，需要采用高对比度和简洁明了的色彩搭配和排版，比如浅色底色和深色字体的组合。
图片
对于视觉障碍者来说，图片本身是无意义的，因此我们应该提供给他们在图片中呈现的信息。比如：
<img src="./img/logo.png" alt="公司 Logo，绘制了两只手指在握手" />
当图片无法加载时，alt 属性中的文本将被展示。
视频与音频
对于听力障碍者来说，视频和音频也充斥着无意义的数据。因此，我们需要提供这些文件中的文本说明。
比如，我们可以采用 WebVTT 格式来为视频和音频的字幕提供文本：
-- -------------------- ---- ------- ------ - ------------ --- ------------ ------ ------- -- --- ------------- - ------------ --- ------------ ----- -- ---- ---- ----- ------------- ---------- - ------------ --- ------------ -- ---- ----- --- ---------- ------- --- -------- ---
页面结构
无障碍用户应该可以在页面上轻松地导航到他们需要的内容。因此，我们需要正确地使用标题、列表等标签来组织文章内容。
比如，我们可以这样组织页面标题：
<h1>Main heading</h1> <h2>Subheading</h2> <h3>Sub-subheading</h3> ...
同时，对于文章中的列表，我们应该使用 <ul> 和 <ol> 标签，并为每个列表项添加 <li> 标签，以确保无障碍用户可以轻松地阅读：
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>总结
通过正确使用无障碍技术，我们可以为更多的用户提供更好的 APP 用户体验。在实践中，我们应该始终尝试看待设计中发现的每个问题，而不是将这些问题视为 “奇怪的边角” 在其中，无障碍技术不应该只是考虑 “必需”的技术，而应该成为设计之初的一部分。
同时，作为一名优秀的开发者，学习和使用无障碍技术不仅可以提高你在前端领域的技能，也有利于为更多的用户带来更好的产品体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d11c648841e98949c987f