Using Aria to make a div table accessible

Question

Using Aria to make a div table accessible

9.9k views Asked by DotyDot At 23 June 2015 at 16:18

Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands

Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data.

Solutions: Only using div is it possible to make this accessible?

<!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>

Original Q&A

There are 2 answers

Rani Einav On 16 October 2017 at 21:05

I've added ARIA attributes to the code so screen reader could read it properly.

<!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>

**PiranhaGeorge** · Accepted Answer · 2015-06-23 16:28:18

I don't know if this will actually work considering these roles are intended for real tables. Using an actual table would be a much better idea.

Anyway, your roles could be improved.

Looks like your columnheader context is wrong. The header row should use the 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>

See: http://rawgit.com/w3c/aria/master/aria/aria.html#columnheader

Also, if this 'table' is not interactive you should use role="table", not role="grid". See note: http://rawgit.com/w3c/aria/master/aria/aria.html#grid

If the reason for the 'div table' is that you need a responsive table, see: https://css-tricks.com/responsive-data-tables/

TechQA.

Using Aria to make a div table accessible

There are 2 answers

Related Questions in HTML

Related Questions in WAI-ARIA

Popular Questions

Popular Tags

Trending Questions