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

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

在这种情况下，您可以使用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>

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

1 个答案: