Dot*_*Dot 3 html html5 wai-aria
上下文:我有一个div表,客户端希望屏幕阅读器可以像普通的html表一样使用表命令
问题:无法让aria工作以宣布带有行值的标题,以保持数据的完整性.
解决方案:只有使用div才能使其可访问？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
<title>Div Table Example</title>
</head>
<body>
<div class="Table" role = "grid" aria-readonly="true">
<div class="Title">
<p>Example</p>
</div>
<div class="Heading" role = "columnheader">
<div class="Cell">
<p>Name</p>
</div>
<div class="Cell" role = "columnheader">
<p>Symbol</p>
</div>
<div class="Cell" role = "columnheader">
<p>Quantity</p>
</div>
</div>
<div class="Row" role = "row">
<div class="Cell" role = "gridcell">
<p>Bank of America corp</p>
</div>
<div class="Cell" role = "gridcell">
<p>BAC</p>
</div>
<div class="Cell" role = "gridcell">
<p>139.00</p>
</div>
</div>
<div class="Row" role = "row"">
<div class="Cell" role = "gridcell">
<p>Ebay Inc</p>
</div>
<div class="Cell" role = "gridcell">
<p>Ebay</p>
</div>
<div class="Cell" role = "gridcell">
<p>12.00</p>
</div>
</div>
</div>
</body>
</html>
考虑到这些角色是用于真实表,我不知道这是否真的有效.使用实际表格会更好.
无论如何,你的角色可以改进.
看起来你的columnheader背景是错误的.标题行应该使用row role:
<div class="Heading" role="row">
<div class="Cell">
<p>Name</p>
</div>
<div class="Cell" role="columnheader">
<p>Symbol</p>
</div>
<div class="Cell" role="columnheader">
<p>Quantity</p>
</div>
</div>
请参阅:http://rawgit.com/w3c/aria/master/aria/aria.html#columnheader
此外,如果这个'表'不是交互式的,你应该使用role="table",而不是role="grid".请参阅注释:http://rawgit.com/w3c/aria/master/aria/aria.html#grid
如果'div table'的原因是您需要响应表,请参阅:https://css-tricks.com/responsive-data-tables/