引言
随着移动设备的普及，手机应用程序已经成为人们生活的重要组成部分。但对于一些身体残障或视力障碍的用户来说，使用手机应用程序可能面临一定的挑战。因此，在移动应用程序的设计中，我们需要考虑无障碍性问题，以使应用程序能够更好地服务于所有用户。本文将介绍无障碍性的一些基本概念和设计考虑，并提供示例代码，以帮助开发人员更好地设计无障碍应用程序。
无障碍性的基本概念
无障碍性是指人们在不同的情况下，能够在尽可能少的障碍下使用产品、服务和信息。在移动应用程序中，考虑无障碍性通常包括：
- 易于读取和理解的文本；
- 支持键盘和语音输入；
- 提供足够的对比度和大小的图像；
- 对不同人群提供不同的体验。
设计无障碍移动应用程序的基本考虑
可访问性标准
设计无障碍的移动应用程序需要遵循一系列的可访问性标准，如 WCAG（无障碍内容指南）标准。WCAG 标准包括四个主要原则：
- 感知：用户能够感知到内容和操作。
- 操作：用户能够使用操作方式，如鼠标和键盘。
- 理解：用户能够理解所提供的内容和信息。
- 健壮：内容和应用程序能够适应各种技术环境和设备。
文字设计
移动应用程序中的文本应该考虑以下因素：
- 大小和对比度：为用户提供大字体和高对比度，以帮助人们更容易阅读文本。
- 展示方式：文本不应该只依赖于颜色或图标来传达信息。应该提供足够的上下文，以帮助用户理解。
- 简单易懂的语言：应尽量使用简单易懂的语言来传达信息。使用可读性高的字体，并确保字母不要过于接近。
输入方式
无障碍应用程序应该支持多种输入方式：
- 触摸屏幕：应该考虑到手指操作的灵敏度和可用性，确保说话后，用户能够准确地点击目标。
- 声音或语音命令：应该支持语音命令以及使用语音输入进行搜索和文本输入。
- 键盘：应该支持键盘输入和快捷键，以方便视障用户能够通过键盘进行操作。
视觉
无障碍应用程序应该考虑到以下几点：
- 为聋哑人士提供相应的视觉反馈。
- 考虑到不同人士的隐形视力障碍：例如，黄色和蓝色是颜色盲的最早正确辨别颜色的标准颜色。
- 不依赖于颜色：应该在文本和图形之间运用不同风格的对比度。
辅助功能
在设计无障碍应用程序时，需要考虑到以下辅助功能：
- 手势和语音命令：应该使用简单的手势和语音命令，以及使用简单清晰的语言作为交互策略，以帮助视力障碍的人使用应用程序。
- 辅助功能和字幕：为盲人或者听障的用户提供相应的辅助功能和字幕，使其更容易地使用应用程序。
无障碍设计的具体实践
在实践中，可以采取以下方案来实现无障碍设计：
为链接添加信息
为链接添加信息是增加链接计数的最佳方法，对于不能直接可以获得链接上下文的用户，用于链接的附加文本会更加自然的完成此任务。自然HTML中的链接内容应该简单、明了且能清晰的反映目的。
<a href="/foo" aria-label="Link to page on a foo">Foo Page</a>
实现语音访问
最初的“语音度量”在设计还是开发阶段被引入，应用用到可支持的细节中的某一个或几个。 此技术将会流畅和自然，而且依赖于类似于微手机上的语音识别。这个例子是个由多个语音命令组成的命令流：
-- -------------------- ---- -------
----- ------------ - -
---------------
------------
--
----- ----------------- -
------------------------ -- -------------------------------
-- ------------------- -
-----------------------
--- ----------- - --- --------------------
---------------------- - -----
-------------------------- - -----
---------------- - --------
-------------------------------------- -------- ------- -
--- ------------- - ---
--- ---- - - ------------------ - - --------------------- ---- -
----- ------ - -----------------
------------- -- ---------------------
-
-- -------------------------- -
------------------ ----- - - ---------------
- ---- -
-------------------- ----- - - ---------------
-
---
----------------------------------- -------- -- -
--------------------
---
--------------------
--- ----- - -------- ------ --------- -
--- --------- - --- -------------------------------
--------------- - -------- -- -
-- ---------- -----------
--
----------------------------------------
--
--- -------- - -------- ---------- -
--- ---------------- - -------------------------------- - ---
------------------------
----------------------- ----------
--
------------------------------- -- -- -
-----------
---
-提供有关输入错误的信息
如有错误或者输入无效的内容，应该（合适的）让用户得知此信息。表单验证是您为其设置辅助标签的一个极好的例子，如果您需要时间或者文本的输入方式复杂，请重复应用这项技术，这并不会使流程变的繁琐，往往也不会其他用户造成多大的麻烦。
<form action="/" method="POST">
<label for="email">Email</label><br>
<input type="email" id="email" name="email" placeholder="Your email" required><br>
<input type="submit" value="Sign Up">
</form>以上例子可以通过 HTML5 的传值获取输入，并且可以直接提示填写错误的信息。
结论
无障碍性设计是提高用户体验和使应用程序更多元化的必要条件。通过考虑这些问题以及其他方面的设计问题，您可以设计出更具可访问性和可用性的应用程序。同时，无障碍性是我们需要在移动应用程序设计中注重的一项关键技能，随着技术的不断发展，我们需要不断更新和改进它，以使它更好地满足用户的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f13c7a6fbf96019737ff1f