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>
@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