我有一个具有背景图像的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元素可访问?
-包含CSS类的html元素,这些CSS类包含bg图像
最佳答案
将aria-labelledby
与ID一起使用将使文本可供需要它的屏幕阅读器使用。如果您想明显地隐藏一些内容,我建议使用Yahoo提出的方法。将CSS添加到样式表后,只需在HTML中添加一个类(在本例中为sr-only
)即可明显隐藏文本。
该代码将是:
.sr-only {
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
这会将内容剪切掉(
clip
),隐藏所有溢出,对于不以“正确”方式呈现clip
的浏览器,请对其进行绝对定位,以使它们脱离整体布局流程。关于html - 如何使用aria-labeledby启用辅助功能?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38293611/