Guia para tornar páginas web acessíveis
Formulários
Recomendação
- Posicionar corretamente os rótulos e os controles do formulário para que a navegação seja coerente.
- Associar o controle do formulário com o respectivo rótulo.
- Agrupar informações de forma apropriada.
Html/Xhtml
- Associar cada controle do formulário ao rótulo incluindo "label for" para os rótulos e "id" para os controles. Em "input" do tipo botão, não é necessária a associação, pois o leitor de tela fala o texto contido no botão. Para botões que são imagens, forneça o equivalente textual com "alt".
- Em formulários extensos, agrupar os controles do formulário por assunto, utilizando as tags "fieldset" e "legend". Os elementos "option" no "select" podem ser agrupados utilizando "optgroup".
- Criar navegação ordenada através do atributo "tabindex".
Exemplo 1
- Associação entre rótulo e controle (input) através dos elementos "label for" e "id".
- Navegação ordenada através do atributo "tabindex". Ao navegar com a tecla "tab", o controle com valor "1" receberá o foco primeiro, em seguida o controle com valor "2" receberá o foco, e por último o controle com valor "3" receberá o foco.
<form> <label for="nome">Nome:</label> <input type="text" value="Entre com o nome" id="nome" tabindex="1" /> <label for="ramal">Ramal:</label> <input type="text" value="Entre com o ramal" id="ramal" tabindex="2" /> <input type="submit" value="Enviar" name="Submit" tabindex="3" /> </form>
Exemplo 2
- Diversos controles agrupados através de "fieldset" e "legend".
- Em "select" os elementos estão agrupados através de "optgroup".
<form> <fieldset> <legend>Dados pessoais</legend> <label for="nome">Nome:</label> <input type="text" value="Entre com o nome" id="nome" /> <label for="comentario">Comentário:</label> <textarea id="comentario" name="textfield"> Entre com o comentário</textarea> </fieldset> <fieldset> <legend>Escolaridade:</legend> <input id="primeiro" type="radio" name="radio" value="radio" checked/> <label for="primeiro">Escolaridade 1º grau</label><br /> <input id="segundo" type="radio" name="radio" value="radio" /> <label for="segundo">Escolaridade 2º grau</label><br /> <input id="superior" type="radio" name="radio" value="radio" /> <label for="superior">Escolaridade superior</label> </fieldset> <fieldset> <legend>Esporte:</legend> <input id="natacao" type="checkbox" name="checkbox" value="checkbox" /> <label for="natacao">Natação</label><br /> <input id="futebol" type="checkbox" name="checkbox2" value="checkbox" /> <label for="futebol">Futebol</label><br /> <input id="basquete" type="checkbox" name="checkbox3" value="checkbox" /> <label for="basquete">Basquete</label> </fieldset> <fieldset> <legend>Opinião:</legend> <label for="domingo">Seu domingo foi: </label> <select id="domingo"> <optgroup label="Positivo"> <option selected>Selecione:</option> <option>Ótimo</option> <option>Muito bom</option> <option>Bom</option> </optgroup> <optgroup label="Negativo"> <option>Ruim</option> <option>Péssimo</option> </optgroup> </select> </fieldset> <input type="submit" name="Submit" value="Enviar" /> <input type="submit" name="Submit" value="Limpar campos" /> </form>
Referência WCAG 1.0
- Guideline 9: Design for device-independence
- Recomendação 9: Projetar páginas considerando a independência de dispositivos
- Guideline 10: Use interim solutions
- Recomendação 10: Utilizar soluções de transição
- Guideline 12: Provide context and orientation information
- Recomendação 12: Fornecer informações de contexto e orientações



