如何做好 APP 的无障碍辅助功能设计-JavaScript中文网-JavaScript教程资源分享门户

无障碍辅助功能是指为了方便视觉、听觉、语言和其他特殊需求用户的使用，设计师和开发人员在产品设计和开发阶段采取的措施。在 app 开发中，无障碍辅助功能设计同样至关重要，是提高产品体验的必要部分。本文将详细介绍如何做好 APP 的无障碍辅助功能设计，并提供示例代码。

视觉障碍用户

遵守 Web Content Accessibility Guidelines（WCAG）

WCAG 是一个国际通用的无障碍标准，它为设计人员提供了一整套的无障碍设计原则，建议所有开发人员遵守。

提供 Trip-by-Trip（按步骤）功能

按步骤的功能是以有条理的方式呈现信息的一种策略，以便轻松地导航整个页面。为了提供更好的体验，您可以在应用程序中添加按步骤功能。比如我们可以配合"aria-current"标签实现。

-- -------------------- ---- -------
--- ------------------
  ----
    -- -------- ----------------------------
  -----
  ----
    -- -----------------------
  -----
  ----
    -- ---------------------------
  -----
-----

提供高对比度和可调整字体大小

许多视障用户需要更高对比度，以便更好地区分内容。为了确保您的应用程序更易于浏览，您应该使用足够高的对比度。同时，您还可以考虑添加字号选择器，以使用户能够根据需要调整界面中的字体大小。

button {
  background-color: #000000;
  color: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  font-size: 16px;
}

听觉障碍用户

提供字幕和音频描述

为了保证听障用户的使用体验，您应该为您的app提供字幕和音频描述。比如，您可以在视频播放时提供字幕，或在音频播放时添加音频描述。

<video controls>
  <source src="/media/example.mp4" type="video/mp4">
  <track kind="captions" label="English captions" src="/media/captions.vtt" srclang="en" default>
</video>

使用 ARIA 属性

ARIA 是一个披萨层的名术，它代表着网页的可访问性特征分为三个层次：结构（如 HTML 2中的语义标签），行为，状态。

我们可以使用ARIA属性文件来识别用户选定的控件，比如播放、暂停、音量等，这使得机器可以通过语音进行控制。

<button role="switch" aria-checked="false">Toggle</button>

语言障碍用户

如果您的应用程序支持多种语言，那么您应该在语音辨认中考虑这一点，同时在产品体验中考虑到语言国际化以及本地化。

支持多种语言

支持多种语言是保证语言障碍用户的使用体验的重要步骤。您可以选择$Xliff$ 工具提供多种语言支持。此外，您应该考虑语音提示，在用户所选语言的发音中提供指导，以保证用户体验。

建议 Plain Language

如果用户的语言是第二语言，或者智商未成年或者特殊情况，您应该遵循 Plain Language 的建议。这意味着使用更为平易近人的单词和句式，以使语言更加易懂。

<ol>
  <li>从汤姆那里买一只狗</li>
  <li>给一只狗喂食</li>
  <li>带着狗去散步</li>
</ol>

其他需要考虑的问题

提供无障碍的键盘导航

这里面包括在开发期间考虑键盘快捷键、使用无障碍进入和退出菜单以及使用alt键、tab键等帮助用户进行无障碍导航。

[role="menu"] {
  display: none;
}

[aria-haspopup="true"][aria-expanded="true"] ~ [role="menu"] {
  display: block;
}

避免闪烁的内容

闪烁的内容会对视障用户产生极大的困扰。为了避免出现这种情况，您应该合理调整动画和过渡效果。

-- -------------------- ---- -------
------- -
  ---------- ------ -- ----------- ---------
-

---------- ------ -
  -- -
    -------- --
  -
  --- -
    -------- --
  -
  ---- -
    -------- --
  -
-

避免使用红色作为唯一提示信息的颜色

如果您使用红色作为唯一提示信息的颜色，那么您的应用程序可能会对色盲或其他视障用户造成麻烦。为了解决这个问题，您应该选择其他颜色或添加附加信息。

<div role="alert" aria-live="assertive" style="color: green;">
  <strong>Success!</strong> Your document has been saved.
</div>

总结

无障碍辅助功能是现代应用程序设计的必要组成部分，因为它可以帮助更多的用户使用您的产品。在本文中，我们介绍了如何适当地考虑及实施无障碍辅助功能，以帮助语言、视听和其他类型的用户更容易地访问和使用您的应用程序。同时，我们希望通过示例代码的方式，能够为读者提供参考和指导。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64839daa48841e98942f4a7a