提高键盘可访问性的 3 个简单技巧

我想写一篇关于我最喜欢的无障碍主题之一——键盘无障碍——的博客文章！我经常不费吹灰之力就测试了它，因为作为一名开发者，我经常使用键盘。我用它来浏览应用程序、浏览网页，以及在浏览器上浏览数百万个标签页（还有谁会犯这种错误呢，哈哈）。

什么是键盘辅助功能

键盘辅助功能可以确保您在任何时候都不会完全依赖鼠标。这意味着您可以使用键盘浏览网页。您尝试过吗？我现在已经习惯使用键盘导航了，因为我讨厌使用鼠标，但每当我听到技术人员和非技术人员都用震惊的眼神看着我，因为他们没想到居然可以用键盘浏览页面时，我总是感到震惊。

除了我偏爱使用键盘之外，为什么键盘对于无障碍访问如此重要？有些人患有运动性震颤，难以控制肌肉。有些人几乎无法使用双手。盲人经常将键盘与屏幕阅读器配合使用。即使是那些不得不使用更高级辅助技术的人，他们中的大多数人也模拟了普通键盘的功能。因此，这意味着让我们的网站和应用程序支持键盘访问可以解决各种无障碍访问问题！而且，如果您及早考虑，并且不要过度修改，这通常会是一个非常有趣的过程！

提示 1：停止使用 div，使用语义 HTML

我见过很多人设计精美的交互式应用。我点击一个漂亮的汉堡图标，菜单会从屏幕顶部以精妙的动画效果精美地显示出来。我进入博客页面，开始使用选择列表筛选主题。选择列表有一个简洁优雅的下拉菜单。然后我尝试使用我的tab按键……

怎么回事？我的焦点指示器直接跳过了汉堡图标。这是否意味着我无法打开菜单？还有其他我不知道的打开菜单的方法吗？我去那个花哨的选择列表找主题，却怎么也打不开。想象一下，如果你完全依赖键盘，你会是什么感觉？我写这篇文章的时候很生气，因为别人不注意这一点，我就很生气。谢谢你听我的长篇大论。

为什么这些项目在我们的键盘上不起作用？让我们看一下该菜单的 HTML。

<div class="hamburger-menu">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>

为什么这不是实现可访问性的最佳方法？因为有一个叫 tabindex 的东西。tabindex 最简单的定义，也最不复杂的，就是它定义了该项目是否可聚焦。可聚焦是什么意思？它意味着你可以用键盘访问它！

Tabindex 取整数值。但是，为了简单起见，也为了便于讲解最佳实践，我们将其精简为两个最常用的值：0和-1。简而言之，0= 可聚焦，-1= 不可聚焦。

默认情况下，所有浏览器的链接、按钮和表单元素都是可聚焦的。这意味着它们的 TabIndex 为 0。div 的默认 TabIndex 是多少？你能根据我无法聚焦的情况猜一下吗？

PSA：如果您尝试在不调整 tabindex 的情况下创建<div>类似按钮的内容，它将无法通过键盘访问。即使您为其添加了，默认情况下，它也不会在屏幕阅读器上正常显示tabindex="0"。您最好使用 HTML 的定义方式，并将汉堡菜单制作成一个<button>元素。大多数人不喜欢这样做，因为按钮的默认浏览器样式。但您猜怎么着？您可以使用 CSS 解决这个问题！双赢！另一个好处是，由于按钮的默认行为和事件监听器，您无需修改 div 即可使其完全像按钮一样运行。

这就是我重新格式化上述 HTML 的方式（有关与之相关的 CSS 请参见下文.visually-hidden）：

<button class="hamburger-menu">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
  <span class="visually-hidden">Menu</span>
</button>
<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>

提示 2：始终提供跳过主导航的选项

因为我在这里完全是出于同理心，所以我们从人的角度来谈谈这是什么意思。想象一下，你因为某种原因无法使用鼠标。你第一次访问一个网站，想仔细浏览导航，看看你想去哪里。你用键盘找到了页面。

想象一下，当你只想浏览内容时，进入页面后却不得不再次切换整个导航栏。这对于我的菜单来说可能不是什么大问题，因为它只有 3 个链接。但说实话，网络上到处都是大型菜单！如果这些大型菜单真的可以访问的话（哈哈，要知道，很多菜单都无法访问），那听起来真是太麻烦了。

解决这个问题的方法非常简单。HTML<body>中标签下的第一个元素应该是一个链接，内容是“跳转到主内容”。href值应该是一个与主包装器 ID 匹配的书签值。以下是我在当前博客上的做法：

<a class="focusable visually-hidden" href="#main-content">Skip to main content</a>
...
<nav class="menu-main">
  <ul class="menu">
    <li class="menu-item"><a href="/about">About</a></li>
    <li class="menu-item"><a href="/blog">Blog</a></li>
    <li class="menu-item"><a href="/contact">Contact</a></li>
  </ul>
</nav>
...
<main id="main-content">
...
</main>

正如您在此处看到的，href 值#main-content与元素的 id 匹配<main>。这样一来，如果有人点击此链接，他们就会直接进入主内容区域，而无需在整个导航过程中使用 Tab 键。这对于已经熟悉该网站或从其他来源点击链接的用户也很有帮助。

我在我的网站上做了一些设置，只有当你聚焦到某个链接时才会显示它。这样，它只会在你第一次按下 Tab 键时出现。这是我关联到.focusable和的CSS .visually-hidden：

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

.focusable.visually-hidden:focus {
  position: relative;
  left: 0;
  width: auto;
  height: auto;
  overflow: auto;
}

在你的网站上实现这个功能应该非常简单。你甚至可以复制粘贴我的 HTML 代码作为链接，并将类名复制到你的 CSS 中。

提示 3：不要删除焦点指示器

什么是焦点指示器？默认情况下，它们通常是浏览器特定的轮廓，围绕着 tabindex 为 0 的元素。在 Google Chrome 中，默认焦点如下所示：

在 Firefox 中，默认焦点如下所示：

在 Safari 中，默认焦点如下所示：

不要因为设计师觉得不好看就移除焦点指示器，你可以设计高对比度的指示器，让它更符合你网站的品牌形象。我就是这么做的：

不过，无论你做什么，都不要用outline: none;CSS 写代码。感谢你来听我的 TED 演讲。

希望这些技巧能帮助您入门键盘辅助功能。如有任何疑问，欢迎在Twitter上联系我。如果您想了解更多关于我的信息以及我对辅助功能的看法，欢迎订阅我的双周新闻通讯。

鏂囩珷鏉ユ簮锛�https://dev.to/lkopacz/3-simple-tips-to-improve-keyboard-accessibility-5hc8