释放我无法访问的标签之心

Suzy Naschansky 来自 HTMHell 降临日历

<h2 id="article1-heading">All About Dragons</h2>  
<p>I like dragons. Blah blah blah blah blah.</p>  
<p>
  <a id="article1-read-more" aria-labelledby="article1-read-more article1-heading">Read more</a>  
</p>  

看到那个 aria-labelledby 属性了吗？ 它将标记中的两个 ID 链接起来，一个用于标题 (#article1-heading)，另一个用于链接 (#article1-read-more)。 发生的情况是，屏幕阅读器将替换链接标签之间的现有语义标签，并使用来自两个元素的内容，并将它们一起宣布为单个文本字符串。

Read more All About Dragons

每当我意识到有些东西我认为应该知道但实际上不知道时，我总是很不好意思。 这绝对是其中之一，我非常感谢 Suzy 分享了它。

我最近确实遇到了这种情况，我应该这样做。 我总是尽量避免在同一页面上出现大量“阅读更多”链接，但在处理 15 个帖子的循环内容时，想出不同的内容非常困难（即使有 资源可以提供帮助）。 而且，如果出于美观原因我们需要保持标签简短——设计要求等等——那就更具挑战性了。 aria-labelledby 属性提供了我想要的东西：一致的视觉标签和更多针对辅助技术的上下文公告。

只有当您想要用于无障碍标签的文本已经存在于页面上时，这才是一件好事。 否则，您需要使用 aria-label，并注意它仅适用于无法使用语义 HTML 访问地标记事物的交互式元素。

如果您在 WordPress 之类的 CMS 中工作（我正在使用），您可能需要做一些额外的工作。 就像当我将“按钮”块添加到页面时，这些是我可以使用的选项

其中有一些不错的选项，但与无障碍标记无关。 如果你想知道“高级”面板里有什么

相反，您需要在 HTML 模式下编辑按钮

但在执行此操作之前，您必须向要使用的标题添加一个 ID。 “标题”块具有相同的“高级”面板设置，用于添加锚点，它将在元素上注入一个 ID

然后您可以进入 HTML 模式编辑“按钮”块，并添加 accessible-labels ID 以及按钮本身的 ID。 这是已编辑标记的示例

<div class="wp-block-buttons">
  <!-- wp:button -->
  <div class="wp-block-button">
    <a id="read-more-button" aria-labelledby="read-more-button heading-accessible-labels" class="wp-block-button__link wp-element-button" href="https://webaim.org/projects/million/">
      Read Report
    </a>
  </div>
  <!-- /wp:button -->
</div>

太棒了！ 但是 WordPress 并不喜欢那样

您可以尝试解决该问题

哎。“按钮”块必须转换为“自定义 HTML”块。 这有点违背了 WordPress 在视觉编辑方面很擅长的整个理念。 我快速搜索了一下，想看看是否有插件可以为某些块添加 ARIA 标记选项，但一无所获。 这似乎是一个很好的机会，可以创建一个插件或 为可以使用这些选项的块提交 PR。