要解决"Aria音频描述不适用于由多个div和span组成的控件"的问题,可以使用aria-labelledby属性结合id来提供音频描述。下面是一个示例代码:
HTML代码:
按钮1
按钮2
按钮1的描述信息
按钮2的描述信息
CSS代码:
.sr-only {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
在这个示例中,我们使用了aria-labelledby属性来指定按钮元素的描述信息。每个按钮元素都有一个与之对应的span元素,该span元素具有一个唯一的id,并且使用了CSS样式.sr-only
来隐藏它们。通过利用CSS的position: absolute
和left: -9999px
,我们将span元素移出屏幕,但仍然保持可访问性。
这样,当屏幕阅读器读取按钮元素时,它会自动读取与之相关联的span元素的内容,从而提供音频描述。