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>
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/
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>
Related
I have a html table, which shows informations about a movie.
I am trying to change this table to a div layout because of the responsiveness. With table when I reduce the window widht, the text overlaps.
this is my table:
.label{
font-weight: bold;
text-align: right;
}
.blue-box{
background-color: green
}
<div class="blue-box">
<table>
<tr>
<td class="label">Nome:</td>
<td>Del Toro</td>
<td class="label">Data de cadastro:</td>
<td>19/05/2017</td>
<td class="label">Data de atualizacao:</td>
<td>19/05/2017</td>
</tr>
<tr>
<td class="label">Categoria de produto:</td>
<td>Diverso</td>
<td class="label">Ultimo Prêmio:</td>
<td>Leão De Ouro</td>
<td class="label">Filme Indicado</td>
<td>Shape of Water</td>
</tr>
</table>
<div>
</div>
with divs I was able to do much of the transformation, but with the labels itself, I can't figure out a way to align the labels like when I use the table layout:
.label{
font-weight: bold;
float: left;
text-align: right;
display: inline;
margin-right: 5px
}
.blue-box{
background-color: aquamarine;
overflow: hidden;
}
.father{
float: left;
margin: 0px 5px 0px 5px ;
}
.content{
float: left;
display: inline;
}
<div class="blue-box">
<div class="father">
<div class="label">
Nome:
</div>
<div class="content">
Del Toro
</div>
</div>
<div class="father">
<div class="label">
Data de cadastro:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Data de atualizacao:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Categoria de produto:
</div>
<div class="content">
Diverso
</div>
</div>
<div class="father">
<div class="label">
Ultimo Prêmio:
</div>
<div class="content">
Leão de Ouro
</div>
</div>
<div class="father">
<div class="label">
Filme indicado:
</div>
<div class="content">
Shape of water
</div>
</div>
</div>
What I'm missing? There's no way to achieve this with only HTML?
First of all, if responsiveness is what you're after, you need to find the way to employ a responsive framework, Boostrap or Material UI (flexbox base) This will solve a lot of your problems at different brakpoints of the viewport without bloating your stylesheet with media queries. Second, you need to modify your HTML to allow for compartmentalization of containers. Responsiveness works best when you use compartmentalization and specificity.
Here is how I would rework your HTML and solve the alignment issue with fair amount of CSS
.row {
width: 100%;
display: inline-block;
margin: 10px auto;
background: green;
}
.col4 {
display: inline-block;
width: 33.33333333%;
margin: 1% 0 1% 0;
position: relative;
padding-right: 15px;
float: left;
padding-left: 15px;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col4 div{
display: inline-block;
}
label{
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
<div class="row">
<div class="col4">
<div>
<label>Nome:</label>
<span>Del Toro</span>
</div>
<div>
<label>Categoria de produto:</label>
<span>Diverso</span>
</div>
</div>
<div class="col4">
<div>
<label>Data de cadastro:</label>
<span>19/05/2017</span>
</div>
<div>
<label>Ultimo Prêmio:</label>
<span>Leão De Ouro</span>
</div>
</div>
<div class="col4">
<div>
<label>Data de atualizacao:</label>
<span>19/05/2017</span>
</div>
<div>
<label>Filme Indicado:</label>
<span>Shape of Water</span>
</div>
</div>
</div>
See the example here in my CODEPEN (just change the values in your HTML)
Now, here is one with Bootstrap. Check out how I was able to produce the same and IT IS RESPONSIVE without making any additional media queries. Just by using the classes container, row, and col-xs-12 col-sm-4
Boostrap is very documented here
muito fácil, né!
.blue-box{
background: green;
padding: 1rem;
}
.father{
display: inline-block;
margin: .5rem;
}
.label{
font-weight: bold;
float: left;
width: 80px;
}
.content{
float: left;
width: 70px;
}
<div class="blue-box">
<div class="father">
<div class="label">
Nome:
</div>
<div class="content">
Del Toro
</div>
</div>
<div class="father">
<div class="label">
Data de cadastro:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Data de atualizacao:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Categoria de produto:
</div>
<div class="content">
Diverso
</div>
</div>
<div class="father">
<div class="label">
Ultimo Prêmio:
</div>
<div class="content">
Leão de Ouro
</div>
</div>
<div class="father">
<div class="label">
Filme indicado:
</div>
<div class="content">
Shape of water
</div>
</div>
</div>
You can achieve almost the same result as table using DIV and CSS,
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Gross but sometimes useful.
</div>
</div>
</div>
have a look at https://css-tricks.com/almanac/properties/d/display/
the advantage of using this is that you have some extra features like vertical-align having it set up like this.
if you want me to modify your code to something like this. give me a buzz.
I wanted to create a responsive table using plain css with two columns and sub tables with columns.
<div class="table">
<div class="column main-column">
<h3>Send Security Code</h3>
<div class="table">
<div class="column">
<span>Voice Primary</span>
<span>Text Primary</span>
</div>
<div class="column">
<span>Voice Secondary</span>
<span>Text Secondary</span>
</div>
</div>
<button>Send Code</button>
</div>
<div class="column column-border main-column">
<h3>Send password via email</h3>
<button>Send Email</button>
</div>
</div>
here is the link for plnkr with css based solution to create a responsive tables
and columns
https://plnkr.co/edit/TmT5lEaXs1LWTEOEEp1w?p=preview
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.table{
width:100%;
}
.column{
width: 100%;
}
#media (min-width: 500px) {
.column{
display: inline-block;
width: 49%;
vertical-align: top;
}
.column-border{
border-left: 1px dotted #996;
}
}
.column span{
display:block;
padding: 10px;
}
.column button, .column h3{
margin-left: 10px;
}
.main-column{
height: 200px;
}
</style>
</head>
<body>
<div class="table">
<div class="column main-column">
<h3>Send Security Code</h3>
<div class="table">
<div class="column">
<span>Voice Primary</span>
<span>Text Primary</span>
</div>
<div class="column">
<span>Voice Secondary</span>
<span>Text Secondary</span>
</div>
</div>
<button>Send Code</button>
</div>
<div class="column column-border main-column">
<h3>Send password via email</h3>
<button>Send Email</button>
</div>
</div>
</body>
</html>
Image of the problem:
How do I go from the one on the left, to the one on the right, using CSS?
You can use a table:
<table>
<tr>
<td>You own</td>
<td>20</td>
</tr>
<tr>
<td>Price</td>
<td>20</td>
</tr>
<tr>
<td>BPS</td>
<td>0.50</td>
</tr>
</table>
or floating divs:
<div style="display:inline-block;">
<div style="float:left; width:150px;">You own</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">Price</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">BPS</div>
<div style="float:left;">0.50</div>
</div>
<div>
<div id="left"> <!-- float left -->
<p>You Own></p>
<p>Price</p>
<p>BPS</p>
</div>
<div id="right">
<p>20</p>
<p>20</p>
<p>0.50</p>
</div>
</div>
Two divs
<div class="box">
Your own:<br />
Price:<br />
PBS
</div>
<div class="box">
20<br />
20<br />
50
</div>
CSS
.box {
float:left;
padding-right:40px;
}
While I am in agreement that this can be a table, you can easily do this with floats.
.container {
padding: 0.5em;
width: 200px;
background: #333;
color: #fff;
}
.button {
background: #efefef;
padding: 5px;
color: #000;
margin-bottom: 0.5em;
}
.item-header {
font-weight:bold;
float:left;
width: 45%;
clear:both;
}
<div class="container">
<div class="button">Buy Foreign Worker</div>
<div class="items">
<div class="item-header">You Own:</div>
<div class="item-value">20</div>
<div class="item-header">Price:</div>
<div class="item-value">20</div>
<div class="item-header">BPS:</div>
<div class="item-value">0.5</div>
</div>
</div>
All you are doing is making the header values float to the left, and the clear ensures that it starts on a new row.
I'm not using the tag, so I can't use the colspan attribute.
I'd like to create a table with three cells in the first row, one cell in the last row and two cells in the other rows.
Here's my code (minimal):
.row {
display: table-row;
}
.cell {
display: table-cell;
}
HTML:
<div style="display: table;">
<div class="row" style="width: 100%;">
<div class="cell" style="width: 33% !important;">
aaaa
</div>
<div class="cell" style="width: 33% !important;">
bbbbb
</div>
<div class="cell" style="width: 33% !important;">
ccccc
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
ddddd
</div>
<div class="cell" style="width: 50% !important;">
eeeee
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
fffff
</div>
<div class="cell" style="width: 50% !important;">
ggggg
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 100% !important;">
last cell
</div>
</div>
</div>
And this is what I get (I can't post images): http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png
I would build this layout as follows.
For the HTML:
<div class="parent">
<div class="row r3">
<div class="cell">aaaa</div>
<div class="cell">bbbbb</div>
<div class="cell">ccccc</div>
</div>
<div class="row r2">
<div class="cell">ddddd</div>
<div class="cell">eeeee</div>
</div>
<div class="row r2">
<div class="cell">fffff</div>
<div class="cell">ggggg</div>
</div>
<div class="row r1">
<div class="cell">last cell</div>
</div>
</div>
and apply the following CSS:
.row {
display: table;
border: 1px dashed blue;
width: 100%
}
.cell {
display: table-cell;
border: 1px dotted blue;
}
.r3 .cell {
width: 33.333333%;
}
.r2 .cell {
width: 50%;
}
.r1 .cell {
width: 100%;
}
Use display: table for each div.row block element with 100% width.
You don't need to explicitly define a CSS table row, one will be created anonymously as needed.
See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/
You're trying to emulate a table with divs. Why? The <table> tag is made for exactly this kind of tabular data.
Spending way too much time on (what should be) a simple div table. PROBLEM: the column headers will not resize to the width of the table, or the rows. The rows appear okay, but the column headers don't.
Trying to avoid having fixed widths as the next table I post may have a different number of columns. With the following code the column headers are all scrunched to the left, next to each other, but they don't match the rows...
<style type="text/css">
.table-container {
display: table;
width: 50%;
table-layout: fixed;
border-collapse: collapse;
}
.table-heading {
font-weight: bold;
display: table-caption;
background-color: #e9e9e9;
text-align: center;
padding: 8px;
line-height: 21px;
font-size: 18px;
color: #CA8327;
}
.table-row {
display: table-row;
text-align: center;
}
.table-row-shade {
display: table-row;
text-align: center;
background-color: #e9e9e9;
}
.table-col {
display: table-cell;
text-align: center;
border: 1px solid #ca8327;
}
</style>
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-col">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/Speedy1/t3e3ken6/
You only put table-col rather than table-row
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-row"> <!-- must be a table-row -->
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/vgjb578s/
Try this http://jsfiddle.net/t3e3ken6/1/
It's because you have put the class "table-col" next to your heading. Change it to "table-row" and the problem is solved.
<div class="table-row">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>