html - 如何使用 aria-labelledby 启用可访问性？

Question

我有一个带有背景图片的 CSS 类

例如:

.my_class_bg_image { 
    background: url(myPhoto.jpg) 0 0 no-repeat;
}

我想让包含这个 CSS 类的页面易于访问。

我可以用这个吗？:

<span role="img" aria-labelledby="ddd" title="This is my bg image title" class="my_class_bg_image">
  <span id="ddd">This is my text which is shown when the image cannot be loaded, 
     but it's also there and invisible and when the image load succeeds
  </span>
</span>

如果没有，我怎样才能使这样的 html 元素可访问？ - 包含包含 bg 图像的 CSS 类的 html 元素

Answer 1

使用带有 ID 的 aria-labelledby 将使文本可供需要它的屏幕阅读器使用。如果你想明显地隐藏一些内容，我建议使用 Yahoo 提出的方法。将 CSS 添加到样式表后，您只需要向 HTML 添加一个类(在本例中为 sr-only)以明显地隐藏文本。

代码为:

.sr-only {
   height: 1px;
   width: 1px;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
   position: absolute;
}

这会将内容剪掉 (clip)，隐藏任何溢出，并且对于不以“正确”方式呈现 clip 的浏览器，绝对定位它们以便它们从整体布局流程中走出来。