小编Dot*_*Dot的帖子

使用Aria使div表可访问

上下文:我有一个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> …
Run Code Online (Sandbox Code Playgroud)

html html5 wai-aria

3
推荐指数
1
解决办法
7503
查看次数

标签 统计

html ×1

html5 ×1

wai-aria ×1