Topics

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:

Fruta favorita

 Manzana
 Mandarina
 Plátano

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

Fruta favorita

Manzana
Mandarina
Plátano

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

Fruta favorita


 Manzana
 Mandarina
 Plátano

Caja

<div class="form-group">
  <span id="grupo-fruta">好きな果物</span>
  <div>
    <div role="grupo" aria-labelledby="grupo-fruta">
      <label><input type="casilla de verificación" nombre="fruta" valor="manzana">りんご</label>
      <label><tipo de entrada="casilla de verificación" nombre="fruta" valor="naranja">みかん</label>
      <label><tipo de entrada="casilla de verificación" nombre="fruta" valor="plátano">バナナ</label>
    </div>
</div>
</div>

<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.

Fruta favorita

 Manzana
 Mandarina
 Plátano

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!