CSS/ARIA Accessible Table

It is possible, although not advisable, to create a table without using the TABLE, TH, TD, or other table-related elements. However, this can be effective when combined with responsive website design to create a table that has more robust support for resizing content for smaller screens. The following table is created using only DIVs and div elements, but still retains its accessibility features with the use of different CSS and ARIA elements.

Table Code

First, you need to define all of the elements within the table as table cells. Since we are going to be adding a role attribute to almost all of the the table elements, you can add this to your style sheet to ensure that all DIV elements are displayed as the appropriate corresponding table element.

<style>
  div[role="table"] { display: table; }
  div[role="table"] > div:first-of-type { display: table-caption; }
  div[role="rowgroup"] { display: table-row-group; }
  div[role="row"] { display: table-row; }
  div[role="cell"], div[role="columnheader"], div[role="rowheader"] { display: table-cell; }
</style>

Then add this code to your page to create the table. Add additional columns and rows as necessary, but be sure and leave the table description in this exact position (first child of role=table) or you will need to modify the CSS code to point to the correct location. Note that if you have more than one table on the page, you will also need to adjust the ID and aria-describedby value because the ID must be unique on the page. Code for a 3x3 table is shown, add other columns and rows as needed.

<div id="table" role="table" aria-label="Table Name" aria-describedby="table_caption">
  <div id="table_caption">Table description</div>
  <div role="rowgroup">
    <div role="row">
     <div role="columnheader">Header 1</div>
     <div role="columnheader">Header 2</div>
     <div role="columnheader">Header 3</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
     <div role="rowheader">Row 1 Header</div>
     <div role="cell">Row 1 Data 1</div>
     <div role="cell">Row 1 Data 2</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
     <div role="rowheader">Row 2 Header</div>
     <div role="cell">Row 2 Data 1</div>
     <div role="cell">Row 2 Data 2</div>
    </div>
  </div>
 </div>