Sobre este problema HTML
Muitos elementos HTML vêm com papéis ARIA incorporados que as tecnologias assistivas já reconhecem. O elemento <fieldset> é um destes — o seu papel implícito é group, que informa os leitores de ecrã de que os controlos de formulário contidos estão relacionados. Quando adiciona role="group" a um <fieldset>, está a dizer ao navegador algo que ele já sabe.
Esta redundância é importante por algumas razões:
- Limpeza do código: Atributos desnecessários adicionam confusão, tornando a sua marcação mais difícil de ler e manter.
-
Boas práticas ARIA: A primeira regra do ARIA é “Se puder usar um elemento ou atributo HTML nativo com a semântica e comportamento que precisa já incorporados, em vez de reorientar um elemento e adicionar um papel, estado ou propriedade ARIA para o tornar acessível, então faça-o.” Adicionar
role="group"ao<fieldset>viola este princípio em espírito — sugere que o programador pode não compreender a semântica nativa do elemento. - Confusão potencial: Definir explicitamente papéis que correspondem ao padrão pode induzir outros programadores em erro, fazendo-os pensar que o papel está a fazer algo especial, ou que removê-lo mudaria o comportamento.
Este mesmo princípio aplica-se a outros elementos com papéis implícitos, como role="navigation" em <nav>, role="banner" em <header>, ou role="button" em <button>. Se o elemento já carrega o significado semântico nativamente, não há necessidade de o duplicar com um papel ARIA explícito.
Para corrigir isto, simplesmente remova o atributo role="group" do elemento <fieldset>. Não é necessária substituição — o navegador e as tecnologias assistivas continuarão a tratar o <fieldset> como um grupo automaticamente.
Exemplos
Incorreto: role="group" redundante em <fieldset>
<form>
<fieldset role="group">
<legend>Endereço de Envio</legend>
<label for="street">Rua:</label>
<input type="text" id="street" name="street">
<label for="city">Cidade:</label>
<input type="text" id="city" name="city">
</fieldset>
</form>
O validador reportará que o papel group é desnecessário para o elemento <fieldset>.
Correto: <fieldset> sem papel explícito
<form>
<fieldset>
<legend>Endereço de Envio</legend>
<label for="street">Rua:</label>
<input type="text" id="street" name="street">
<label for="city">Cidade:</label>
<input type="text" id="city" name="city">
</fieldset>
</form>
O elemento <fieldset> comunica inerentemente o papel group às tecnologias assistivas, pelo que não é necessário nenhum atributo ARIA.
Quando role em <fieldset> é apropriado
Há casos em que pode legitimamente definir um papel diferente num <fieldset> — por exemplo, role="radiogroup" quando o fieldset contém um conjunto de botões de opção relacionados e quer transmitir semântica mais específica:
<form>
<fieldset role="radiogroup" aria-labelledby="color-legend">
<legend id="color-legend">Cor Favorita</legend>
<label><input type="radio" name="color" value="red"> Vermelho</label>
<label><input type="radio" name="color" value="blue"> Azul</label>
<label><input type="radio" name="color" value="green"> Verde</label>
</fieldset>
</form>
Isto é válido porque radiogroup é um papel diferente que fornece significado mais específico do que o group padrão. O validador apenas avisa quando o papel explícito corresponde ao papel implícito do elemento.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.