平台新闻：使用 :focus-visible，BBC 的新字体，声明式 Shadow DOM，A11Y 和占位符

本周的新闻中充满了可访问性内容，从使用 :focus-visible 和输入占位符的细微差别，到可访问的字体以及 Safari 中 :display: contents 的错误。 此外，还有一个片段，用于支持样式封装的基本 Web 组件。

现在可能是开始使用 :focus-visible 的好时机

CSS :focus-visible 伪类取代 :focus，成为为键盘用户创建自定义焦点指示器的新方法。 Chrome 最近在用户代理样式表中将 :focus 切换到 :focus-visible，并且由于该更改，默认焦点环 不再显示 当用户单击或点击按钮时。

从 :focus 切换到 :focus-visible 时，请考虑向后兼容性。 您的键盘焦点指示器应该在所有浏览器中清晰可见，而不仅仅是在支持 :focus-visible 的浏览器中。 如果您只对 :focus-visible 进行样式设置，不支持的浏览器将显示默认焦点环，根据您的设计，“可能根本不够清晰或可见。”

button {
  background: white;
}

button:focus-visible {
  outline: none;
  background: #ffdd00; /* gold */
}

今天开始使用 :focus-visible 的一个好方法是在 :focus 规则中定义焦点样式，然后在 :focus:not(:focus-visible) 规则中立即撤消这些相同的样式。 这虽然不是最优雅和直观的模式，但在所有浏览器中都非常有效。

• 不支持 :focus-visible 的浏览器使用 :focus 规则中定义的焦点样式，完全忽略第二个样式规则（因为 :focus-visible 对它们来说是未知的）。
• 在支持 :focus-visible 的浏览器中，如果 :focus-visible 状态也不处于活动状态，第二个样式规则将恢复 :focus 规则中定义的焦点样式。 换句话说，只有在 :focus-visible 也处于活动状态时，:focus 规则中定义的焦点样式才会生效。

button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}

BBC 创建了一种更易访问的字体

BBC 创建 他们自己的定制字体，名为 Reith（以 BBC 创始人约翰·雷斯爵士的名字命名）。 他们的目标是创建一个支持多种语言，并且更易于阅读的字体，尤其是在小型设备上。 该字体已在混合能力用户组（阅读障碍和视力障碍）以及不同屏幕尺寸上进行了测试。

我们 [BBC] 使用 Helvetica 或 Arial。 我们也使用 Gill Sans 作为公司字体。 这些字体是在一百年前为印刷品设计的，[并且] 在当今的现代数字屏幕上表现不佳。

注意：如果您想在 Wakamai Fondue 中检查 Reith Sans 和 Reith Serif，您可以快速访问 BBC 网站上 Firefox 的 DOM 检查器中“页面上的所有字体”部分中的 WOFF2 文件的 URL。

display: contents 在 Safari 中仍然不可访问

CSS display: contents 值已在浏览器中支持 自 2018 年起。 具有此值的元素“不生成任何框”并被其子元素有效地替换。 这在 flex 和 grid 布局中尤其有用，其中 contents 值可用于将更深层的嵌套元素“提升”为 flex/grid 项目，同时保留语义文档结构。

不幸的是，此功能最初发布时存在一个 实现错误，该错误从浏览器的可访问性树中删除了该元素。 例如，将 display: contents 应用于 <ul> 元素会导致屏幕阅读器不再提及该元素。 从那时起，此错误已在 Firefox 和 Chrome 中修复（在最新版本中）。

在 Chrome 和 Firefox 中，屏幕阅读器通知用户“主导航”包含一个“列表，2 个项目”。 在 Safari 中，后半部分丢失，因为 <ul> 和 <li> 元素不存在于可访问性树中。 在 Apple 修复 Safari 中的此错误 之前，在语义元素上使用 contents 值时要小心，并在屏幕阅读器中进行测试，以确认您的页面在 Safari 中也是可访问的。

在覆盖占位符文本的颜色时设置 opacity

可访问性专家建议 避免使用占位符，如果可能的话，因为它们可能会被误认为是预填充文本，并且当用户开始输入值时会消失。 但是，许多网站（包括维基百科和 GOV.UK）在只包含一个输入字段（如搜索字段）的简单 Web 表单中使用占位符。

占位符可以通过广泛支持的 ::placeholder 伪元素进行样式设置。 如果您的设计要求占位符文本使用自定义颜色，请确保同时指定 color 和 opacity。 后者是 Firefox 所需的，Firefox 默认 将 opacity: 0.54 应用于 ::placeholder。 如果您没有覆盖此值，您的占位符文本在 Firefox 中可能对比度不足。

.search-field::placeholder {
  color: #727272;
  opacity: 1; /* needed for Firefox */
}

声明式 Shadow DOM 可以帮助普及样式封装

Shadow DOM 的关键功能之一是样式封装，其中外部页面的样式规则与 Shadow DOM 树内部的元素不匹配，反之亦然。 为了使用此功能，您需要将 Shadow DOM 树附加到元素（通常是自定义元素，如 <my-element>），并将元素的模板（通常来自 DOM 中的 <template> 元素）复制到元素新创建的 Shadow DOM。

这些步骤只能在 JavaScript 中执行。 如果您只对样式封装感兴趣，并且不需要为您的元素添加任何动态功能，那么以下是最少量的 JavaScript 代码，用于创建具有 Shadow DOM 的自定义元素。

customElements.define(
  "my-element",
  class extends HTMLElement {
    constructor() {
      super();

      // find <template id="my-template"> in the DOM
      let template = document.getElementById("my-template");

      // make a copy of the template contents…
      let content = template.content.cloneNode(true);

      // …and inject it into <my-element>’s shadow DOM
      this.attachShadow({ mode: "open" }).appendChild(content);
    }
  }
);

有关样式封装的示例，请参阅 Miriam Suzanne 在 CodePen 上的 <media-object> 元素 。 范围样式位于 HTML 面板中的 <template> 元素中。 注意，此 CSS 代码可以使用简单的选择器，如 article，它们只匹配 <media-object> 的 Shadow DOM 中的元素。

JavaScript 可能很快就不再需要在现代浏览器中创建这种类型的样式封装。 本周早些时候，Chrome 成为第一个发布 Google 声明式 Shadow DOM 提案的浏览器。 如果它成为标准，此功能还将使 Shadow DOM 与服务器端渲染相结合成为可能。