新型应用程序

  • 项目

设计和开发可访问的新型应用

Rachel Appel

Rachel Appel除非对人类有益，否则技术（Internet、应用和各种各样的媒介）有什么价值？遗憾的是，许多软件并不能让所有人受益。与辅助功能相比，设计人员、管理和开发人员通常更注重安全和性能。如果还能将辅助功能视作一个优先级的话，那它通常也是较低的优先级。

辅助功能应该是更高的优先级。据 WebAIM 评估，20% 的 Web 用户有辅助功能需求或依赖辅助技术。仅在美国就有超过 6000 万人在使用您的网站或应用或者使用您的内容方面存在困难。对于大多数网站和应用，损失客户等同于损失收入。我的 PDF“辅助功能的重要性”阐述了有关可访问设计的其他许多原因（下载位置是 bit.ly/1CIx4k4）。

辅助功能的基础知识

在设计和开发时，将辅助功能牢记在心，同时考虑以下几种主要类别的残障人士：

  • 视觉：视觉障碍人群范围很广，从视力较差到失明，包括色盲。
  • 听觉：听力障碍的人群可能是听力不好或完全失聪。
  • 动作：许多人存在运动性障碍。一些人可能完全失去肢体或无法使用肢体。其他人可能因为意外事故或疾病造成精神疾病。运动性障碍人群可能需要配备专用的输入设备。
  • 认知能力：有学习障碍的人群（包括注意力不集中症和诵读困难症）通常在使用信息方面有困难，这取决于其展示情况。

许多人需要某种形式的辅助技术。辅助技术是在日常活动中使用的、起到辅助作用的任何工具或技术，可以让日常活动更加轻松或成为可能。人们很少将眼镜视作辅助技术，尽管它们处于技术范围的低端领域，但是它们确实是辅助技术。一些技术用户在没有眼镜的情况下完全无法正常工作。常见的辅助技术包括盲文阅读器、口含棒、头戴式读出笔、自适应键盘以及语音识别软件等。

可访问的内容与设计

您将发现对最多人可访问的设计通常被视为伟大的设计。太多的网站在其内容流中充斥着过多的广告，这极大地干扰了读者的流畅度。其他问题包括难于使用的菜单和导航方面。在考虑辅助功能需求时，网站或应用的布局和导航是非常重要的考虑事项。

在安排内容时，使用清晰的标题将内容分离到不同的版块。电影、音乐和动画应将字幕或脚本作为其内容的一部分包含在内。如今，大多数电影制作软件可允许您为隐藏字幕输入脚本。

良好的设计还意味着一致且明确的导航方案。JavaScript 级联菜单通常对于非残障人士就很难使用。对于运行性障碍的人群，这种情况更糟糕。网页侧面的顶部或底部的链接效果最佳。在手机应用中，您要适应目标设备的导航方案。有关 Windows 8.x 中导航的详细信息，请参阅 2013 年 8 月专栏中的“Windows 应用商店应用中的导航基础知识”(msdn.microsoft.com/magazine/dn342878)。

字体应较大且清晰。类似于脚本的字体更难以阅读。有很多情况可能会导致某种字体中的某些字母不清楚。一种是学习障碍诵读困难，这可能导致无法区分看上去相似的字母。据估计，5% 的人有诵读困难。面向非诵读困难者的字母在诵读困难者看来，可能是翻转和反向的。

借助有关诵读困难者的这类知识，dyslexiefont.com 上的一些人创建了一种对字母稍有更改的字体，这样便于诵读困难者进行阅读。到目前为止，字体测试人员表示他们喜欢这一字体。您可能选择不使用难语症字体，这也行。这不表示您冷落诵读困难者。但是，请确保选择一种易于阅读的字体。

如果您应用针对的目标是企业家，则可能要重新思考更改您的字体。字体颜色也应该具有高对比度。高对比度的一个良好示例就是在浅色或白色背景上使用暗色或黑色文本。完全相反也是可行的。在暗色背景下使用浅色文本的效果也不错。通常，使用哪种只是个人偏好和格式问题，只要有足够的对比度即可。

移动先行的设计策略肯定不会有错。一般而言，移动先行的设计可以促使您尽可能地充分利用空间。大部分手机和小型平板电脑只有几英寸的空间进行内容显示。这意味着，应用通常只能呈现最为重要的信息。在这种情况下，几乎没有空间可用于投放垂直广告。

您还可以遵循其他优秀的设计惯例，同样可有助于确保辅助功能。想象一下 Web 上最受欢迎的新闻和社交站点。其中很多内容是无法访问的，或者仅在较小的程度上可以访问。它们经常包含一些弹出窗口，阻碍了读者的视线，甚至屏幕阅读器和读者可能完全无法进行阅读。这些相同的弹出窗口通常含有非常小的关闭按钮，难以找到并且无法点击或点按，甚至主流设备也存在这些现象。

