Técnicas para as WCAG 2.0

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

-

H91: Utilizar links e controlos de formulário em HTML

Aplicabilidade

Links e controlos de formulário HTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar elementos link e controlos de formulário HTML normais para permitir a utilização dos elementos interactivos da interface de utilizador através do teclado e da tecnologia de apoio.

Os agentes de utilizador permitem a utilização dos links e controlos de formulário HTML através do teclado. Além disso, o agente de utilizador associa os controlos de formulário e os links a uma API de acessibilidade. As tecnologias de apoio utilizam a API de acessibilidade para obter as informações de acessibilidade apropriadas, tais como a função, o nome, o estado e o valor, e para apresentá-las aos utilizadores. A função é fornecida pelo elemento HTML, e o nome é fornecido pelo texto associado a esse elemento. Os elementos para os quais os valores e estados são apropriados também indicam os valores e os estados através de vários mecanismos.

Em alguns casos, o texto já se encontra associado ao controlo através de um atributo obrigatório. Por exemplo, os botões Submeter utilizam o atributo ' alt ' da imagem ou do texto do elementobutton como o nome. No caso dos controlos de formulário, são utilizados os elementos label ou os atributos 'title'. A tabela seguinte descreve como a função, o nome, o valor e o estado são determinados para controlos de formulários e links HTML.

Elemento HTML Função Nome Valor Estado
<a> link atributo 'title', texto num elemento <a> ou atributo 'alt' se for um link de imagem. Concatenado se forem fornecidos o texto e o atributo 'alt' da imagem. atributo 'href'
<button> botão texto dentro do elemento <button> ou atributo 'title'
<fieldset> agrupamento elemento <legend>
<input type = "button", "submit", or "reset"> botão atributo 'value'
<input type = "image"> botão atributo 'alt' ou atributo 'title'
<input type = "text"> texto editável elemento <label> associado ou atributo 'title' atributo 'value'
<input type = "password"> texto editável elemento <label> associado ou atributo 'title'
<input type="checkbox"> caixa de verificação elemento <label> associado ou atributo 'title' atributo 'checked'
<input type="radio"> botão de opção elemento <label> associado ou atributo 'title' atributo 'checked'
<select> caixa de combinação, lista ou lista pendente elemento <label> associado ou atributo 'title' elemento <option> com o atributo 'selected' definido para "selected"
<textarea> texto editável elemento <label> associado ou atributo 'title' texto no elemento <textarea>

Exemplos

Exemplo 1: Links

Os agentes de utilizador fornecem mecanismos para navegar até links e seleccioná-los. Em cada um dos seguintes exemplos, a função é "link" que provém de <a href>. Tenha em atenção que <a name> não fornece um função de "link". O valor é o URI no atributo 'href'.

Exemplo 1a

No exemplo 1a, o nome é o texto dentro do link, neste caso "Sítio da Web Exemplo".

Código Exemplo:

<a href="www.example.com">Example Site</a> 
Exemplo 1b

No exemplo 1b de uma imagem dentro de um link, o atributo 'alt' para a imagem fornece o nome. Algumas ferramentas de visualização de APIs, tais como Microsoft Inspect Objects, não revelam o nome, mas a TA revela.

Código Exemplo:

<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a> 
Exemplo 1c

No exemplo 1c, o nome será concatenado a partir dos diferentes elementos dentro do link para ler "Texto Exemplo".

Código Exemplo:

<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>

Exemplo 2: Botões

Existem várias formas de criar um botão em HTML, e estão todas associadas à função "botão".

Exemplo 2a

No exemplo 2a, o texto está incluído no elemento button, neste caso "Guardar", como o nome. Não existe qualquer valor.

Código Exemplo:

<button>Save</button> 
Exemplo 2b

O exemplo 2b utiliza o atributo 'value', neste caso "Guardar", "Submeter" ou "Repor", como o nome.

Código Exemplo:

<input type="button" value="Save" /> 
<input type="submit" value="Submit" />  
<input type="reset" value="Reset" /> 
Exemplo 2c

O exemplo 2c utiliza o atributo 'alt', neste caso "Guardar", como o nome.

