Al crear un formulario, puede utilizar ellabel¿Alguna vez te has sentido confundido sobre cómo gestionar grupos? En particular, ¿cómo etiquetar a todo el grupo?forA veces tengo dificultades para gestionar los atributos.
En esta ocasión, organizaremos el etiquetado de estos grupos e introduciremos métodos específicos.
Métodos y problemas de visualización comunes
Al primer articuloforpunto
Para grupos de botones de opción o casillas de verificación,<label>deforEsta es una forma de apuntar un atributo al primer elemento.
Por ejemplo, el siguiente código:
Visualmente se ve bien, pero la etiqueta "Fruta favorita" no se muestra correctamente en el lector de pantalla.Sólo se asociará con el primer botón de opción.Por lo tanto, no se reconoce correctamente a todo el grupo.
forNo especificar
Tipo de entrada="radio" Nombre="fruta" Valor="manzana"<label>
Este enfoque hace que no quede claro a qué elemento se refiere la etiqueta, especialmente para los usuarios que utilizan lectores de pantalla.No está claro qué opciones están asociadas con las etiquetas.Se vuelve así.
Estas son buenas ideas de mejora.
Agrupar por atributo de rol y etiqueta con aria-labelledby
Botones de opción y casillas de verificaciónrole="radiogroup"orole="group"y asociar el elemento con la etiqueta cuyo ID se especifica mediante aria-labelledby. Esto permite que los lectores de pantalla sepan que la etiqueta "Fruta Favorita" se aplica a todo el grupo.
Botón de radio
Caja
<fieldset>y<legend>Cómo utilizar
Otra forma es<fieldset>y<legend>Este enfoque se basa en la semántica HTML y garantiza que todo el grupo sea reconocido correctamente sin necesidad de atributos o roles especiales.
En el siguiente ejemplo, creamos un grupo de botones de opción.<fieldset>y como etiqueta<legend>Estoy usando.
※ ¡Nota!: En algunos casos, puede que desee colocar la etiqueta y la entrada en paralelo. En tales casos, utilice fieldset.display: contents;Sin embargo, esto no se recomienda, ya que algunos navegadores eliminan la leyenda del árbol de accesibilidad. No conviene alinear el diseño con CSS a la fuerza y perder la accesibilidad.
resumen
El etiquetado de grupos de botones de opción o casillas de verificación se puede organizar de la siguiente manera:
Usando el atributo de rol y aria-labelledby
- Personalización flexible disponible si es necesario
- Establezca explícitamente la etiqueta del grupo en combinación con role="group"
<fieldset>y<legend>Cómo utilizar
- Un enfoque estándar basado en la semántica
- Permite implementaciones más robustas y accesibles
- Algunos diseños tienen problemas de accesibilidad.
Dependiendo de su diseño y requisitos, puede lograr la accesibilidad adecuada eligiendo cualquiera de los métodos.
<fieldset>y<legend>es más semántico, pero en el caso de un formulario de consulta, por ejemplo, el atributo de rol y aria-labelledby pueden ser más fáciles de usar debido a la estructura general del diseño.
¡La accesibilidad web todavía está en el futuro!
Pasó de la maquetación al mundo web y, sin darse cuenta, se había convertido en un experto en técnicas, además de experto en marcado, front-end, dirección y accesibilidad. Ha trabajado en diversos campos desde la fundación de Liberogic y ahora es un diccionario viviente dentro de la empresa. Recientemente, se ha dedicado a explorar maneras de mejorar la eficiencia aprovechando al máximo las indicaciones, preguntándose: "¿Podemos confiar más en la IA para la accesibilidad?". Tanto su tecnología como su pensamiento siguen evolucionando.
Futa
Ingeniero de marcado / Ingeniero de front-end / Ingeniero de accesibilidad web / Director web