Como conferir rótulos acessíveis em formulários.
A revisão de rótulos deve olhar o nome programático e o contexto visível. Texto próximo, sozinho, pode não estabelecer uma associação acessível.
Adapte o fluxo à sua tarefa.
Inspecione o nome programático de cada controle e sua relação com o rótulo visível. Confira rótulos explícitos, rótulos que envolvem o campo e referências ARIA relevantes; informe nomes ausentes ou enganosos com a localização do elemento. Inclua revisão manual quando a inspeção automática não conseguir determinar o significado.
- O que você fornece
- Campos de formulário e controles renderizados.
- O que você recebe
- Rótulos acessíveis ausentes e nomes pouco claros.
Veja a entrada e o resultado.
Entrada e saída ilustrativas · exemplo didático, não uma execução real do WebAct
Exemplo campo
Supplied markup: <span>Email</span><input id="email" type="email">. No other naming attributes. Correct the label association.
Exemplo completo
Finding: the visible caption has no programmatic association with the input. Proposed markup: <label for="email">Email</label> <input id="email" type="email"> Verify the id is unique and the control's accessible name is Email in the complete page.
Carregue esta entrada no prompt e copie para o WebAct para testar a tarefa. Seu resultado pode ser diferente da ilustração.
Decisões e solução de problemas.
O texto de placeholder substitui um rótulo permanente do formulário?
Ele pode desaparecer durante a digitação e não substitui com segurança um rótulo claro e associado. Confira tanto o nome visual quanto o programático.
Por que uma legenda visível não é anunciada como rótulo do campo?
Pode faltar uma associação válida, como um par for/id correspondente. Inspecione a relação, não apenas a proximidade.
Teste com sua própria fonte.
Substitua o exemplo pelo seu material no prompt. Mantenha os requisitos necessários e copie a tarefa para o WebAct.
Personalizar e copiar a tarefa ↑