无障碍应用设计需知：如何兼顾可用性与可访问性-JavaScript中文网-JavaScript教程资源分享门户

随着全球范围内对无障碍设计的重视，越来越多的公司开始认识到无障碍设计对于帮助所有人都可以平等地访问和使用产品的重要性。而对于前端开发者来说，设计无障碍应用已经成为了一个必要的技能。

本文将介绍一些关于如何设计一个无障碍应用的重要方面，包括什么是无障碍应用以及如何为所有人都提供可用的体验，同时还将提供一些示例代码和最佳实践。

什么是无障碍应用？

无障碍应用是一种可以让每个人都能平等访问和使用的应用程序。这意味着无论用户的身体能力、技能水平、文化背景或其他个人差异如何，都能够使用应用程序来获取信息和执行任务。

为什么无障碍应用是如此重要？

设计无障碍应用是包容性设计的一部分，它能够为每个人提供平等的机会，无论他们的能力水平如何。此外，设计无障碍应用还能为你的应用程序增加受众，从而增加你的流量和收益。

但更重要的是，按照无障碍原则来设计应用程序将确保每个用户都能得到受到关注的适当设计和编写。这将提高每个人的独立性和个人价值感。

如何为所有人都提供可用的体验？

提供清晰和简洁的设计

首先，确保应用程序的整体设计清晰、简洁、易于导航和理解。务必使用简单的语言和可读性高的字体，并确保设计排版现代化且整齐。如果可能的话，尽可能减少大段的文本、卡片或列表的数量，这样易于阅读且更容易被赞赏。

确保设备是易于使用的

设备的易用性是设计无障碍应用程序的重要组成部分。确保你的应用程序可以在常见的设备上运行，并为用户提供简单易懂的界面和控件。使用合适的设备的关键是选择一个设备或平台来进行设计和开发。

避免使用闪烁和强烈颜色

有些用户可能对明亮的光线、强烈的颜色和快速闪烁的内容有过敏反应。为了解决这个问题，设计无障碍应用时需采取谨慎的措施。确保避免使用强烈的颜色、明亮的光线和频率高的闪烁动画。如果必须使用，使用适度的游戏开发。

在标记中使用语义元素

无障碍应用程序设计的重要组成部分是使用适当的结构化标记来确保文档可读性和可访问性。在HTML中使用语义元素，例如<nav>、<main>和<section>，会帮助你的应用程序更好地为其他人辅助技术如屏幕阅读器等所用，从而提高可访问性。

使用无障碍技术

除了使用结构化标记外，还可能需要使用其他技术来确保网站或应用程序更具可访问性，例如WAI-ARIA规范。该规范提供的角色和状态元素可以协助人们更好地理解和访问应用程序中的各种内容。使WAI-ARIA结构和代码更整洁可读有助于提高可用性和可访问性。

设置无障碍的键盘导航

一些用户可能使用的是键盘或其他辅助设备来操作计算机或移动设备。为了在无障碍应用程序中让这些用户能够平等地使用，需要设置一些适当的键盘导航操作。例如，使用无障碍的ARIA属性使得使用屏幕阅读器的用户能够区分<a>标签和 <span>标签中的链接。

为所有用户提供多种方式获取信息

当为所有用户设计无障碍应用时，确保在应用程序中提供多种方式获取信息是非常重要的。例如，在一段视频中，内含有音频和文字，为记文章的用户提供一个具有音频字幕和符合国际无障碍标准（WCAG2.0）的文本视图。

示例代码

提供清晰和简洁的设计

// javascriptcn.com 代码示例
<header>
  <h1>Brand Name</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

确保设备是易于使用的

<form>
  <input type="text" id="firstname" name="firstname" placeholder="First Name" required>
  <input type="text" id="lastname" name="lastname" placeholder="Last Name" required>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

避免使用闪烁和强烈颜色

.button:focus {
  outline: none;
  background-color: #ccc;
}

在标记中使用语义元素

// javascriptcn.com 代码示例
<main>
  <h2>About Us</h2>
  <section>
    <h3>Our History</h3>
    <p>Founded in 2010, our company has been providing quality services to our clients for over a decade.</p>
  </section>
  <section>
    <h3>Our Team</h3>
    <p>Our team consists of experienced professionals who are dedicated to providing the best services to our clients.</p>
  </section>
</main>

使用无障碍技术

<select id="city">
  <option value="0">-- Select City --</option>
  <option value="1">New York</option>
  <option value="2">Los Angeles</option>
  <option value="3">Chicago</option>
</select>

设置无障碍的键盘导航

<a href="#" role="button" aria-pressed="false">Click Me</a>

为所有用户提供多种方式获取信息

<video id="myvideo" src="myvideo.mp4" controls>
  <track kind="captions" label="English Captions" src="captions.vtt" default>
</video>

总结

无障碍应用程序的设计是一项极其重要的任务，可以帮助确保每个人都能够平等地访问和使用应用。通过实践并融入这些最佳实践，设计师和开发者可以为他们的目标受众提供灵活性和平等性，同时还可以增加他们的流量和收益。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653606927d4982a6ebdd883e