Clever Geek Handbook

Using Aria to access a div table

Context: I have a div table that the client wants the screen reader to access like a normal html table uses table commands

Problem: Unable to get aria to work to declare the header as a string value in order to maintain consistency with the data.

Solutions: Only using a div makes it 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>
+3


source to share


2 answers


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

Anyway, your roles can be improved.

It looks like your context is columnheader

wrong. The title bar should use 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"

instead 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/

+7


source


I added ARIA attributes to the code so that a screen reader can read it correctly.



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


source






More articles:


All Articles