使用 Aria 使 div table 可访问

Question

上下文： 我有一个 div table 客户希望像常规屏幕一样访问 reader html table 正在使用 table 命令

问题： 无法让 aria 使用行值来声明 header 以保持数据的完整性。

解决方案： 只使用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

考虑到这些角色是为真正的 table 设计的，我不知道这是否真的有效。使用实际的 table 会更好。

总之，你的角色还有待提高。

看来您的 columnheader 上下文有误。 header 行应该使用 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

此外，如果此 'table' 不是交互式的，您应该使用 role="table"，而不是 role="grid"。见注释：http://rawgit.com/w3c/aria/master/aria/aria.html#grid

如果 'div table' 的原因是您需要响应式 table，请参阅：https://css-tricks.com/responsive-data-tables/

Answer 2

我已将 ARIA 属性添加到代码中，因此屏幕 reader 可以正确读取它。

<!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 table 可访问

Using Aria to make a div table accessible

html

wai-aria