Código Exemplo:

<input type="image" src="save.gif" alt="save" /> 
Exemplo 2d

No exemplo 2d, não existe nenhum atributo 'alt'. Assim, o atributo 'title', neste caso "Guardar", é utilizado como o nome.

Código Exemplo:

<input type="image" src="save.gif" title="save" /> 
Exemplo 2e

O exemplo 2e utiliza o atributo 'alt' do elemento input, neste caso "Guardar", como o nome. O atributo title não é utilizado.

Código Exemplo:

<input type="image" src="save.gif" alt="save" title="save" />

Exemplo 3:

Exemplo 3a

No exemplo 3a, o campo de entrada tem uma função de "texto editável". O elemento label é associado ao elemento input através do atributo 'for', que faz referência ao atributo 'id' do elemento inpu>. O nome provém do elemento label, neste caso "Tipo de fruta". O valor provém do respectivo atributo value, neste caso "bananas".

Código Exemplo:

<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
Exemplo 3b

No exemplo 3b, o campo de entrada tem a mesma função e valor do exemplo 3a, mas obtém o respectivo nome a partir do atributo 'title'.

Código Exemplo:

<input id="text_1" type="text" value="bananas" title="Type of fruit">

Exemplo 4: Caixa de verificação

O exemplo 4 tem uma função de "caixa de verificação", que provém do atributo 'type' do elemento input . O elemento label está associado ao elemento input através do atributo 'for', que se refere ao atributo 'id' do elemento input . O nome provém do elemento label, neste caso "Queijo". O seu estado pode ser "seleccionado" ou "desmarcado" e provém do atributo 'checked'. O estado pode ser alterado mediante a interacção do utilizador com o controlo.

Código Exemplo:

<label for="cb_1">Cheese</label> 
<input id="cb_1" type="checkbox" checked="checked"> 

Exemplo 5: Botões de Opção

O exemplo 5 tem uma função de "botão de opção" a partir do atributo 'type' no elemento input . O nome provém do elemento label . O estado pode ser "seleccionado" ou "desmarcado" e provém do atributo 'checked'. O estado pode ser alterado pelo utilizador.

Código Exemplo:

<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label> 

Exemplo 6:

Exemplo 6a

O exemplo 6a tem uma função de "Caixa de combinação" a partir do elemento select . O nome é "Números" e provém do elemento label . É um erro comum esquecer-se de atribuir um nome à selecção. O valor é o elemento option que tem o atributo 'selected' definido para "seleccionado". Neste caso, o valor predefinido é "Dois".

Código Exemplo:

<label for="s1">Numbers</label>
<select id="s1" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select> 
Exemplo 6b

O exemplo 6b tem o mesmo nome, função e valor do exemplo acima, mas define o nome com o atributo 'title' no elemento select . Esta técnica pode ser utilizada quando não for pretendida uma etiqueta visível.

Código Exemplo:

<select id="s1" title="Numbers" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select> 

Exemplo 7: Textarea

Exemplo 7a

O exemplo 7a tem uma função de "texto editável" que provém do elemento textarea . O nome é "Introduza aqui o seu discurso" que provém do elemento label . O valor é o conteúdo dentro do elemento textarea, neste caso "Quatro vintenas e há sete anos".

Código Exemplo:

<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea> 
Exemplo 7b

O exemplo 7b tem a mesma função, nome e valor, mas define o nome utilizando o atributo 'title'.

Código Exemplo:

<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea> 

Exemplo 8:

Radio Fieldset

O radio fieldset no exemplo 8 tem uma função de "agrupamento". O nome provém do elemento legend .

Código Exemplo:

<fieldset>
  <legend>Choose a Color:</legend> 
     <input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br /> 
     <input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br /> 
     <input id="green" type="radio" name="color" value="green" /><label for="green">Green</label> 
</fieldset> 

Recursos

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

Testes

Procedimento

  1. Verifique o código fonte HTML.

  2. Para cada ocorrência de links e elementos de formulário, verifique se o nome, o valor e o estado são especificados conforme indicado na tabela acima.

Resultados Esperados