Title

Test marking up a series of DIVs as a table, and adding WAI-ARIA so a screen reater can access it.

Description

A Customer had a table made of DIVS, so that it would reflow with responsive design. Of course it didn't read the headers in JAWS. SO I created a mockup table with WAI-ARIA to test. Here are a series of divs marked up as a table using WAI-ARIA.

Findings

It works well in JAWS (Firefox, IE, Chrome) and VoiceOver with Safari. NVDA doesn't recognize it as a table but announces the row and column, table commands don't work on NVDA.

Customer ID

Customer Name

Customer Address

001

Mary

123 way st.

002

John

222 my st.

003

Debbie

333 your st.

004

Joe

444 your st.

Code Used

<div class="div-table" role="grid">

<div class="div-table-row-colhead" role="row">

<div class="div-table-col" role="columnheader">Customer ID</div>

<div class="div-table-col" role="columnheader">Customer Name</div>

<div class="div-table-col" role="columnheader">Customer Address</div>

</div>

<div class="div-table-row" role="row">

<div class="div-table-col" role="gridcell">001</div>

<div class="div-table-col" role="gridcell">Mary</div>

<div class="div-table-col" role="gridcell">123 way st.</div>

</div>

<div class="div-table-row" role="row">

<div class="div-table-col" role="gridcell">002 </div>

<div class="div-table-col" role="gridcell">John</div>

<div class="div-table-col" role="gridcell">222 my st.</div>

</div>

<div class="div-table-row" role="row">

<div class="div-table-col" role="gridcell">003</div>

<div class="div-table-col" role="gridcell">Debbie</div>

<div class="div-table-col" role="gridcell">333 your st.</div>

</div>

<div class="div-table-row" role="row">

<div class="div-table-col" role="gridcell">004</div>

<div class="div-table-col" role="gridcell">Joe</div>

<div class="div-table-col" role="gridcell">444 your st.</div>

</div>

</div>

CSS

<style>

  .div-table{

display:table; 

width:auto; 

background-color:#eee; 

border:1px solid  #0F0F0F; 

border-spacing:5px;/*cellspacing:poor IE support for  this*/

}


.div-table-row{

  display:table-row;

  width:auto;

  clear:both;

  }


.div-table-row-colhead{

  display:table-row;

  width:auto;

  clear:both;

  font-weight:bold;

  }


.div-table-col{

  float:left;/*fix for  buggy browsers*/

  display:table-column; 

  width:200px; 

  background-color:#ccc; 

  }

  </style>

Accessibility Support technology used

	JAWS	NVDA	VoiceOver
FireFox41	OK	Not OK	N/A
IE11.0.9	OK	Not OK	N/A
Chrome 46.02	OK	Not OK	N/A
Safari MacOS	N/A	N/A	OK

Comments

It's always best to use html table elements, but if there is a special reason for responsive layout not to, then ensure you add roles to the <div> tags.