使用伪类创建可访问表单

各位优秀的开发者们，大家好！ 在这篇文章中，我将带您使用语义 HTML 和一个名为 :focus-within 的强大 CSS 伪类来创建一个简单的联系表单。 :focus-within 类允许对焦点进行出色控制，并让您的用户了解他们在体验中的确切位置。 在我们深入之前，让我们先了解一下 Web 可访问性的核心内容。

表单可访问性？

您很可能在各个地方或缩写词 a11y 中听到了“可访问性”这个词。 这意味着什么？ 这是一个有许多答案的好问题。 当我们看现实世界时，可访问性意味着像在您的企业浴室中放置尖锐物品容器，确保为轮椅使用者提供坡道，以及为有需要的人提供外围设备，例如大号打印键盘。

可访问性的范围不止于此，我们还需要意识到数字可访问性，不仅要考虑外部用户，还要考虑内部同事。 颜色对比度是一个低垂的果实，我们可以扼杀在萌芽状态。 在我们的工作场所，要确保如果有任何员工需要辅助技术（例如屏幕阅读器），我们已安装并提供该技术。 有很多事情需要考虑。 本文将重点关注 Web 可访问性，并牢记 WCAG（Web 内容无障碍指南）。

当您想要强调用户实际上正在与元素交互时，此伪类非常有用。 例如，您可以更改整个表单的背景颜色。 或者，如果焦点移入输入，当焦点移入该输入时，您可以使输入元素的标签变粗并变大。 代码片段和示例中下面发生的事情正是使表单可访问的原因。 :focus-within 只是我们利用 CSS 的优势的一种方式。

如何聚焦

在可访问性和 Web 体验方面，焦点是指视觉指示器，指示在页面上、UI 中或组件内正在与某个元素进行交互。 CSS 可以判断交互式元素何时获得焦点。

始终确保可聚焦元素周围的焦点指示器或环形始终保持整个体验中的适当颜色对比度。

焦点以这种方式编写，如果选择，可以对其进行样式设置以匹配您的品牌。

:focus {
  * / INSERT STYLES HERE /*
}

无论如何，永远不要将您的轮廓设置为 0 或 none。 这样做会删除整个体验中所有用户的可见焦点指示器。 如果您需要删除焦点，可以，但请确保稍后将其添加回来。 当您从 CSS 中删除焦点或将轮廓设置为 0 或 none 时，它会删除所有用户的焦点环。 这在使用 CSS 重置时很常见。 CSS 重置会将样式重置为空白画布。 这样，您就可以负责空白画布，并根据需要对其进行样式设置。 如果您希望使用 CSS 重置，请查看 Josh Comeau 的重置。

*不要做下面这些！*

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

向内看！

使用 CSS 样式设置焦点的最酷方式之一就是本文的主题。 如果您还没有查看 :focus-within 伪类，一定要看看！ 在使用语义标记和 CSS 方面，有很多隐藏的宝石，而这只是其中之一。 许多被忽略的东西默认情况下是可访问的，例如，语义标记默认情况下是可访问的，应该始终用于 div。

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

header、nav、main、section、aside 和 footer 都是语义元素。 h1 和 ul 也是语义和可访问的。

除非需要创建自定义组件，否则 div 可以与 ARIA（可访问的富互联网应用程序） 配合使用。 我们将在以后的文章中深入探讨 ARIA。 现在，让我们关注……看看我做了什么……这个 CSS 伪类。

:focus-within 伪类允许您在包含的任何后代元素获得焦点时选择一个元素。

:focus-within 实际操作！

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

上面的示例代码将添加橙色的背景颜色、一些填充以及将标签的颜色更改为黑色。

最终产品看起来像下面这样。 当然，样式设置的可能性是无限的，但这应该让您走上一条良好的道路，使 Web 变得对每个人都更易于访问！

使用 :focus-within 的另一个用例是将标签变粗、更改颜色或放大它们，以便视力障碍的用户可以使用。 此示例代码看起来像下面这样。

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

根据 Can I use，:focus-within 在各个浏览器中都具有良好的支持。

结论

在发布软件时，始终要将创建出色的可访问的用户体验作为重中之重，不仅要考虑外部用户，还要考虑内部用户。 我们作为开发人员，从高级领导到基层员工，都需要意识到其他人面临的挑战，以及我们如何成为 Web 平台的倡导者，使其变得更美好。

使用语义标记和 CSS 等技术来创建包容的空间，是让 Web 变得更美好的关键部分，让我们继续前进，改变人们的生活。

在 CSS-Tricks 上查看另一个关于 使用 :focus-within 的有用资源。