在现代社会中，越来越多的人使用互联网来获取信息和交流。但是，有一些人可能由于年龄，视力、听力、运动能力等方面的问题，难以顺畅地使用网站或应用程序。这些问题很大一部分可以通过无障碍性技术来解决。本篇文章介绍一些无障碍性技术的使用方法，帮助开发者创造一个对所有人无歧视的网络环境。
对残疾人士的需求
在了解如何帮助残疾人使用网站之前，首先需要了解他们的需求。
视力受损者
- 需要大字体或高对比度的页面以方便阅读。
- 需要能够放大或缩小网页内容的功能。
- 需要具有文本对齐和行距的功能。
- 需要屏幕阅读器来读取页面上的信息。
听力受损者
- 需要有文本版本的内链和外链。
- 需要有字幕或描述性文本的视频和音频文件，因为他们可能无法听到音频。
- 需要能够自动播放音频的控制以便他们可以开启，因为他们看不到视频。
- 需要可调整音量的音频文件。
运动受限者
- 使用键盘导航浏览页面，触摸屏幕可能不方便。
- 需要具有大型，易于触碰的按钮和菜单项。
- 需要具有足够的浏览时间以便他们可以慢慢浏览，不受时间限制。
编写无障碍性网站的技巧
下面提供一些常用的无障碍性技术和实践，实现无障碍网页的制作。
1. 使用有意义的文本
要编写无障碍性的内容，应该使用有意义的文本。比如，有一张图片，那么，应该描述图片内容的相应文本，这有助于屏幕阅读器用户获取更好的体验。
<img src="example.jpg" alt="一个名为茶点的餐厅里的餐桌">
此处的 alt 属性会帮助屏幕阅读器用户获取图片的必要信息。
2. 添加 ARIA 属性
ARIA 属性是诸如屏幕阅读器和其他辅助技术使用的无障碍性相关组件。添加 ARIA 属性有助于增强用户的访问体验。例如：
<button type="button" aria-expanded="false" aria-controls="menu">选项</button>
<div id="menu" aria-hidden="true">
...
</div>在这个示例中，按钮元素有两个 ARIA 属性。aria-expanded 属性告诉屏幕阅读器是否应该展开菜单，aria-controls 属性告诉屏幕阅读器控制了哪个元素。div 元素也具有两个属性。aria-hidden 应当告诉屏幕阅读器，用户不应该能够看到它，hidden 属性指向不应展示此元素，而 open 或 close 则是更显眼标识菜单的状态。
3. 创建易于操作的导航
屏幕阅读器用户在页面上导航时看不到页面的布局和操作方式。这意味着，开发人员必须提供有意义的导航。有以下几种无障碍性技术应用在导航方面：
- 要使用语义正确的 HTML 标记来启用自然导航和特殊页面元素。
- 使用 CSS 和标注，将导航设置为用户友好的样式。例如，让当前选项突出显示，而其余选项带有明显的提示符。
- 提供关键字搜索自然语言页面的手动上下文菜单，以启用寻找内容的快速解决方案。
- 完善屏幕阅读器元素，使屏幕阅读器的访问过程不会过于混乱。
4. 焦点管理
焦点管理允许用户使用键盘来控制浏览器的内容。一个好的无障碍性网站应具有一个可控制的焦点，以便让用户知道他们可以使用什么键完成什么任务，而不是仅仅依靠鼠标。例如，可以使用 Tab 和 Shift + Tab 键导航和移动焦点。
需要注意的是，如果不小心弹出一个新的浏览器窗口，这可能会打断焦点链，让用户很难找回控制权。因此，在无需解释或合理化的情况下，强烈建议避免使用新窗口。
总结
让网站能够访问多样人群是一个伟大的服务。您可以使用无障碍技术帮助年迈和残疾人看到网站的优势。通过标签和属性的正确配置，正确协调样式表和脚本，可以实现为所有用户（包括那些依赖辅助技术）提供无障碍访问的网站。
以上是本篇文章常见的无障碍技术和实践，对于需要开发无障碍性网站的开发者来说，这些技术和实践都非常有用。最后，也提供了示例代码，希望能够帮助读者更加深入理解网站无障碍性实现的思路和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e84118f6b2d6eab33c5393