残障消费者在浏览和在线购物时常常面临巨大挑战，或许多达百分之十的网购者存在视力低下或无视力、无法使用键盘等障碍，这会使他们难以理解内容和导航网站。
“无障碍审查”是一个每月推出的系列栏目，旨在帮助电子商务商家提升其网站的无障碍性；本月我们走访了销售宠物笼、围栏和箱子的在线商店 Pets Contained，店主 Ken 和 Belinda Fagin 请求进行此次无障碍审查。
进行无障碍审计有多种不同的方法；在上个月的 Lori’s Wigsite 审查中，我梳理了包括布局、图像文本和链接更改在内的技术问题，提供了一种简明方式来突出网站上的无障碍问题；然而在本次审查中，我将采取不同的方法。
为了揭示 Pets Contained 网站存在的问题，我尝试以视障顾客的视角来浏览该网站。（Pets Contained 对仅使用键盘操作的视障用户也构成了重大障碍，但由于人物角色评测篇幅过长，我无法逐一进行更多可能性的测试。）
建立残障人士的人物角色有助于从以人为本的角度展示问题。它不仅揭示了网站上存在的技术缺陷，还展示了这些问题将如何影响试图导航网站的残障用户。
无视觉环境下的导航
PetsContained.com 首页截图。
我开始使用 JAWS（Job Access With Speech）屏幕阅读器配合 Internet Explorer 7 在 Pets Contained 上购物。我很快遇到了困难，因为 JAWS 播报的标题中并不包含“Pets Contained”字样。不过，在确认我在地址栏中输入的 URL 正确无误后，我确定自己身处正确的页面。
我找到了位于网站顶部的链接，这让人感到欣慰。得知可以通过页首访问站点地图、首页、购物车以及站内搜索，前景十分乐观。然而，搜索输入框没有标签，因此当我通过 Tab 键切换到它时，只听到了“编辑”。但我继续按 Tab 键移动到下一个位置，猜测此处的输入框可能是用于搜索。
我的计划是购买礼品券，于是我进入“表单”模式，在搜索框中输入“Gift Certificate”，然后提交表单。
JAWS 友好地告知我当前页面的标题为“Search Results”（搜索结果），但并未说明是否有结果。它还告诉我页面包含 75 个链接。由于不清楚这些是搜索结果还是导航链接，我开始逐个通过 Tab 键遍历这些链接。
这些链接以图片形式呈现，但由于它们具有 alt 属性，视障用户仍能获取相关信息。不幸的是，alt 属性内容过于冗长，且未能清晰指示链接指向何处。
为了说明这一点，视力正常的访客会看到：
- Home
- Petsafe Dog Fences
- 标准地上式
- Standard Underground
对于同样的四个链接，视障访客听到的是：
- 电子及WiFi无线狗围栏、狗吠叫项圈和训练项圈，PetSafe、Innotek、Sportdog
- PetSafe Standard 地上犬围栏 – 最大覆盖10英亩 – 电子犬只 containment 系统
- PetSafe Standard 地下犬围栏 – 最大覆盖10英亩 – 电子犬只 containment 系统
您可能会注意到，视障访客在此区域只能听到三个链接；这是因为代码中的链接顺序与页面上显示的顺序不同，“Petsafe Dog Fences”的子链接出现在标题 之前，因此链接在页面上看起来像是随机排列的。
仅限有经验的用户
尽管提供了搜索功能，我仍然无法判断我的搜索是否成功。如果我没有进行搜索，而是尝试通过网站菜单进行导航，体验大概也差不多。大多数视障用户可能在此时就会放弃。
经验丰富的屏幕阅读器用户通常掌握一些技巧，以应对那些不提供无障碍支持的不熟悉页面。为了本次测试的目的，我不想再继续经历让盲人访客感到沮丧的所谓“导航菜单”操作过程，我决定尝试一些替代的导航方法。
查找更多信息的一种常见方式是在页面内搜索文本。我知道页面上应该会出现“礼品券”这个词，无论是作为搜索结果还是作为我搜索内容的提示，因此我使用 JAWS 的“在页面中查找”功能对整个页面进行了搜索。
使用这种方法，我找到了礼品券的链接（这是唯一的搜索结果）并点击了它。
作为一名盲人访客，我不想再次浏览那个菜单；我想直接跳转到内容区域。网站没有提供任何实现这一点的功能，例如跳过链接或任何形式的面板标题，因此我在页面中再次搜索“礼品券”。幸运的是，该短语出现在内容区域，所以我找到了它。
对于使用屏幕阅读器的用户而言，该页面上唯一可识别的链接是标记为“Gift Certificate”的链接。虽然视力正常的用户可以看到“Add to Cart”和“Buy Now”按钮，但这些纯图片按钮没有 alt 属性。JAWS 将其读作“ec/a2c.gif”和“ec/buynow.gif”。第二个图片或许可以勉强理解，但由于它被连读为一个单词，显然不能保证准确性。不过幸运的是，这些链接都指向礼品券详情页。
进行购买
使用“表单输入”，我能够找到礼品券面值选项框。进入表单模式后，我选择了想要购买的礼品券金额。再次使用“表单输入”，我找到了数量选项，在其中输入“1”。我激活了“立即购买”按钮（其标签正确无误），随即进入了结账流程的起始阶段。我随后的访问主要都在表单模式下进行。
所有表单字段都没有标签，但 JAWS 相当准确地猜测出了每个表单字段关联的文本。然而，对于“订阅我们的邮件列表”复选框，JAWS 仅播报存在一个未勾选的复选框。由于表单嵌套在表格中，我尝试按 Alt+Ctrl+左箭头键，看看文本是否位于前一个单元格中。这招奏效了，于是我现在知道该复选框指的是订阅 Pets Contained 的邮件列表。
我完成了信息输入，然后点击“继续”。
由于配送和支付页面不断混合纯文本与表单元素，我需要经过几次尝试才能清楚了解在该页面上需要做什么。在第一遍中，我阅读了所有文本，对表单字段的内容有了大致概念。在第二遍中，我切换到表单模式，以便实际向表单字段中输入信息。
成功输入信息后，我再次点击“继续”。
“下单”页面也将纯文本与表单混合在一起，但我能够成功输入所有信息并完成订单。
总结购物体验
虽然我以视障用户的身份完成了购买，但现实中的残障顾客不太可能在这个网站上停留太久。完成购买的过程相对轻松，但在寻找商品和整体浏览网站时却遇到了诸多问题。
尽管 Pets Contained 在绝对意义上并非完全不可访问，但它对盲人用户确实不够友好。互联网上有许多网站为残障访客提供的挑战要少得多。我能成功是因为我懂得如何使用屏幕阅读器，并运用了一些创造性的方法来绕过网站的障碍。经验较少或缺乏创造力的购物者可能不会取得同样的成功。
Pets Contained 如何提升无障碍性
有几项简单的改进措施将大大提升 Pets Contained 的无障碍性。以下是五项关键建议：
- 简化主导航菜单中的 alt 属性，使其成为屏幕阅读器用户可用的导航系统。
- 重新排序主导航菜单内容，使子链接组在其各自父级 之后被读取。
- 编辑模板，在内容区域提供正确的 HTML 标题，以便屏幕阅读器用户可以轻松跳转到这些区域。
- 在页眉区域添加跳过链接，为不支持标题导航的屏幕阅读器提供相同的功能。
- 重写表单以提供明确的标签，并重新组织表单，将非表单文本与表单本身分离开来。
角色测试的局限性
角色测试能让你对单个用户在网站上的潜在体验产生实际、逼真的印象。然而，它无法提供更抽象报告中所能传达的信息广度。高质量的无障碍性或可用性审计理想情况下应同时包含两者。抽象的审计能为你提供关于网站无障碍性的硬性事实；而角色测试则能让人更深入地理解实际情况。