Acerca de este problema HTML
Muchos elementos HTML vienen con roles ARIA integrados que las tecnologías de asistencia ya reconocen. El elemento <fieldset> es uno de estos — su rol implícito es group, que dice a los lectores de pantalla que los controles de formulario contenidos están relacionados. Cuando añades role="group" a un <fieldset>, estás diciéndole al navegador algo que ya sabe.
Esta redundancia importa por varias razones:
- Limpieza del código: Los atributos innecesarios añaden desorden, haciendo que tu markup sea más difícil de leer y mantener.
-
Buenas prácticas de ARIA: La primera regla de ARIA es “Si puedes usar un elemento HTML nativo o un atributo con la semántica y comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo”. Añadir
role="group"a<fieldset>viola este principio en esencia — sugiere que el desarrollador puede no entender la semántica nativa del elemento. - Confusión potencial: Establecer explícitamente roles que coinciden con los predeterminados puede confundir a otros desarrolladores haciéndoles pensar que el rol está haciendo algo especial, o que eliminarlo cambiaría el comportamiento.
Este mismo principio se aplica a otros elementos con roles implícitos, como role="navigation" en <nav>, role="banner" en <header>, o role="button" en <button>. Si el elemento ya lleva el significado semántico nativamente, no hay necesidad de duplicarlo con un rol ARIA explícito.
Para arreglar esto, simplemente elimina el atributo role="group" del elemento <fieldset>. No se necesita reemplazo — el navegador y las tecnologías de asistencia continuarán tratando el <fieldset> como un grupo automáticamente.
Ejemplos
Incorrecto: role="group" redundante en <fieldset>
<form>
<fieldset role="group">
<legend>Dirección de Envío</legend>
<label for="street">Calle:</label>
<input type="text" id="street" name="street">
<label for="city">Ciudad:</label>
<input type="text" id="city" name="city">
</fieldset>
</form>
El validador reportará que el rol group es innecesario para el elemento <fieldset>.
Correcto: <fieldset> sin rol explícito
<form>
<fieldset>
<legend>Dirección de Envío</legend>
<label for="street">Calle:</label>
<input type="text" id="street" name="street">
<label for="city">Ciudad:</label>
<input type="text" id="city" name="city">
</fieldset>
</form>
El elemento <fieldset> comunica inherentemente el rol group a las tecnologías de asistencia, por lo que no se necesita ningún atributo ARIA.
Cuándo es apropiado usar role en <fieldset>
Hay casos donde podrías establecer legítimamente un rol diferente en un <fieldset> — por ejemplo, role="radiogroup" cuando el fieldset contiene un conjunto de botones de radio relacionados y quieres transmitir semántica más específica:
<form>
<fieldset role="radiogroup" aria-labelledby="color-legend">
<legend id="color-legend">Color Favorito</legend>
<label><input type="radio" name="color" value="red"> Rojo</label>
<label><input type="radio" name="color" value="blue"> Azul</label>
<label><input type="radio" name="color" value="green"> Verde</label>
</fieldset>
</form>
Esto es válido porque radiogroup es un rol diferente que proporciona un significado más específico que el group predeterminado. El validador solo advierte cuando el rol explícito coincide con el rol implícito del elemento.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: