开发人员最常见的 Web 可访问性错误及其解决方法

遗憾的是，可访问性往往没有得到应有的重视。在开发后期实现网站的可访问性比在开发过程中更难。

无障碍访问至关重要，但遗憾的是，除非客户提出要求（例如政府网站），否则公司通常不会将其视为优先事项。事实上，所有网站都应该具有包容性，如果残障用户无法访问您的服务，您甚至可能面临巨额罚款。

万维网联盟 (W3C)制定了一套Web 内容可访问性指南，并设定了三个符合性级别：A（最低）、AA 和 AAA（最高）。AAA 的符合性要求比较难达到，但我始终建议以最高级别为目标，这样您的网站最终至少应该达到 AA 级别，这也是大多数政府网站所要求的。

值得注意的是，这些指南并非只适用于开发者，在设计阶段，选择颜色、字体大小等也需要考虑很多因素。以下是我注意到在开发过程中经常出现的问题，以及你以后应该如何应对这些问题。但这绝不是一份完整的清单，所以请你务必熟悉这些指南。

删除焦点样式

这是人们常犯的一个大错误。我们都知道默认的焦点样式确实会毁掉一个设计，但它们的存在是有原因的。有些用户由于行动不便，无法使用鼠标，所以他们需要使用键盘来浏览你的网站。如果你删除这些样式，他们就不知道自己即将执行什么操作。

那么，我们如何才能兼顾可访问性和美观性呢？:focus-visible是一个伪类，类似于:focus，旨在解决用户使用鼠标点击时焦点样式仍然可见的问题。遗憾的是，由于它目前仍属于CSS4 工作草案的一部分，因此尚未在浏览器中广泛使用。

我个人使用focus-visible polyfill。这样我就可以关闭默认的焦点样式：

{ 
  outline: none;
}

然后，我可以为每个需要焦点的元素单独设置样式，或者使用 polyfill 添加的新 .focus-visible 类为所有元素设置样式。例如：

.focus-visible
{
  outline: 1px solid $brilliant-rose;
}

或设置特定元素的样式：

.top-link{
  border-bottom: 1px solid transparent;

  &.focus-visible
  {
    outline: none;
    border-bottom: 1px solid $brilliant-rose;
  }
}

元素无法制表

焦点样式设置得很好，但我们需要确保用户能够通过 Tab 键切换到具有操作的元素。因此，选择正确的 HTML 元素至关重要。锚链接和按钮都自动支持 Tab 键，但按钮也可以通过空格键触发。我使用的一般规则是：

• 按钮 — 用于触发页面上的操作，例如打开菜单或提交表单等 JavaScript 操作
• 锚点——使用这些锚点将用户带到另一个页面或页面的另一部分

如果您使用其他元素（例如 div），则必须添加 tabindex 属性并确保在输入时调用该事件。例如：

<div tabindex="0">Test Element</div>

可以让元素按照其在 DOM 中的显示顺序进行 Tab 操作，但如果你有一个 onClick 操作，用户将无法按 Enter 键。有多种方法可以实现这一点，例如，如果你使用 React

<div tabindex="0" onKeyPress={keyPress}>Test Element</div>

然后检查回车键

  if (event.key === "Enter") {
    //action here
  } 
}

我很少遇到需要通过按钮来实现这一目的的情况。

我最近遇到的一个问题是，没有 href 值的锚点无法跳转。这是因为我用了一个库来滚动到页面的其他部分。你可以添加 # 来解决这个问题，但如果只使用 JavaScript，你真的应该考虑一下它是否更适合按钮元素。这里没有明确的答案。

Tab 键顺序不合理

有时，尤其是在使用内容管理系统 (CMS) 时，标记可能会按正常顺序添加。样式设置完成后，看起来没问题，但当你使用 Tab 键时，顺序就不对了。实际上，你应该始终尝试按顺序排列元素，但如果遇到这种情况，则必须手动使用tabindex属性来设置顺序。

没有正确隐藏可制表元素

另一件需要记住的重要事情是，即使某个项目隐藏在视图之外，也并不意味着它无法被 Tab 键选中。如果您使用了 CSS 属性（例如 opacity: 0），情况就会如此。从技术上讲，该元素仍然可以被聚焦，如果您是纯键盘用户，这可能会让您感到困惑。**请确保使用 display: none 或 visibility: hidden **，这样可以防止用户聚焦于该元素。如果这会影响动画，那么您可以使用的一个技巧是在动画结束后应用样式。

使用图标作为按钮

如今，几乎每个网站都能看到这种图标。问题在于，很多网站没有考虑到屏幕阅读器用户的需求，所以没有这个图标的描述。有些人会给链接或按钮添加 title 属性，但你不应该依赖 title 属性来
实现可访问性。遗憾的是，title 属性在不同设备、浏览器和屏幕阅读器软件之间并不一致。即使是aria-label也不应该被依赖。

最简单的方法是添加一些隐藏在屏幕之外的文本，这些文本只能由屏幕阅读器读出。有几种方法可以做到这一点，这里有一个示例。不要使用 display:none，因为这样也不会被读出。

{
  clip-path: inset(100%);
  clip: rect(1px 1px 1px 1px); 
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

使用示例

<button>
  <i class="fa-times"></i>
  <span class="visually-hidden">Close Menu</span>
</button>

我个人已经开始使用内联 SVG 图标，而不是字体图标。内联 SVG 可以包含 和 标记，因此，如果您能够在 SVG 中添加这些标记，则无需添加视觉上隐藏的额外文本。如果您使用功能元素，情况也是如此，您可以使用 alt 属性。

我也遇到过一个场景：我有一个可重复使用的内联 SVG 文件，需要不同的描述。在这种情况下，我在 SVG 元素上使用了aria-hidden属性，并使用视觉上隐藏的文本作为描述。重要的是不要让屏幕阅读器用户对多个描述感到困惑。

也许我们应该为所有用户添加更多文本。我在这里读过一些文章，认为单靠图标其实不太方便用户使用。

使用不合适的链接文本

想象一下，你是一位屏幕阅读器用户，正在浏览一长串链接。每个链接都显示“点击此处”或“阅读更多”，这难道不足够清晰吗？我们需要确保链接文本本身具有描述性。

有些情况下，添加长篇描述性文字会显得非常糟糕。我曾经开发过一个使用CMS系统列出活动的网站，每个活动旁边都有一个订票链接。如果把整个活动描述都放在按钮样式的链接上，网站的整体外观会大打折扣。

这时，视觉隐藏文本又能发挥作用了。我们可以为屏幕阅读器用户添加扩展描述，而不会破坏网站的美观。

<button>
  <span>Book Tickets</span>
  <span class="visually-hidden"> for X event on the DD of MM YYYY</span>
</button>

将可访问性测试作为标准测试的一部分！

正如你所见，这些都是在开发过程中需要做的非常简单的小事，但如果你必须回到网站并添加这些内容，那将花费很长时间。请将这些内容纳入你的标准流程。

最初发布于 Medium