html - 如何使 block 级 anchor 标记可访问？

Question

我需要建立一个可使用辅助技术的网站。我遇到的一个问题是 block 级 anchor 标记。代码类似于:

<a href="/page">
  <div class="text">
    <h2>Mammals</h2>
    <p>We have a large selection of dogs, cats, and hamsters.</p>
    <p class="link-description">Explore Mammals</p>
  </div>
  <div class="image">
    <img src="/cat.jpg" alt="Black cat in a tree" />
  </div>
</a>

我的目标是让整个 block (图像、标题、段落文本和两个 div)可点击，但屏幕阅读器将链接读取为“探索哺乳动物”而不是“哺乳动物我们有很多狗可供选择，猫和仓鼠。探索哺乳动物树上的黑猫。”此外，这是一个响应式网站，因此 div 在桌面上并排，但在移动设备上堆叠在一起，并且当页面滚动时两个 div 会显示动画。

有人对如何克服所描述的可访问性问题有想法吗？

Answer 1

这不是可访问性问题，而是可用性问题。屏幕阅读器恰好是受其影响最大的受众。

在这种情况下，您可以使用 aria-label关于<a>覆盖其中的内容。根据您的屏幕阅读器，它可能会单独读取图像，但仍使用 aria-label文本。

<a href="/page" aria-label="Explore Mammals">
  <div class="text">
    <h2>Mammals</h2>
    <p>We have a large selection of dogs, cats, and hamsters.</p>
    <p class="link-description">Explore Mammals</p>
  </div>
  <div class="image">
    <img src="/cat.jpg" alt="Black cat in a tree" />
  </div>
</a>