Estoy creando un componente que requiere ocultar la entrada agregando una propiedad css de opacidad a 0. Pero el aspecto de este componente es un botón. La razón para ocultar la entrada es para fines de selección. El elemento de entrada admite el tipo de radio.

Pregunta1: ¿Cuáles son las implicaciones de ajustar un botón alrededor de los elementos del formulario? ¿Hay algún problema de accesibilidad? Pregunta2: En lugar de una etiqueta <button>, ¿es mejor usar quizás una <fieldset>?

A continuación se muestra la plantilla Vue para el componente?

<template>
    <button :class="[$style['button-group-item'], sizeClass, classObject, variationClass]">
        <label class='button-group-item__label'>
            <input class="button-group-item__input" type="radio" :checked="checked" @change="$emit('change', $event.target.checked)"/>
            <span>
                {{ text }}
            </span>
        </label>
    </button>
</template>
1
Mihir Patel 10 feb. 2020 a las 00:46

2 respuestas

La mejor respuesta

No debe envolver su entrada + etiqueta en un botón. El resultado será extraño:

  1. No debería haber ningún elemento enfocable (como una entrada) dentro de otro elemento enfocable (como un botón).
  2. ¿Cuál debería ser la etiqueta accesible del botón? Probablemente va a ser confuso.
  3. ¿Qué va a pasar cuando hagas clic en el botón? No estará claro porque el nombre accesible tampoco lo estará.
  4. ¿Debería activarse el botón al hacer clic en la entrada, ya que la entrada está dentro del botón? La respuesta depende del navegador y sea lo que sea, va a confundir / no hacer lo que se espera y frustrar a los usuarios.

Por todas estas razones, te desaconsejo usar un botón. Usar un conjunto de campos es mucho mejor, es la forma normal de hacerlo aquí. Use CSS para hacer que su conjunto de campos parezca un botón.

4
QuentinC 10 feb. 2020 a las 05:23

Sí, habrá problemas de accesibilidad.

1) Usar el botón confundirá el software de voz en off. Los estados de enfoque también se comportarán incorrectamente (foco del teclado).

2) A nivel de código, debe evitar el comportamiento predeterminado de Button.

3) Está rompiendo las reglas de la etiqueta semántica del HTML5

4) No use el botón si no está realizando ninguna acción. Haga que el conjunto de campos de CSS parezca un botón.

1
Neha Sharma 10 feb. 2020 a las 05:28