如何使块级锚标记可访问？

Question

我需要为辅助技术创建一个可访问的网站。我遇到的一个问题是块级锚标记。代码类似这样：

<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>

我的目标是让整个块（图像、标题、段落文本和两个 div）都可点击，但屏幕阅读器可以将链接阅读为“探索哺乳动物”而不是“哺乳动物我们有大量的狗，猫和仓鼠。在树上探索哺乳动物黑猫。此外，这是一个响应式网站，因此 div 在桌面上是并排的，但在移动设备上堆叠在一起，并且两个 div 的动画会在页面滚动时出现。

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

Answer 1

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

在这种情况下，您可以在<a> 上使用aria-label 来覆盖其中的内容。根据您的屏幕阅读器，它可能会单独读取图像，但仍会使用 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>