Skip to content

Instantly share code, notes, and snippets.

@visiongeist

visiongeist/table-grid-accessibility-test.html

Last active April 25, 2019 12:41
Show Gist options
  • Save visiongeist/bdaa0da523b462b89af7 to your computer and use it in GitHub Desktop.
Save visiongeist/bdaa0da523b462b89af7 to your computer and use it in GitHub Desktop.
Download ZIP
Testing Accessibility of Table and ARIA role grid
Raw
table-grid-accessibility-test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Table Accessibility</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css" rel="stylesheet">
<style id="grid-css">
/* make grid elements work like a table */
grid-table { display: table }
grid-tr { display: table-row }
grid-thead { display: table-header-group }
grid-tbody { display: table-row-group }
grid-tfoot { display: table-footer-group }
grid-col { display: table-column }
grid-colgroup { display: table-column-group }
grid-td, grid-th { display: table-cell }
grid-caption { display: table-caption }
table, grid-table {
border: 3px solid black;
border-collapse: separate;
border-spacing: 2px;
}
td, grid-td { border: 1px solid grey; }
th, grid-th { font-weight: bold; }
</style>
<style>
.col-2 {
max-width: 1000px;
box-sizing: border-box;
}
.col-2:after {
content: '';
display: block;
clear: both;
}
.col-2 > .col,
.col-2 > .col {
width: 50%;
float: left;
}
</style>
</head>
<body>
<h1>Testing Accessibility of Table and ARIA role grid</h1>
<p>This page uses custom-elements (not registered on the document!) with ARIA attributes.
Trying to achieve the same level of accessibility as a native table.</p>
<p>
<strong>Used ARIA roles</strong>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#grid">grid</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#row">row</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#gridcell">gridcell</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#rowgroup">rowgroup</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#colgroup">colgroup</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#columnheader">columnheader</a></li>
</ul>
<strong>Used ARIA attributes</strong>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-colcount">aria-colcount</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-rowcount">aria-rowcount</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-colindex">aria-colindex</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-rowindex">aria-rowindex</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-colspan">aria-colspan</a></li>
<li><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-rowspan">aria-rowspan</a></li>
</ul>
</p>
<h2>CSS</h2>
<p>Most of the table layouting behavior can be achieved by leveraging the
display property. However there is no equivalent for <em>colspan</em> and <em>rowspan</em></p>
<pre><code class="src css" data-src="grid-css"></code></pre>
<h2>Trivial (Example A)</h2>
<div class="col-2">
<div class="col">
<h3>Table</h3>
<table id="a-table">
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
<td>Cell 1-3</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
<td>Cell 2-3</td>
</tr>
<tr>
<td>Cell 3-1</td>
<td>Cell 3-2</td>
<td>Cell 3-3</td>
</tr>
</table>
</div>
<div class="col">
<h3>Grid</h3>
<grid-table role="grid" id="a-grid">
<grid-tr role="row">
<grid-td role="gridcell">Cell 1-1</grid-td>
<grid-td role="gridcell">Cell 1-2</grid-td>
<grid-td role="gridcell">Cell 1-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell">Cell 2-1</grid-td>
<grid-td role="gridcell">Cell 2-2</grid-td>
<grid-td role="gridcell">Cell 2-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell">Cell 3-1</grid-td>
<grid-td role="gridcell">Cell 3-2</grid-td>
<grid-td role="gridcell">Cell 3-3</grid-td>
</grid-tr>
</grid-table>
</div>
</div>
<div class="col-2">
<pre class="col"><code class="src html" data-src="a-table"></code></pre>
<pre class="col"><code class="src html" data-src="a-grid"></code></pre>
</div>
<h2>With head, body, foot (Example B)</h2>
<div class="col-2">
<div class="col">
<h3>Table</h3>
<table id="b-table">
<thead>
<tr>
<th>Column head 1</th>
<th>Column head 2</th>
<th>Column head 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column foot 1</th>
<th>Column foot 2</th>
<th>Column foot 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
<td>Cell 1-3</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
<td>Cell 2-3</td>
</tr>
<tr>
<td>Cell 3-1</td>
<td>Cell 3-2</td>
<td>Cell 3-3</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<h3>Grid</h3>
<grid-table role="grid" id="b-grid">
<grid-thead role="rowgroup">
<grid-tr role="row">
<grid-th role="columnheader" id="b-head-1">Column head 1</grid-th>
<grid-th role="columnheader" id="b-head-2">Column head 2</grid-th>
<grid-th role="columnheader" id="b-head-3">Column head 3</grid-th>
</grid-tr>
</grid-thead>
<grid-tfoot role="rowgroup">
<grid-tr role="row">
<grid-th role="columnheader" id="b-foot-1">Column foot 1</grid-th>
<grid-th role="columnheader" id="b-foot-2">Column foot 2</grid-th>
<grid-th role="columnheader" id="b-foot-3">Column foot 3</grid-th>
</grid-tr>
</grid-tfoot>
<grid-tbody role="rowgroup">
<grid-tr role="row">
<grid-td role="gridcell" aria-labelledby="b-head1 b-foot-1">Cell 1-1</grid-td>
<grid-td role="gridcell" aria-labelledby="b-head2 b-foot-2">Cell 1-2</grid-td>
<grid-td role="gridcell" aria-labelledby="b-head3 b-foot-3">Cell 1-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell" aria-labelledby="b-head1 b-foot-1">Cell 2-1</grid-td>
<grid-td role="gridcell" aria-labelledby="b-head2 b-foot-2">Cell 2-2</grid-td>
<grid-td role="gridcell" aria-labelledby="b-head3 b-foot-3">Cell 2-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell" aria-labelledby="b-head1 b-foot-1">Cell 3-1</grid-td>
<grid-td role="gridcell" aria-labelledby="b-head2 b-foot-2">Cell 3-2</grid-td>
<grid-td role="gridcell" aria-labelledby="b-head3 b-foot-3">Cell 3-3</grid-td>
</grid-tr>
<grid-tbody>
</grid-table>
</div>
</div>
<div class="col-2">
<pre class="col"><code class="src html" data-src="b-table"></code></pre>
<pre class="col"><code class="src html" data-src="b-grid"></code></pre>
</div>
<h2>With Caption (Example C)</h2>
<div class="col-2">
<div class="col">
<h3>Table</h3>
<table id="c-table">
<caption>This is the table's caption</caption>
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
<td>Cell 1-3</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
<td>Cell 2-3</td>
</tr>
<tr>
<td>Cell 3-1</td>
<td>Cell 3-2</td>
<td>Cell 3-3</td>
</tr>
</table>
</div>
<div class="col">
<h3>Grid</h3>
<grid-table role="grid" aria-labelledby="c-caption" id="c-grid">
<grid-caption id="c-caption">This is the table's caption</grid-caption>
<grid-tr role="row">
<grid-td role="gridcell">Cell 1-1</grid-td>
<grid-td role="gridcell">Cell 1-2</grid-td>
<grid-td role="gridcell">Cell 1-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell">Cell 2-1</grid-td>
<grid-td role="gridcell">Cell 2-2</grid-td>
<grid-td role="gridcell">Cell 2-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell">Cell 3-1</grid-td>
<grid-td role="gridcell">Cell 3-2</grid-td>
<grid-td role="gridcell">Cell 3-3</grid-td>
</grid-tr>
</grid-table>
</div>
</div>
<div class="col-2">
<pre class="col"><code class="src html" data-src="c-table"></code></pre>
<pre class="col"><code class="src html" data-src="c-grid"></code></pre>
</div>
<h2>Using rowspan and colspan (Example D)</h2>
<div class="col-2">
<div class="col">
<h3>Table</h3>
<table id="d-table">
<tr>
<td colspan="2">Cell 1-1</td>
<td>Cell 1-3</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
<td rowspan="2">Cell 2-3</td>
</tr>
<tr>
<td>Cell 3-1</td>
<td>Cell 3-2</td>
</tr>
</table>
</div>
<div class="col">
<h3>Grid</h3>
<grid-table role="grid" aria-colcount="3" aria-rowcount="3" id="d-grid">
<grid-tr role="row">
<grid-td role="gridcell" aria-colindex="1" aria-rowindex="1" aria-colspan="2">Cell 1-1</grid-td>
<grid-td role="gridcell" aria-colindex="3" aria-rowindex="1">Cell 1-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell" aria-colindex="1" aria-rowindex="2">Cell 2-1</grid-td>
<grid-td role="gridcell" aria-colindex="2" aria-rowindex="2">Cell 2-2</grid-td>
<grid-td role="gridcell" aria-colindex="3" aria-rowindex="2" aria-rowspan="2">Cell 2-3</grid-td>
</grid-tr>
<grid-tr role="row">
<grid-td role="gridcell" aria-colindex="1" aria-rowindex="3">Cell 3-1</grid-td>
<grid-td role="gridcell" aria-colindex="2" aria-rowindex="3">Cell 3-2</grid-td>
</grid-tr>
</grid-table>
</div>
</div>
<div class="col-2">
<pre class="col"><code class="src html" data-src="d-table"></code></pre>
<pre class="col"><code class="src html" data-src="d-grid"></code></pre>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>
var t = document.querySelectorAll('code.src');
[].forEach.call(t, function(el) {
var src = document.getElementById(el.dataset.src);
el.textContent = src.outerHTML;
hljs.highlightBlock(el);
});
</script>
</body>
</html>
@7mary4
Copy link

7mary4 commented Oct 22, 2015

This is a great example of using advanced grid structures. Thank you for putting this together. Could you add something to the description that this is for ARIA 1.1? It would help avoid confusion as people look for aria-rowspan in the 1.0 specifications.

@joshueoconnor
Copy link

Yes, thanks for this - very useful for a quick test I needed to do. Appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment