Menu
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>
373
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/
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