其他网站可能使用连续弹出窗口。当您最终摆脱一个弹出窗口后，另一个弹出窗口又取而代之。这非常令人懊恼。具有辅助功能需求的很多人拒绝访问这些网站，因为它们不值得大费周章。

避免闪光效果、闪烁效果或图像闪烁而不发出警告。这会带来惊厥风险。此外，除非它们特别针对光学视觉效果或视觉把戏，否则通常令人不快。

不要只使用颜色来向用户传达信息。例如，很多窗体使用红色字体来表示必填字段。色盲人群无法发现这一差异。不要只使用短语“单击此处”作为链接文本。这对屏幕阅读器起不到任何帮助作用。使用说明性内容进行代替。

编写可访问的代码

您可以使用一些编程技术来开发可访问的网站和应用。作为开发人员，您需要交互输入和输出内容。这表示，您应该牢记不同的用户需要不同的方式与您的软件进行互动，并非只通过鼠标和键盘。

对于主要或完全使用键盘的用户，确保字段选项卡顺序简单明了且按照顺序排列。您还应该使用 HTML <标签> 元素对字段和元素（如按钮）添加标签。这可确保更加清晰。图像应该将 alt 属性设置为具有说明性但简洁的内容。屏幕阅读器不具备阅读图像的神通，因此它们使用 alt 代码向听者描述图像。

HTML5 包含称为语义元素的元素集。其中的要点是机器和人类都可以轻松地阅读和理解 HTML 元素。语义元素在很大程度上像描述 XML 一样描述其内容。例如，任何人只需通过阅读它们即可理解以下语义元素：caption、figure、article、footer、header、summary、time、nav、mark 和 main（这里只列出了少数几个）。

对于依赖屏幕阅读器的用户，跳过链接就是在节省时间。跳过链接可让阅读器跳过网站上的导航元素和广告，并直接转到所需内容。从头至尾地浏览多个折磨人的且没有必要的选项迭代和广告，是毫无乐趣可言的。请勿强制用户从头至尾地体验这种痛苦。立即紧跟 <body> 元素是主要跳过导航链接转到的位置，如以下代码所示：

<body>
<a href="#maincontent">Skip to main content</a>
<nav><!-- navigation here --></nav>
<main id="maincontent">
<p>The quick brown fox jumps over the lazy dog.</p>

当屏幕阅读器发现跳过链接时，它主要关注跳过链接按照其 ID 引用的元素。这表示，在较早的示例中，该跳过链接指向含有“主要内容”ID 的 <main> 元素。由于跳过链接必须是首个元素而且很多设计人员偏好跳过链接转到其他位置，因此您可以隐藏该链接，但应使其对含有 CSS 的辅助技术可见，如以下代码所示：

