特定表HTML的可访问性遵从性
特定表HTML的可访问性遵从性
提问于 2021-12-08 20:55:21
我有一个HTML布局引擎，它有一个公共组件，可以在ol HTML、ul HTML和table HTML结构之间切换。
<component>
<ul>
<li>
<div> Enter Data here </div>
</li>
<li>
<div> Enter Data here </div>
</li>
</ul>
</component>或
<component>
<table>
<tr>
<div>
<th>
Enter Data here
</th>
<th>
Enter Data here
</th>
</div>
</tr>
<tr>
<div>
<td>
Enter Data here
</td>
<td>
Enter Data here
</td>
</div>
</tr>
<tr>
<div>
<td>
Enter Data here
</td>
<td>
Enter Data here
</td>
</div>
</tr>
</table>
</component> 我已经使用WAVE/AXE/灯塔来验证该表的HTML结构，它似乎工作得很好。
如果我的布局引擎在表HTML中创建了一些额外的div，会有什么问题吗？我的布局引擎在tr和td元素之间创建一个div。从可访问性的角度来看，这是否会产生任何问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-09 00:37:39
我不认为<table>结构是有效的，这将违反WCAG 4.1.1。说内容模型是“零或更多td、th和脚本支持元素”，这里定义了“脚本支持”，https://html.spec.whatwg.org/multipage/dom.html#script-supporting-elements-2，本质上是<script>元素。因此，将<div>作为<tr>的直接子级是无效的，并且可能会导致屏幕阅读器试图读取表时的可访问性问题。
Stack Overflow用户
发布于 2022-01-28 10:55:50
您可以使用<div role="row">而不是标记<tr>。链接到可访问的富互联网应用程序(WAI) 1.1。行角色
<component>
<div role="table">
<div role="row">
<span role="columnheader">
Enter Data here
</span>
<span role="columnheader">
Enter Data here
</span>
</div>
<div role="row">
<span role="cell">
Enter Data here
</span>
<span role="cell">
Enter Data here
</span>
</div>
<div role="row">
<span role="cell">
Enter Data here
</span>
<span role="cell">
Enter Data here
</span>
</div>
</div>
</component> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70281599
复制相关文章
相似问题
腾讯云开发者
