使用Aria使div表格具有可访问性

Question

使用Aria使div表格具有可访问性

4

背景：我有一个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>

- DotyDot

实际表有什么问题吗？ - PiranhaGeorge

这段代码看起来像是一个表格。 - mothmonsterman

他们希望以div的形式展示，理由不明。我反对这种做法，但我想知道是否有其他方法解决问题。用真正的表格会容易得多，因为信息本来就是表格形式的。如果您使用屏幕阅读器，它会先宣布标题，然后才是行，但它不会重新宣布标题，所以您无法知道哪个单元格与哪列相关。 - DotyDot

1

我正在创建同样的东西 - 我想使用div来实现更好的响应式设计。这个问题对于辅助功能部分的答案帮了我很大的忙。 - MaxRocket

2个回答

0

我已经在代码中添加了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>

- Rani Einav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PiranhaGeorge · Accepted Answer

我不确定这个方法是否有效，因为这些角色是为真实的表格而设计的。使用真实的表格会是一个更好的选择。

无论如何，您的角色可以得到改进。

看起来你的`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 如果您需要响应式表格，请参见：https://css-tricks.com/responsive-data-tables/