.skiplink-offscreen {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

如您所见，这是绝对定位的类选择器，其中值属性设置为 -10000px。它的溢出部分被隐藏了。该代码将使用此选择器的元素定位到用户永远无法看到它的位置，但是屏幕阅读器可以看到。屏幕阅读器可以跳过含有隐藏或显示（设置为隐藏或无）属性的元素。这就是您为什么使用这一小技巧的原因。

使用 ARIA 进行开发

可访问的富 Internet 应用程序 (ARIA) 是您可以应用于标记（如 HTML）的标准属性集，以帮助辅助技术高效工作。使用 ARIA，您可以按照元素的状态、属性或角色来定义该元素。通过该信息，屏幕阅读器可以确定软件的功能。

例如，复选框可能处于 ARIA 勾选的状态。或者，元素可能假设菜单的角色。有关状态或角色的这些额外信息可以帮助屏幕阅读器更好地呈现网页的内容。这些属性不会更改元素，但是它们可以让元素的行为更贴近语义性质。语义标记更易于人类和机器进行理解。例如，以下代码显示含有一部分为语义的文章，那么屏幕阅读器可以更好地识别相关内容并将其传达给用户：

<article>
<section aria-labelledby="ProgrammingBestPractices">
  <h2 id="ProgrammingBestPractices">Best Practices for Programmers</h2>
  <ol>
  <li>Take a few minutes a day to refactor small portions of code.</li>
  <li>Learn a new programming language every year.</li>
  </ol>
</section>
</article>

您可以将此语义和可访问标记扩展到 HTML 窗体。屏幕阅读器需要知道哪些元素标记或描述窗体字段，以及哪些字段同属于一个小组。按钮和复选框的状态是屏幕阅读器必须知道的其他事项。优秀的窗体设计意味着知道脚本对辅助技术的影响情况。您可能要重新思考自动设置关注控件或动态更改窗体控件状态的代码。

使用 HTML <标签> 元素将单个窗体元素标记为单个标签。但是，有时您需要使用多个标签对元素进行标记（如在一个表格中）。这不是个问题。在这些情况下，aria-labelledby 属性可正常工作。将小组中各个元素的 aria-labelledby 设置为将要制作标签的元素 ID。您可以在相同的窗体中使用 <标签> 元素和 aria-labelledby 属性。除非是图像按钮，否则无需标记“提交”或“重置”按钮。然后，请确保设置 alt 属性。

每个窗体都含有所需的元素以及含有对它们将要接受的数据类型进行特定限制的元素。大多数窗体运行一些 JavaScript，以在所需和限制字段上执行验证。在将所有数据发送回服务器进行处理之前，它们执行相应验证，因为这可以尽早向用户告知错误。在运行脚本时，屏幕阅读器难以辨别网页上正在发生什么情况。要解决此问题，请使用 aria-required 和 aria-invalid 属性，如图 1 中所示。

图 1 含有 ARIA 属性的可访问的 HTML 窗体

<form>     
  <div>
    <label for="name">* Name:</label>
    <input type="text" id="name" aria-required="true" />
  </div>
  <div>
    <label for="checkboxGroupLabel">* Language</span>
    <ul role="radiogroup" aria-labelledby="checkboxGLabel">
      <li role="checkbox"><input type="checkbox" value="C#"
        name="language" aria-checked="false" />C#</li>
      <li role="checkbox"><input type="checkbox" value="JavaScript"
        name="language" aria-checked="false" />JavaScript</li>
      <li role="checkbox"><input type="checkbox" value="Python"
        name="language" aria-checked="false" />Python</li>
    </ul>
  </div>
  <div>
    <span id="yearsLabel">* Years Experience</span>
    <select name="YearsExperience" aria-labelledby="yearsLabel" >
      <option value="1">1-5 Years</option>
      <option value="6">6-10 Years</option>
      <option value="10">10-20 Years</option>
      <option value="20">20+ Years</option>
    </select>
  </div>
  <div>
    <input type="submit" alt="Submit" />
  </div>
</form>

图 1 中所示的内容还是 aria-required 和 aria-labelledby 以及使用角色的示例。您只要添加一些额外但不明显的 HTML 即可。这不需做太多工作，但可以提供巨大的回报。

辅助技术必须处理多个静态元素。JavaScript、AJAX 调用和 SPA 样式的应用都会经常更改网站和应用的内容。有时，诸如此类的动态脚本直接会遮挡屏幕阅读器。运行 JavaScript 验证后，您必须重置一些 ARIA 属性的状态，如 aria-invalid。

测试可访问的代码

下载屏幕阅读软件并亲自尝试辅助技术即可测试您的工作情况。请闭上您的眼睛并像盲人一样使用屏幕阅读器。从使用辅助技术的用户处获取反馈也是了解您所创建软件可访问性的一个很好方式。您可以下载和使用的屏幕阅读器包括：

测试阅读器之后，WebAIM 会有一个完整的清单，而且称为 Web 辅助功能评估工具（简称为 WAVE）的网页扫描器将报告错误、警告以及有关页面辅助功能状态的其他信息。易于使用。请转到 wave.webaim.org 并输入您要扫描的 URL。WAVE 显示内联目标网页并批注您可以更改以改善辅助功能的故障点和元素。图 2 显示活动中的扫描器，因为它在 MSDN 杂志 2015 年 1 月的问题页面上标记出一些项。

MSDN 杂志运行 WAVE 扫描器之后
图 2 MSDN 杂志运行 WAVE 扫描器之后

单击任何批注的元素，WAVE 会显示错误信息或有关该元素的元数据。该扫描器会查看所有内容，从缺少标签和 alt 属性到对比度问题。它会将其标记为错误或警告，因此您可以首先更改较为重要的问题。您可以运行 WAVE 的独立版本，或者向您的自动 QA 流程添加 API。

总结

可访问设计通常是适合所有人的最佳设计方法。非可访问设计会丢失大量的用户，因此投入精力使您的软件更易于访问不失为明智的商业决策。UI 应该清楚地呈现标记的、易于找寻的选项，并且使完成任务的步骤简单明了。在针对辅助功能进行设计时，您会自动获得适合所有人使用的简单易用的系统。

Rachel Appel是一名顾问、作家、导师和前 Microsoft 员工，在 IT 行业有 20 多年的经验。她常在 Visual Studio Live!、DevConnections、Mix 等顶级行业大会上发言。她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。有关 Appel 的详细信息，请访问她的网站 rachelappel.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅：Frank La Vigne