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>
2 respuestas
No debe envolver su entrada + etiqueta en un botón. El resultado será extraño:
- No debería haber ningún elemento enfocable (como una entrada) dentro de otro elemento enfocable (como un botón).
- ¿Cuál debería ser la etiqueta accesible del botón? Probablemente va a ser confuso.
- ¿Qué va a pasar cuando hagas clic en el botón? No estará claro porque el nombre accesible tampoco lo estará.
- ¿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.
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.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].