Question

上下文：我有一个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>

Answer 1

我不知道这是否真的有用，因为这些角色适用于真实表格。使用实际表格会更好。

无论如何，你的角色可以改进。

看起来您的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

另外，如果这个＆＃39;表＆＃39;您不应该使用role="table"，而不是role="grid"。请参阅注释：http://rawgit.com/w3c/aria/master/aria/aria.html#grid

如果＆＃div;表格的原因是＆＃39;是您需要一个响应表，请参阅：https://css-tricks.com/responsive-data-tables/

Answer 2

我已经在代码中添加了ARIA属性，因此屏幕阅读器可以正确读取它。

<!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-header-group;
        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="row">
    <div class="Cell" role="columnheader" id="a1">
        <p>Name</p>
    </div>
    <div class="Cell" role="columnheader" id="a2">
        <p>Symbol</p>
    </div>
    <div class="Cell" role="columnheader" id="a3">
        <p>Quantity</p>
    </div>
</div>    <div class="Row" role="row">
        <div class="Cell" role="gridcell" aria-labelledby="a1">
            <p>Bank of America corp</p>
        </div>
        <div class="Cell" role="gridcell" aria-labelledby="a2">
            <p>BAC</p>
        </div>
        <div class="Cell" role="gridcell" aria-labelledby="a3">
            <p>139.00</p>
        </div>
    </div>
    <div class="Row" role="row">
        <div class="Cell" role="gridcell" aria-labelledby="a1">
            <p>Ebay Inc</p>
        </div>
        <div class="Cell" role="gridcell" aria-labelledby="a2">
            <p>Ebay</p>
        </div>
        <div class="Cell" role="gridcell" aria-labelledby="a3">
            <p>12.00</p>
        </div>
    </div>
</div>

</body>
</html>

使用Aria使div表可访问

2 个答案: