引言
在设计网站或应用程序时，许多人可能会忽视一群特殊用户——视障者、听障者、运动障碍者、认知障碍者等。这些人需要使用辅助技术，通过识别页面中的信息来访问Web和应用程序。如果你的产品无法与辅助技术协同工作，那么你的产品就无法让这些特殊用户感到包容和受欢迎。
本文将探讨如何使用辅助技术使无障碍成为包容性设计，包括辅助技术的种类、如何使用辅助技术来测试你的网站或应用程序以及如何改进你的UI以更好地支持特殊用户。
辅助技术的种类
辅助技术是专门设计用于帮助视力、听力、运动、认知和学习障碍者的工具。下面是一些常见的辅助技术：
屏幕阅读器
屏幕阅读器是一种软件，可以将Web页面中的文本和其他元素读出来，以帮助视力障碍者。这样的技术可以读取屏幕上的内容，并使用发音合成器将其转换为语音或Braille显示器上可读的文字。
下面是一个示例，用JavaScript实现宣读页面标题：
var title = document.title;
window.alert('The title of this page is: ' + title);放大软件
视力障碍者可能需要使用放大软件来增加页面上的文本和其他元素的大小。您可以通过简单地调整CSS声明（如font-size），或使用CSS媒体查询来为不同的设备提供不同的样式。
下面是一个使用媒体查询为不同的设备设置不同样式的例子：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-转录器
听力障碍者可能需要使用转录器来将音频内容转换为文本。您可以使用HTML5的新功能来提供音频捕获和转录服务。
下面是一个使用HTML5音频API来捕获和转录音频的例子：
-- -------------------- ---- ------- --- ----------- - --- -------------------------- --- ------ - --- -------------------- - --------------- - ------ - ------------------------------- -------------------- -- -------------------- -- ----- -----------
轮廓键盘
运动障碍者可能需要使用轮廓键盘来完成表单和其他字母输入。您应该使用WebContent Accessibility Guidelines（WCAG）建议的一些最佳实践，如tabindex属性、可访问标签和键盘快捷键。
下面是一个使用tabindex属性和可访问标签的例子：
<input type="text" tabindex="1" aria-label="Enter your name" />
时间计时器
认知/学习障碍者可能需要用时间计时器来跟踪他们需要完成任务的时间。您可以在页面上添加一个简单的JavaScript计时器来帮助这些用户。
下面是一个用于计时用户完成任务时间的JavaScript例子：
-- -------------------- ---- -------
--- --------------- - ---------- -
--- --------- - ---
--------------- - --- -----------------
------------- - -----
------ ----------
-
--- ---------- - ------------------
--------------------- -
-------------- - --- -----------------
-------------------- ----- - - --------------- - ----------------- - ---- - - ----------
-- ------如何测试您的网站或应用程序
如果您不是障碍者，很难知道您的产品是否易于使用。使用辅助技术来测试你的网站或应用程序是一个非常好的方法。以下是一些测试工具：
- JAWS（Job Access With Speech）：是一款流行的屏幕阅读器软件，可以测试您的站点的可访问性。
- NVDA（NonVisual Desktop Access）：也是一款流行的屏幕阅读器软件，可以帮助您测试您的站点的可访问性。
- Web Accessibility Evaluation Tool：是一个在线工具，可以分析您的网站并检测可访问性问题。
如何改进您的UI以更好地支持特殊用户
以下是一些实用的建议，可以帮助您改进您的UI以更好地支持特殊用户。
具有描述性的alt文本
如果您的站点或应用程序包含图像，请必须向grafics标签添加有描述性的alt文本。这将帮助视障者了解图像的内容。
<img src="image.jpg" alt="A pitcher holding a baseball ready to throw." />
语义标记
Web内容应按语义标准构建，以帮助辅助技术对页面进行正确的解释。如，正确地使用段落、列表和标题标记。
-- -------------------- ---- ------- -------- ---------- ------- -- - -------------- ---- -------- ---- ------ -------- ---- ------ -------- ---- ------ -----
添加辅助功能
为特定的用途添加辅助功能如：标签、快捷键和键盘焦点可以进行无障碍访问。
<form> <label for="name-input">Name:</label> <input type="text" id="name-input" /> <button id="search-button" accesskey="s">Search</button> </form>
结论
通过使用辅助技术，您可以帮助特殊用户访问您的站点或应用程序并获得良好的体验。优化您的UI，使得它易于使用，对所有用户都是又包容性、易理解的。
这将不仅使你的用户得到更好的体验，也将帮助你打开不可触及的用户市场，从而创造更长远的业务价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b5ea9d91dce0dc889da31