Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

H4: Criar uma ordem de tabulação lógica através de links, controlos de formulário e objectos

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma ordem de tabulação lógica quando a ordem de tabulação predefinida não é suficiente. Muitas vezes, é suficiente G59: Colocar os elementos interactivos numa ordem que siga as sequências e relações existentes no conteúdo e esta técnica não é necessária. Pode ser muito fácil introduzir bugs de utilização ao definir a ordem de tabulação explicitamente.

Em alguns casos, o autor pode pretender especificar uma ordem de tabulação que siga as relações existentes no conteúdo sem seguir a ordem dos elementos interactivos no código. Nestes casos, é possível especificar uma ordem alternativa utilizando o atributo tabindex do elemento interactivo. É atribuído um valor ao tabindex entre 0 e 32767.

Quando o utilizador navega nos elementos interactivos utilizando a tecla de tabulação, os elementos recebem foco por ordem crescente do valor do seu atributo tabindex . Os elementos que têm um valor tabindex superior a zero receberão o foco antes dos elementos sem um tabindex ou um tabindex de 0. Depois de todos os elementos com um tabindex superior a 0 terem recebido foco, os restantes elementos interactivos recebem foco pela ordem em que são apresentados na página Web.

Exemplos

Exemplo 1

Um formulário de procura genealógica procura registos de casamento. O formulário de procura inclui vários campos de entrada para a noiva e para o noivo. O formulário é marcado utilizando uma tabela de dados que inclui campos para o noivo na primeira coluna e campos para a noiva na segunda coluna. A ordem no conteúdo é fila a fila, mas o autor considera ser mais lógico navegar no formulário coluna a coluna. Desta forma, todos os critérios do noivo podem ser preenchidos antes de avançar para os critérios da noiva. Os atributos tabindex dos campos de entrada são utilizados para especificar uma ordem de tabulação que navegue coluna a coluna.

Código Exemplo:

<form action="#" method="post">
 <table summary="the first column contains the search criteria 
  of the groom, the second column the search criteria of 
  of the bride">
 <caption>Search for marriage records</caption>
 <tr>
   <th>Search criteria</th>
   <th>Groom</th>
   <th>Bride</th>
 </tr>
 <tr>
  <th>First name</th>
  <td><input type="text" size="30" value="" name="groomfirst" 
      title="First name of the groom" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridefirst" 
       title="First name of the bride" tabindex="4"></td>
 </tr>
 <tr>
  <th>Last name</th>
  <td><input type="text" size="30" value="" name="groomlast" 
      title="Last name of the groom" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="bridelast" 
      title="Last name of the bride" tabindex="5"></td>
 </tr>
 <tr>
  <th>Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="Place of birth of the groom" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="Place of birth of the bride" tabindex="6"></td>
 </tr>
</table>
</form> 

Exemplo 2

Uma página Web inclui um campo de procura no canto superior direito. É atribuído o tabindex="1" ao campo, de modo a ser o primeiro na ordem de tabulação, apesar de não ser o primeiro na ordem do conteúdo.

Exemplo 3

Os valores tabindex não necessitam de ser sequenciais, nem têm de começar por nenhum valor em particular. Os valores não têm de ser exclusivos. A navegação nos elementos que têm valores tabindex idênticos é efectuada pela ordem em que são apresentados na sequência de caracteres. Assim, no exemplo seguinte, a ordem de tabulação é um, dois, três, quatro.

Código Exemplo:

<a href="" tabindex="1">one</a>
 <a href="" tabindex="2">two</a>
 <a href="" tabindex="1">three</a>
 <a href="" tabindex="2">four</a> 

Nas secções do conteúdo em que a ordem de tabulação segue a ordem do conteúdo, pode ser menos propenso a erros atribuir o mesmo valor tabindex a todos os elementos, em vez de especificar um número diferente para cada elemento. Desta forma, é mais fácil reordenar esses elementos ou adicionar novos elementos, mantendo uma ordem de tabulação lógica.

Código Exemplo:

                                                   <a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long 
  after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
  ...
<a href="xxx" tabindex = "1">Twentieth link in list</a> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se tabindex é utilizado.

  2. Se tabindex for utilizado, verifique se a ordem de tabulação especificada pelos atributos tabindex segue as relações existentes no conteúdo.

Resultados Esperados