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

我需要使一个网站的辅助技术访问。我遇到的一个问题是块级别的锚标记。代码与此类似：

<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会进入动画

---

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

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

在这种情况下，您可以在

改为执行以下操作：

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