残障互联网用户在浏览和在线购物时常常面临巨大挑战。或许多达百分之十的在线购物者患有某种残疾，例如视力低下或无法使用键盘，这会使他们难以理解内容和导航网站。
“无障碍审查”是一个每月推出的系列栏目，对在线商店进行坦诚评估，为电子商务商家提供改进其网站无障碍性的见解。本月，我们走访了Lori’s Wigsite，这是一家专营假发和发片的在线商店。其所有者Lori Roddey请求进行此次无障碍审查。
Lori’s Wigsite 是一个很好的例子，说明一个网站即使在设计时未考虑无障碍性，仍然能够提供相当程度的无障碍支持。我没有审查购物车本身，但网站的其余部分在无障碍方面表现出令人惊讶的合理水平。
现在，我不想给人留下 Lori’s Wigsite 是按照无障碍最佳实践构建的印象。事实并非如此。尽管如此，如果访问者稍加耐心，残障访客在访问该网站时仍有可能实现他们的目标。这不是一份评判 Lori’s Wigsite 在满足无障碍网络指南方面存在不足的评论。相反，这份评论关注的是残障用户在该网站上可能遇到的问题。
考虑站点布局
我首先审查的是整体站点布局。该站点使用表格进行结构化。从无障碍角度来看，这可能非常糟糕。然而，所使用的表格以这样一种方式构建：它们排列成正确的线性格式。也就是说，单元格的放置顺序与内容应被阅读的逻辑顺序相匹配。这仍然不是理想状态，但可以使用。
粗略浏览该网站后，我立即注意到表单控件和链接大量使用了图像。许多关键功能都是通过图像实现的。其中包括“查看购物车”、“加入购物车”以及站点搜索等。这意味着必须使用 alt 属性。事实上，对于最重要的位置，Lori’s Wigsite 确实使用了有效的 alt 属性。它们可能与图像的文本不完全匹配，但它们传达了关键信息，并对屏幕阅读器用户有效。
当然，也有一些例外情况。由于该站点使用表格进行布局，因此还使用了大量的间隔图像。这些图像完全没有 alt 属性。这看起来似乎是正确的策略，但从最佳无障碍角度来看，装饰性或间距图像应提供空的 alt 属性。屏幕阅读器会跳过具有空 alt 属性的图像，但某些屏幕阅读器会在未提供 alt 属性时读取图像的文件名。这会显著增加网站上的额外“噪音”，从而显著降低访问者查找必要信息的能力。
Lori’s Wigsite 主页。
alt 属性的使用
一般来说，包含文本的图片的 alt 属性应与图片上的文本完全一致。这并非绝对规则，因为有时为了在 alt 属性中更易于理解，可以对图片上的文本进行重新排序或改写。图片可以通过布局和文字大小传达意义，而这些意义在线性文本中通过词序和标点符号能更好地表达。不过，两者应尽可能接近。本网站的标志使用了过多的文本填充 alt 属性。这对大多数用户来说可能不易察觉，但对屏幕阅读器用户而言则显得繁琐。
仅使用键盘的用户
本网站最大的无障碍问题将影响依赖键盘访问的用户。这包括有视力障碍和无视力障碍的用户，尽管他们遇到的问题会略有不同。由于缺乏用于构建页面结构的标题元素以及缺乏帮助导航页面的跳过链接，无视力障碍用户必须通过逐个标签页遍历页面上的每个链接来导航页面。由于左侧边栏菜单（位于内容之前）非常广泛，屏幕阅读器用户在导航到所有内容区域之前需要按 44 次 Tab 键。
无法使用鼠标的有视力障碍用户也必须做同样的操作才能浏览页面。但他们还面临另一个问题。由于本网站上的链接在获得键盘焦点时外观没有显著变化，键盘导航者很难准确跟踪自己在页面上的位置。无视力障碍用户会听到链接文本被朗读出来，从而清楚了解链接的预期功能。然而，使用键盘的有视力障碍用户除了围绕元素的微弱虚线外，没有任何其他指示来表明他们在页面上的位置。
您会发现，屏幕阅读器用户在导航本网站时可用的关键方法之一是能够在链接之间快速跳转。这让我想到我要为本网站解决的最后一个无障碍项目：链接文本。Lori’s Wigsite 经常使用以“点击此处查看颜色图表”等变体形式表述的链接文本。不包含目标页面信息的链接文本对屏幕阅读器用户来说远不如详细链接文本有用。如果上述整个短语都被链接起来，其预期用途就会一目了然。脱离上下文查看链接文本是判断它们是否有助于用户的绝佳方式。如果您在不看到任何周围内容的情况下就能知道链接会将您带往何处，那么该链接就标记得很好。
无障碍建议
Lori’s Wigsite 接下来应该做什么？有一些简单的措施可以实施，这将大大提高本网站的无障碍性。以下是五项关键建议：
- 为所有间距和装饰性图片添加值为空的 alt 属性。
- 编辑模板，使用标题元素来组织导航菜单和主要内容。
- 定义链接在鼠标悬停或键盘激活时的外观变化。
- 在页面顶部添加跳过链接，以便键盘用户能够跳过导航部分。
- 审查网站上链接的文本内容，力求提供有意义且简洁的链接文字。