我正在使用HTML制作一个表。它需要满足WCAG标准,但我有问题理解什么是一个可接受的表格标题。我可以用<h1>
和aria-describedby
代替<caption>
元素吗?
我遵循了一个W3网页可访问性教程-他们所有的例子都符合WCAG。虽然看起来我的表不符合WCAG H39使用标题元素将数据表标题与数据表关联。
基于W3的方法2,这是我目前拥有的:
<h1 id="tableHeading">Table of requests</h1>
<p>Some other text that is relevant to the page</p>
<table aria-describedby="tableHeading">
....
首先要理解元素可以有一个"可访问的名称";以及"易于理解的描述"。"可访问名称";通常被称为"名字"。并且是辅助技术用来引用元素的。例如,屏幕阅读器宣布的名字就是当你导航到元素和名字是什么语音界面用户会说选择元素("单击& lt; name>">)。
在您的示例中,指的是W3中的方法2,aria-describedby
正在设置"可访问的"描述";桌子的。<caption>
设置可访问的名称。注意,W3示例设置了和而不仅仅是aria-describedby
。
aria-describedby
而不使用<caption>
,那么您只设置了表的描述。表将没有名称供屏幕阅读器宣布,但它仍然会宣布描述。
所以你问题的答案是,"不完全"。您可以使用<h1>
和aria-describedby
,但它不能取代<caption>
,因为标题是可访问的名称桌子的。但是你可以稍微调整一下,使用<h1>
和aria-labelledby
而不是一个标题来设置可访问名称。
请注意,您可以有一个不可见的<caption>
,以便设置可访问名称(并且屏幕阅读器宣布它),以防您担心页面的美观性并且不想要一个可见的标题。可见的标题是最好的做法,但你当然可以隐藏它,如果需要的话。但是不要用CSSdisplay:none
隐藏标题。相反,用CSS隐藏它,使用"sr-only"将大小设置为1像素类。
我已经使用JAWS 2020和NVDA 2021.2在Chrome 94中测试了您的示例,我看不到在<table>
元素上使用aria-describedby
的<h1>
标签而不是使用<caption>
有任何问题。两个屏幕阅读器都以与本地<caption>
元素完全相同的方式宣布<h1>
和aria-describedby
,并在删除<caption>
元素时将<h1>
文本视为表的标题。
许多应用程序使用自定义表布局,而<caption>
不适用,因此它们依赖于aria-labelledby
或aria-describedby
来命名表并描述其内容。
在我看来,WCAG的建议是为了确保开发人员尽可能多地使用标准的HTML5元素,但是你使用<h1>
和aria-describedby
的方法达到了同样的效果。所以,尽可能使用标准的HTML5元素;在不可能的地方(例如,您无法控制那部分代码),您可以使用ARIA为屏幕阅读器实现相同的效果。