从缺少替代文本到内容冗余，互联网上一些领先的电子商务网站存在潜在的网页无障碍问题，这可能会使残障购物者难以使用。
在缺乏明确和具体的美国政府监管和指导的情况下，2016年针对电子商务网站的网页无障碍失败诉讼数量可能会增加。为了说明这一点，彭博社（Bloomberg）去年11月发表的一份报告指出，2015年美国公司收到了超过40起网页无障碍诉讼。
在线零售商当然不希望赶走消费者，甚至不希望让他们购物变得更加困难。相反，大多数电子商务公司都在努力消除购买路径上的障碍。但网页无障碍并非一门完美的科学。
网页无障碍定义不明确
在线商家在使网站对残障购物者易于访问方面至少面临三个挑战。
首先，网页无障碍并没有得到定义，或者至少没有明确的定义。长期以来一直参考的是《Web内容无障碍指南（WCAG）》，它是万维网联盟（W3C）网页无障碍倡议的一部分。但这些W3C指南尽管很好，可能还不足以应对所有情况。在美国制定网页无障碍规则之前，遵守这些不存在的规则是不可能的。因此，使用并遵循WCAG是否足够尚不确定。
其次，并非所有的网页无障碍建议都完全合理或绝对必要。例如，美国卫生与公众服务部可用性网站上的指南13:5实际上表示每个表单字段都应有关联的标签。但这并不一定是必要的做法。屏幕阅读器和辅助装置通常可以解释字段的名称属性，而且很多时候表单字段是隐藏的，因此这条规则可能需要为隐藏输入提供一个隐藏标签。
第三，某些无障碍问题内置于电子商务平台的核心文件中。例如，当企业仅在国内销售时，WooCommerce的某些版本会产生孤立的表单标签。由于未描述具体情况，这相对难以纠正，因为它是WooCommerce核心功能的一部分。
行业现状概览
鉴于这种环境，我选择了20家美国领先零售商的电子商务网站，然后将它们的首页提交给WebAIM的WAVE网页无障碍评估工具进行评估。
该工具生成一份报告，指出网页无障碍方面的问题。这项非科学性调查的目标是识别电子商务网站上常见或可能是最常见的网页无障碍问题类型。
当我们查看每个网站的错误和警告数量时，有两点需要考虑。
首先，每次错误实例都会被计数。因此，如果一个网站犯了同样的错误10次，WAVE会统计所有10次。
其次，网站不断变化。列表中的几个网站在连续几天内使用WAVE进行了审查。随着网站内容的变化，这些网站的错误和警告数量也发生了变化。因此，错误或警告计数不是静态的；它只是一个快照。
| 网站 | 错误 | 警报 | 对比度问题 | 问题类型 |
|---|---|---|---|---|
| amazon.com | 32 | 166 | 3 | 图片缺少替代文本、替代文本过长、文本冗余。 |
| walmart.com | 115 | 505 | 208 | 图片缺少替代文本、链接为空、替代文本冗余。 |
| costco.com | 7 | 102 | 13 | 图片缺少替代文本，表单标签缺失，替代文本冗余，替代文本过长。 |
| ebay.com | 26 | 195 | 26 | 链接为空，链接冗余。 |
| target.com | 3 | 49 | 6 | 链接为空，标题文本冗余。 |
| macys.com | 12 | 103 | 0 | 链接为空，表单标签孤立。 |
| apple.com | 11 | 3 | 2 | 空链接，冗余链接。 |
| kohls.com | 123 | 199 | 34 | 链接图片缺少替代文本，空链接，冗余链接。 |
| nordstrom.com | 15 | 599 | 2 | 空链接，拼写错误的表单标签，冗余标题文本。 |
| gap.com | 18 | 46 | 5 | 图片缺少替代文本，冗余链接，字体过小。 |
| rakuten.com | 61 | 129 | 26 | 图片缺少替代文本、链接为空、替代文本冗余、可疑的链接文本。 |
| starbucks.com | 7 | 10 | 3 | 表单标签为空，noscript 元素。 |
| staples.com | 71 | 563 | 31 | 表单标签为空，图片缺少替代文本，标题文本冗余，链接冗余。 |
| officedepot.com | 14 | 39 | 69 | 链接为空，标题文本冗余，替代文本冗余。 |
| petsmart.com | 12 | 89 | 4 | 图片缺少替代文本，标题文本冗余。 |
| tractorsupply.com | 15 | 99 | 8 | 链接为空，缺少替代文本，链接冗余。 |
| narnesandnoble.com | 18 | 105 | 30 | 图片缺少替代文本，附近图片具有相同的替代文本，链接冗余。 |
| footlocker.com | 26 | 277 | 15 | 链接为空，缺少替代文本，存在 tabindex，标题链接冗余。 |
| williams-sonoma.com | 17 | 45 | 21 | 图像映射区域缺少替代文本，附近图像的替代文本相同。 |
| dell.com | 5 | 288 | 16 | 空链接，附近图像的替代文本相同，标题文本冗余。 |
图像缺少替代文本
WAVE 工具发现，许多被调查的网站未为显示的所有图像提供替代文本。令人担忧的是，部分网站访客可能无法看到这些图像，从而导致重要信息丢失。
WAVE 指出，Amazon 网站上存在多处旋转 GIF 动画（用于指示页面某部分正在加载）缺少替代文本的问题。
并非所有缺失替代文本的例子都严重到不可接受。Amazon 因多处使用旋转 GIF 动画（用于指示页面某部分正在加载）而受到批评。Walmart 网站也有多个此类错误实例，这些似乎都是用于跟踪的图像。
为避免此问题，请使用文本替代方案来告知购物者。
附近图像具有相同的替代文本
有几个网站因在页面上彼此靠近的图像使用相同的替代文本而发出警告。这并不违反准则，但强烈暗示页面上可能存在冗余内容，或者输入了错误的替代文本。
以 Dell 网站为例，有 67 处与此类警告相关的实例，均与网站的弹出式导航有关。在这种情况下，该警告确实代表了一个错误，因为问题在于 Dell 在所有导航图像中使用了句点（.）作为替代文本。
空链接
引用 WebAIM 的话：“如果链接不包含文本，则用户将无法了解该链接的功能或目的。这会给键盘和屏幕阅读器用户带来困惑。”
这类错误可能导致某些用户无法找到产品或完成购买。Ebay 首页上有 19 个空链接。这些链接通常是将图标包裹在链接中，而在某些情况下，图标仅通过 CSS 提供。
冗余
从替代文本到标题标签，再到更多内容，冗余在 WAVE 评估工具中引发了大量警报。当相邻链接指向同一位置、相邻标题表达相同内容，甚至相邻的 alt 属性值相同时，用户可能会感到困惑或恼火。
例如，Nordstrom 因冗余的标题文本产生了 520 条警报，主要出现在其导航区域。导航中的每个标题都有一个属性，其值与链接文本完全一致，例如“Shop Gift Cards”和“Shop Gift Cards”。
在某些屏幕阅读器上，title 属性和链接文本都会被朗读出来。购物者实际上会听到“Shop Gift Cards, Shop Gift Cards, Recommendations, Recommendations, Stores and Events, Stores and Events”等重复内容。
对比度错误
根据 WAVE 工具的结果，所有被调查的网站都存在对比度错误，即某些区域的文本颜色与背景颜色的比率低于 4.5:1。
低对比度会使部分网站访客难以看清或阅读内容。WCAG 指南规定的对比度比率为上述的 4.5:1。不过，建议使用至少 7:1 的对比度。