随着社会对普惠性技术的追求，无障碍设计已成为越来越重要的设计规则之一。在网站和应用程序中加入无障碍设计，旨在为残疾人士和老年人提供更好的访问体验，以及更好的用户体验，提高网站和应用程序的可访问性和互动性。
本文讲述无障碍设计中的屏幕阅读器技术。作为影响无障碍设计的一大因素，很多做无障碍设计的人士会经常和屏幕阅读器打交道。而屏幕阅读器是一种软件，主要用于帮助身体有障碍人士（盲人、色盲、低视力等）通过声音或特定的显示方式领会文本、图像、链接等网站元素的内容与架构。
本文主要介绍屏幕阅读器的技术原理和技术方案，以及如何在前端开发中通过适当的 HTML 标记和 Javascript 代码实现无障碍设计。
屏幕阅读器技术
屏幕阅读器技术的基础是文本处理和声音合成技术。这两种技术是屏幕阅读器实现语音播放的基础。屏幕阅读器能够将网站内容转换成语音或文本内容，并根据用户的需要播放出来。除了文本和语音的支持，屏幕阅读器还支持以下方面的功能：
图像标签的替代：如果图像标签没有描述文字，屏幕阅读器可以读出其标题以描绘图像的主旨。
级联样式表（CSS）的应用：屏幕阅读器可以根据标记文本使用的样式读出文本的样式情况（e.g., 加粗、斜体）。
聚焦点和焦点提示：屏幕阅读器会通过声音提示用户当前的聚焦区域，并与用户的按键输入进行相互搭配，使用户可以快速地找到自己需要的区域，并避免出现键盘失灵等问题。
键盘导航：通过键盘导航，屏幕阅读器可以根据用户的输入使用户实现关键功能，比如内容拷贝、格式修改和内容搜索等。
根据 W3C 规范（即 Web Content Accessibility Guidelines, WCAG），无障碍设计可分为四个级别。下面是一些利用屏幕阅读器技术建立无障碍设计的最佳实战：
- 包含语义化的 HTML 标记
良好的 HTML 元素使用可以让屏幕阅读器用声音读出网站的真正含义。HTML5 中带有一些新功能元素，比如<nav>, <header>和<section>等等，可以更好地标记网站中的信息，为阅读器提供更准确的信息。此外，aria-hidden可以告诉阅读器当前元素的含义，从而识别需要被读出的内容。
-- -------------------- ---- -------
---- -------------- ---
--------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------
---- -- ------------- -- ---
--- ------------------------- ---- -----------
---- --------------------- --- ------ -- -------- --- ---- ------ -- --- -------- ------ ------ -- ----- - ----- ----- -- ----------------- 在数据可视化方面应用图像标签 ALT 描述
无障碍设计应该考虑到用户阅读的特性和多元性。在这方面，图像标签有助于做得更好，同时提供了一个名字或说明，以帮助用户了解图像的中心内容。至于关于声音、音频和视觉媒体，Autoplay、无声播放和不允许浏览器控制等是非常不好的方案。相反，指南（将来的）建议使用智能机器人，和/或动画以及演示文稿技术！
示例代码：
<!-- <= 图像标签 ALT 描述 = --> <img src="chess.jpg" alt="张三下棋。">
- 创建无键盘依赖的动画
无障碍设计的另一个核心思想是避免任何需要键盘输入的设计。原因是，在某些情况下，键盘可能是唯一的交互方法，而鼠标或触摸屏等必须排除在外的可能会带来极大的困难。解决方案是在标记中使用可用于动画的恰当标记，在这种情况下，屏幕阅读器即可根据操作提示进行播放。
示例代码：
-- -------------------- ---- -------
-- ------- --- ----- -- --- ---- --
---------- ------------ -
-- -
------ ------
-
--- -
------ -----
-
---- -
------ ----
-
-
-- -
---------- ------------ ---
-- 使用语义化的链接文本，保证特殊提示词
有些链接可能看起来透明，不容易抽象理解。在这里，CSS 伪类链接可以帮助用户更好地理解特殊词语。此外，这样的做法还可以在阅读器的声音播放中获得一种自动读出链接的效果。
示例代码：
<!-- 使用语义化的链接文本，保证特殊提示词 -->
<p><a href="http://mysite.mydomain.com/" title="Visit my site">Visit my site</a></p>
<style>
a[href^='http']::after {
content: " outside link";
}
</style>结论
本文简要介绍了无障碍设计中的屏幕阅读器技术，并给出了利用 HTML 和 CSS 进行优化的建议和示例代码。尽管无障碍设计提高了网站和应用程序的可用性，但它也从多个方面追求着它的目标。因此，它与其他设计方式的结合非常重要。例如，在您的可耻的活鱼肠间引入一些游戏元素，或者将某些用户输入或选择的概念与其键盘增援所需的元素结合再一起。归根结底，无障碍设计是开放式、多元化的，要遵守的标准必须受到多个人群的预计和支持，才能实现真正的无障碍设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675181a58bd460d3ad8a43ec