Skip to content

Instantly share code, notes, and snippets.

@alexandre-mbm

alexandre-mbm/README.md

Last active October 20, 2015 03:21
Show Gist options
  • Save alexandre-mbm/dba9556897757010db65 to your computer and use it in GitHub Desktop.
Save alexandre-mbm/dba9556897757010db65 to your computer and use it in GitHub Desktop.
Download ZIP
(by guesswork) Accessibility test for the table of choosing of the GitHub's plans
Raw
README.md

(in portuguese) Isto é um ensaio de HTML básico para alcançar formas de implementar acessebilidade na tabela de escolha de planos de serviço que há durante o cadastro no GitHub. Experimente!

(in english) This is a basic HTML test to achieve ways of implementing accessibility in the table of choice of service plans that there is during the registration on GitHub. Try!!

Raw
table.html
<?xml version="1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Teste de acessibilidade em tabela com botões onClick()</title>
<style type="text/css">
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid gray;
padding: 15px;
}
td span, td div {
background-color: #ccc;
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
function alternar(e) {
if(e.textContent == "Sim")
e.textContent = "Não";
else
e.textContent = "Sim";
}
function alternarANCHOR(e) {
a = e.querySelectorAll("a")[0];
if(a.textContent == "Sim")
a.textContent = "Não";
else
a.textContent = "Sim";
}
function alternarDIV(e) {
div = e.querySelectorAll("div")[0];
if(div.textContent == "Sim")
div.textContent = "Não";
else
div.textContent = "Sim";
}
function alternarSPAN(e) {
span = e.querySelectorAll("span")[0];
if(span.textContent == "Sim")
span.textContent = "Não";
else
span.textContent = "Sim";
}
</script>
<h1>Teste de acessibilidade em tabela com botões onClick()</h1>
<h2> Tabela 1 ‒ onClick() na célula</h2>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td onclick="alternar(this)">Não</td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td onclick="alternar(this)">Não</td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td onclick="alternar(this)">Não</td>
</tr>
</table>
<h2> Tabela 2 ‒ onClick() em DIV dentro da célula</h2>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td><div onclick="alternar(this)">Não</div></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td><div onclick="alternar(this)">Não</div></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td><div onclick="alternar(this)">Não</div></td>
</tr>
</table>
<h2> Tabela 3 ‒ onClick() em SPAN dentro da célula</h2>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td><span onclick="alternar(this)">Não</span></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td><span onclick="alternar(this)">Não</span></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td><span onclick="alternar(this)">Não</span></td>
</tr>
</table>
<h1>Possível solução para os problemas denunciados</h1>
<pre>&lt;a tabindex=&quot;0&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;foo()&quot;&gt; content&lt;/a&gt;</pre>
<p>Fonte: <a href="http://jakub-g.github.io/accessibility/onclick/">Is your rich JavaScript app keyboard-friendly?</a></p>
<h2> Tentativa 1 ‒ onClick() na célula</h2>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td onclick="alternarANCHOR(this)"><a tabindex="0" href="javascript:void(0);">Não</a></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td onclick="alternarANCHOR(this)"><a tabindex="0" href="javascript:void(0);">Não</a></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td onclick="alternarANCHOR(this)"><a tabindex="0" href="javascript:void(0);">Não</a></td>
</tr>
</table>
<!-- <a tabindex="0" href="javascript:void(0);" onclick="foo()"> content</a> -->
<h2> Tentativa 2 ‒ onClick() em DIV dentro da célula</h2>
<p><font color="red">Esta tentativa, com DIV dentro de A, não foi aceita pelo <a href="https://validator.w3.org">validador W3C</a>. <b>De fato, ainda não há acessibilidade nesta tentativa 2.</b></font></p>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td><a tabindex="0" href="javascript:void(0);"><div onclick="alternar(this)">Não</div></a></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td><a tabindex="0" href="javascript:void(0);"><div onclick="alternar(this)">Não</div></a></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td><a tabindex="0" href="javascript:void(0);"><div onclick="alternar(this)">Não</div></a></td>
</tr>
</table>
<h2> Tentativa 3 ‒ onClick() em SPAN dentro da célula</h2>
<p><font color="red"><b>Ainda não há acessibilidade nesta tentativa 3.</b></font></p>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td><a tabindex="0" href="javascript:void(0);"><span onclick="alternar(this)">Não</span></a></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td><a tabindex="0" href="javascript:void(0);"><span onclick="alternar(this)">Não</span></a></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td><a tabindex="0" href="javascript:void(0);"><span onclick="alternar(this)">Não</span></a></td>
</tr>
</table>
<h1>Correção das "possíveis soluções"</h1>
<h2> Correção de 2 ‒ onClick() em DIV dentro da célula</h2>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td><a tabindex="0" href="javascript:void(0);" onclick="alternarDIV(this)"><div>Não</div></a></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td><a tabindex="0" href="javascript:void(0);" onclick="alternarDIV(this)"><div>Não</div></a></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td><a tabindex="0" href="javascript:void(0);" onclick="alternarDIV(this)"><div>Não</div></a></td>
</tr>
</table>
<h2> Correção de 3 ‒ onClick() em SPAN dentro da célula</h2>
<table>
<tr>
<th>Número da linha</th>
<th>Descrição</th>
<th>Item ativado?</th>
</tr>
<tr>
<td>1</td>
<td>Esta é coluna 2 da linha 1</td>
<td><a tabindex="0" href="javascript:void(0);" onclick="alternarSPAN(this)"><span>Não</span></a></td>
</tr>
<tr>
<td>2</td>
<td>Esta é coluna 2 da linha 2</td>
<td><a tabindex="0" href="javascript:void(0);" onclick="alternarSPAN(this)"><span>Não</span></a></td>
</tr>
<tr>
<td>3</td>
<td>Esta é coluna 2 da linha 3</td>
<td><a tabindex="0" href="javascript:void(0);" onclick="alternarSPAN(this)"><span>Não</span></a></td>
</tr>
</table>
<h1>Outras referências</h1>
<ul>
<li><a href="http://www.w3.org/TR/WCAG20-TECHS/SCR35.html">W3C ‒ SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons</a></li>
<li><a href="http://webaim.org/techniques/javascript/eventhandlers">WebAIM ‒ Accessible Javascript</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment