在设计中考虑无障碍性：如何为您的 UI/UX 添加适应-JavaScript中文网-JavaScript教程资源分享门户

在过去，设计师通常只关注UI/UX的外观和功能。然而，现今世界变得越来越注重无障碍性问题，设计师们需要更加注意UI/UX的普适性问题以确保应用程序可以被任何人使用，无论他们是否患有身体或认知障碍。本文将介绍如何考虑无障碍性来为您的UI/UX添加适应。

对残疾人的考虑以及残疾人可能遇到的问题

在创建UI/UX时要考虑到使用者可能有各种不同的障碍。这些障碍可以是身体上的，例如视力和听力问题，也可以是认知问题。对于这些人来说，他们可能会遇到的一些常见问题，例如：

慢的互联网速度
自闭症和阅读困难使得阅读更加困难
视力问题意味着日期大小比较困难
聋人无法听到音频，需要视频字幕

这是仅仅列举了部分的障碍。您的目标是确保您的UI/UX适用于所有人，无论他们是否有残疾，也无论他们所遇到的问题有多么复杂。

让您的UI/UX适应残疾人

遵循的一些标准和技术，可让UI/UX满足无障碍性要求：

开发内容语义化

确保您的HTML和CSS遵循适当的标准，这将有助于确保它们在不同的浏览器和设备上得到正确的解释。您需要为不同的元素分配正确的标记，并确保您的内容可以在屏幕阅读器中得到正确的解释。您应该使用超链接来减少可供访问的链接数量，同时使用无障碍性图像和图表。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

提高可用性

确保您的UI/UX易于使用，无论用户有多少障碍。您应该确保您的内容易于使用，即使是在受访端固定缩小了页面。另外，您应该注意使用大字体来确保用户能够轻松阅读您的内容 - 这对于视力受损者特别重要。

body {
  font-size: 18px;
}

告知关键信息

对于某些残疾人，例如视力受损者，他们可能无法看到您的UI/UX上的所有内容。因此，您需要确保您提供了其他方式来获得信息。这可以通过在页面上添加文字字幕来完成，也可以通过提供语音内容。您还可以使用ARIA扩展来向受访端提供信息。

<button aria-label="搜索">
  <img src="search-icon.png" alt="搜索">
</button>

计划颜色

颜色对于UI/UX的有效性是至关重要的，但是否应该使用颜色来向用户传达消息很难预测。对于颜色盲用户，他们无法分辨一些颜色差异。您应该遵循WCAG3.0指南，以确保您的页面文本与背景颜色具有足够的对比度，并使用更加富有表现力的方式来展示您的信息。

h1, p {
  color: #15385f;
  background-color: #ffffff;
  border-color: #000000;
}

您可以使用的工具

Adobe XD，Sketch，Framer和Axure等UI/UX工具已经开始加入相关的无障碍性支持。在使用这些工具时要考虑如何利用那些重要的UI/UX工具可以进行辅助自动切换的功能。开发者还可以使用一些辅助工具，例如屏幕阅读器（如NVDA）和浏览增强器（如Chrome Vox）。

总结

在开发UI/UX时，设计者应该考虑到残疾人所可能遇到的问题，并为其适应UI/UX做准备。使用正确的HTML标记和CSS，着重于易用性和可用性，并在需要时告知您的受访端关键信息，并且设计师总是应该拥有最终的追求无障碍性的决心。在一个无障碍的UI/UX中，请使用对比度，可缩放的图像，ARIA，音频字幕等协助工具来确保您的内容易于访问。我们必须努力地让每个人都有权利访问重要的在线资源，无论他们有任何残疾或限制。

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