WebAIM - Web Accessibility In Mind

E-mail List Archives

Data table, forms vs content mode

for

From: escetic@gmail.com
Date: Oct 30, 2017 12:39PM

Using NVDA and IE, Chrome and FF I'm able to arrow correctly through this table (code below), in other words move between the individual cells with ctrl-alt-arrow.

But if I press the link, it places focus within the table but puts us into forms mode (which I don't think is announced). The user thus finds themselves in a table but unable to move around with the usual ctl-alt-arrows, which I think is unexpected. Also, the user won't know to ESC, since I don't think they hear they're in forms mode.

The link invokes the javascript getsElementByID and places focus accordingly because we must move between this table and an overlay, which is removed here for clarity.

In forms mode, ctl-alt-arrow behavior on a table seems suspended.

Any thoughts or solutions? I would fail this on 1.3.1. The dev says this is about 2.1.1 and since 2.1.1 says keyboard-only but doesn't specify key combinations, merely being able to tab through the table should be sufficient. I don't think the user will even know to tab here.

Thanks in advance!

Rob C

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="widthÞvice-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ieíge" />
<title>Table Test</title>
<script>
function a() {
document.getElementById("header1").focus();
}
</script>
<body>
<h1>Table Test</h1>
<p><a href="javascript:a()">test link</a></p>
<table tabindex="0">
<thead>
<tr>
<td tabindex="0"></td>
<th tabindex="0" scope="col" id="header 1">Header 1</th>
<th tabindex="0" scope="col">Header 2</th>
<th tabindex="0" scope="col">Header 3</th>
<th tabindex="0" scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<th tabindex="0" scope="row">Row header 1</th>
<td tabindex="0">Content 1 1</td>
<td tabindex="0">Content 2 1</td>
<td tabindex="0">Content 3 1</td>
<td tabindex="0">Content 4 1</td>
</tr>
<tr>
<th tabindex="0" scope="row">Row header 1</th>
<td tabindex="0">Content 1 2</td>
<td tabindex="0">Content 2 2</td>
<td tabindex="0">Content 3 2</td>
<td tabindex="0">Content 4 2</td>
</tr>
</tbody>
</table>
</body>
</html>