嘿，你们这些优秀的开发人员！在这篇文章中，我将带您使用语义 HTML 和一个很棒的 CSS 伪类创建一个简单的联系表单，称为 :focus-within。 该 :focus-within 类可以很好地控制焦点，并让您的用户知道这正是他们在体验中所处的位置。在我们开始之前，让我们先了解一下网络可访问性的核心。

表单可访问性？

您很可能到处都听说过“可访问性”一词或数字名称 a11y。这是什么意思？这是一个很好的问题，有很多答案。当我们审视现实世界时，可访问性意味着在您的企业浴室中配备锐器容器，确保为需要轮椅的人员提供坡道，以及为任何需要的人提供大型印刷键盘等外围设备。

可访问性的范围还不止于此，我们还需要认识到数字可访问性，不仅对于外部用户，而且还对于内部同事。 色彩对比是一个容易实现的目标 我们应该能够防患于未然。在我们的工作场所，确保如果任何员工需要屏幕阅读器等辅助技术，我们都会安装并可用。有很多事情需要考虑。本文将重点关注网络可访问性 WCAG（网页内容可访问性指南） 在心。

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

如何集中注意力

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

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

Focus 的写法如下，如果您选择设计样式，则可以将其设计为与您的品牌相匹配。

:focus {
  * / INSERT STYLES HERE /*
}

无论你做什么，永远不要将你的大纲设定为 0 or none。这样做将为整个体验中的每个人消除可见的焦点指示器。如果您需要删除焦点，可以，但请确保稍后将其添加回来。当您从 CSS 中移除焦点或将轮廓设置为 0 or none，它会为所有用户移除对焦环。使用 CSS 重置时经常会看到这种情况。 CSS 重置会将样式重置为空白画布。这样，您就可以根据自己的意愿对空白画布进行设计。如果您想使用 CSS 重置，请查看 乔什·科莫的重置.

*请勿执行以下操作！

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

向内看！

本文将介绍使用 CSS 设置焦点样式的最酷方法之一。如果您还没有查看过 :focus-within 伪类，一定要看看！在使用语义标记和 CSS 时，有很多隐藏的秘密，这就是其中之一。许多被忽视的东西默认情况下都是可访问的，例如，语义标记默认情况下是可访问的，并且应该始终在 div 上使用。

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/zh-CN/">Home</a></li>
      <li><a href="/zh-CN/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;
}

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

最终产品如下所示。当然，改变样式的可能性是无限的，但这应该能让您走上正轨，让每个人都更容易访问网络！

使用的另一个用例 :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;
}

:focus-within 据报道，还具有全面的浏览器支持 我可以用吗.

结论

在交付软件时，创造令人惊叹的、易于访问的用户体验始终应该是首要任务，不仅是在外部，在内部也是如此。作为开发人员，一直到高级领导层，我们都需要认识到其他人面临的挑战，以及我们如何成为网络平台的大使，使其变得更美好。

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

查看 CSS-Tricks 上的另一个很棒的资源 使用：焦点内.

• SEO 支持的内容和 PR 分发。 今天得到放大。
• PlatoData.Network 垂直生成人工智能。 赋予自己力量。 访问这里。
• 柏拉图爱流。 Web3 智能。 知识放大。 访问这里。
• 柏拉图ESG。 碳， 清洁科技, 能源， 环境， 太阳能， 废物管理。 访问这里。
• 柏拉图健康。 生物技术和临床试验情报。 访问这里。
• Sumber: https://css-tricks.com/accessible-forms-with-pseudo-classes/