HTML COM ACESSIBILIDADE

Caixa de opção

Uma caixa de opção é um controle que disponibiliza para o usuário, várias opções e destas, o mesmo poderá selecionar apenas uma.

Regras aplicadas na criação de uma caixa de opção:

  • Cada nova opção adicionada deve ser antecedida pela tag usada na criação deste controle.

  • Por uma questão de acessibilidade, as opções devem estar dispostas verticalmente (uma por linha), para que os programas leitores de tela possam identificá-las individualmente. Para tanto, ao final da descrição de cada opção, utilize a tag (<br> - quebra de linha).

  • Todas as opções pertencentes a uma mesma caixa de opção, devem receber a mesma descrição no atributo (name), para que sejam agrupadas em um único controle.

Para melhor demonstrar a sintaxe da tag utilizada na criação do controle caixa de opção, imagine a seguinte situação:

Suponha que peçamos para os visitantes classificarem o nosso site como: Ótimo, Bom, Regular, Ruim ou Péssimo.

A sintaxe utilizada para a criação de uma caixa de opção que contemple a situação exposta acima será:

<input type="radio" name="classificação" value="Ótimo"> <br>
<input type="radio" name="classificação" value="Bom"> Bom <br>
<input type="radio" name="classificação" value="Regular" checked> Regular <br>
<input type="radio" name="classificação" value="Ruim"> Ruim <br>
<input type="radio" name="classificação" value="Péssimo"> Onde: Com o atributo (type) declaramos que o controle criado será uma caixa de opção "radio".

Através do atributo (name) definimos um nome interno para o controle e que deverá ser inserido em todos os itens que compõem a caixa de opção.

No atributo (value) definimos a informação em que cada item da caixa de opção enviará ao servidor quando selecionado.

O atributo (checked) define qual das opções estará selecionada inicialmente. Perceba que na demonstração acima, nós determinamos que a opção que deverá aparecer selecionada inicialmente é a que contém a descrição "regular".

Pressione ENTER para retornar a página anterior.Pressione ENTER para retornar ao Menu. Pressione ENTER para avançar para a próxima página.