在今天越来越注重用户体验的时代，无障碍设计已经成为一项不可或缺的技术要求。为了能够让更多的人无障碍地接触到网络世界，在前端开发中加入屏幕阅读器技术已经成为一项必不可少的技术。本文将从什么是屏幕阅读器、屏幕阅读器的使用方法、如何为屏幕阅读器使用者优化页面等方面分别进行详细讲解。
什么是屏幕阅读器？
屏幕阅读器是一种为视力障碍者提供计算机界面访问方法的辅助技术。当用户使用屏幕阅读器时，屏幕上显示的信息将以语音或语音合成器的方式读给用户听。屏幕阅读器能够读取网站中的内容、按钮、链接等，为视力障碍者提供良好的网络使用体验。
屏幕阅读器的使用方法
准备好屏幕阅读器后，用户需要掌握一些基本操作：
- 启动屏幕阅读器，此时计算机屏幕上显示的内容将被朗读出来；
- 使用快捷键、鼠标或触控板等方式来导航、选择、拖拽等操作；
- 利用屏幕阅读器自带的快捷键或自定义快捷键进行一些高级配置与操作；
- 关闭屏幕阅读器。
如何为屏幕阅读器使用者优化页面
在进行页面优化时，尤其要考虑到屏幕阅读器使用者的需求，遵循 Web Content Accessibility Guidelines（WCAG）的规范来优化页面。下面分别从代码、文本、图像等多个方面来进行讲解。
代码：
- 纯文本、超链接及 JavaScript 等都要为屏幕阅读器做好标记，并保持清晰和有序；
- 控制 html 标签和属性的使用，避免过度注释。
<!-- 避免 代码注释 过多 -->
- 适当利用样式表，不能过度改变文档结构。
文本：
- 不要混杂使用不同的字体、字号和颜色等；
- 避免使用反复重复的文字，这会令到屏幕阅读器的用户感到困扰；
- 不要将大文本塞在图片中，应采用其他的替代选项。
图像：
- 使用网页上的图像时，应该使用 alt 属性来跟踪图像，以便于屏幕阅读器朗读；
- 如果使用图片上添加的超链接，必须给为图像添加 alt 属性并标注链接的文本。
<a href="http://xxx.com"><img src="example.png" alt="example"></a>
此时，当屏幕阅读器读到图片时，会自动朗读出“example”，当用户使用 AT（Assistive Technology）工具停止在图片上时，AT将读出“超链接”的文本，提示用户该图片可以被点击。
表单：
- 标签、字段和按钮必须都能够被屏幕阅读器正确地识别；
- 端口输入框、复选框、链接控件和按钮等都必须符合 W3C 规范。
<input type="checkbox" name="choice" checked="checked"> <label for="choice">已经选中</label>
以上的代码片段规范了复选框的操作方式。
示例代码
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----------------------------
-------
------
--------
----------------------
---------
-----
----
------ --------------------
------ ----------------------
------ ----------------------
-----
------
------
----------------------
--------------------------------------------
----
--------------- ---------- ------------------
---------------------------
------------ --- --------
-------------------
-----
------
----------
---------------------
------ ----------------------
------ ----------- ----------- ----------
------ -----------------------
------ ------------ ------------ -----------
------ -------------------------
--------- -------------- ------------ --------- ---------------------
------ ------------- -----------
-----------
-------
-------
--------
------- ------ --- ----
---------
-------
-------总结
本文主要讲解了什么是屏幕阅读器、屏幕阅读器的使用方法、如何为屏幕阅读器使用者优化页面以及相关示例代码。在未来的设计工作中，我们应该注重无障碍设计，为更多的人提供高质量的网络体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cbc4ce5ad90b6d04225734