¿Cómo puedo ocultar una leyenda de formulario HTML de los navegadores visuales, utilizando CSS, de forma accesible?Ocultar la leyenda de formulario HTML con CSS
legend { display: none; }
no es una opción porque, según tengo entendido, esto 'ocultará' la leyenda de los lectores de pantalla. Otros intentos que he realizado no eliminan la leyenda del diseño, es decir, continúa ocupando espacio.
Agregado como respuesta en lugar de un comentario, así puedo obtener más puntos. :-)
Si realmente quieres leyendas, ¿has intentado poner un lapso dentro de la leyenda y posicionar/manipular eso?
entiendo que esto funciona en IE7 y Firefox ...
Aunque no es perfectamente "semánticamente limpio", esta parece ser la mejor opción, por lo que muy - votada. FYI, no sé qué tan serio sea, pero agregar esto como una respuesta real es perfectamente válido y altruista: ¡otros se beneficiarán de esta información, y de eso se trata SO! –
Solo estoy siendo seriamente sarcástico. Intento realmente solo agregar respuestas que * sé * que funcionó. Esto fue originalmente una idea improvisada, hasta que confirmaste que funcionó, así que no siento que sea completamente mío. Sin embargo, estoy contento de que funcione (también he aprendido algo) y de que la información ahora está disponible aquí para otros. Está todo bien :-) – edeverett
http://www.tyssendesign.com.au/articles/css/legends-of-style/es un recurso importante para esta técnica – morewry
Usted podría intentar:
legend
{
position: absolute;
top: -1000px;
}
Sí, no funcionó. Eso no cambiar la posición de la leyenda, al menos, no en Firefox. No sé por qué eso es algo "especial" sobre el elemento de la leyenda? –
Esto no funcionará en Firefox. – rahul
Si realmente quieres leyendas, tienes intenté poner un lapso dentro de la leyenda y posicionar/manipular eso? – edeverett
No se puede hacer esto en Firefox, ya que es un error en el navegador.
Puede leer más aquí
Gran recurso - gracias. Supongo que estoy atascado con "display: none". –
Ok. Hecho. Gracias – rahul
Por lo que vale la pena - y estoy seguro de que son flameados para esto - etiquetas de leyenda son uno de los pocos lugares en los que deliberadamente romper la especificación de dejándolos afuera. Los reemplazo con un encabezado del nivel apropiado que proporciona la misma información para el usuario pero sin los errores del navegador.
(estoy feliz de escuchar acerca de los aspectos negativos de la vida real de este si alguien puede ver algunos)
edición: Ah, y usted debe preguntarse por qué los usuarios de tecnología de asistencia querrían escuchar las leyendas cuando su navegador usar usuarios no. Si la respuesta es simplemente para satisfacer las especificaciones HTML, use display: none y termine con esto. No obstaculice la experiencia del usuario de un grupo proporcionando información inútil solo para una formalidad.
Interesante enfoque. Por supuesto, puedo ver los beneficios, aunque no estoy seguro de cómo reaccionarían los lectores de pantalla. Supongo que también PODRÍA agregar una leyenda vacía si se requiere validación; Me parece útil ser 100% válido, aunque solo sea para evitar pensar si soy inválido de una manera "aceptable" o no. –
"para evitar pensar si soy inválido de una manera 'aceptable' o no". Esa es una muy buena razón, pero las leyendas parecen una mala especificación y mal implementadas en los navegadores, por lo que considero que no vale la pena el tiempo en este caso. (Actualicé mi respuesta con un poco más de mi pensamiento mientras dejaba el comentario.) – edeverett
Muy buen punto: ¡Tendré que pensar en eso! No estoy seguro si esta pregunta podría terminar siendo "inválida" o si alguna vez hay una razón justificable para hacer lo que pensé que debía hacer ... –
Sí, hay algo de especial. Es un elemento reemplazado como muchos elementos de formulario. Los navegadores tienen un formateo predeterminado muy específico. Además, no se puede forzar a comportarse como un elemento normal mediante la visualización: bloquear o mostrar: en línea, lo que provoca que los intentos de sobrescribir con CSS no funcionen bien.
Existen algunas técnicas bien documentadas que pueden ayudarlo a LOGRAR ALGUNOS efectos con leyendas, aunque las soluciones son necesarias para una apariencia de compatibilidad entre navegadores.
Muchas versiones de Firefox ignoran específicamente ambas pantallas: ninguna y el posicionamiento absoluto.
Sé que esto es 2 años demasiado tarde, pero utilizando visibility: hidden parece funcionar 'de una manera accesible' en FF.
Resuelto y probado en IE7, IE8, IE9, FF, Opera, Safari y Chrome.La leyenda se leerá de los lectores de pantalla y los usuarios no lo verá:
<legend><span class="accessibility">Your description</span></legend>
y luego, en el CSS:
legend span.accessibility {
position:absolute;
left:-9999px;
width:100px;
height:auto;
overflow:hidden;
}
Actualizado con reemplazo para cortar -9999px (http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/):
HTML:
<legend><span>Your description</span></legend>
CSS:
legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
¿Cuál es su propósito detrás de esto? – rahul
Quiero tener una leyenda (como yo lo entiendo, eso es obligatorio para el HTML estricto y es probable que sea una buena práctica de accesibilidad) pero no quiero que se muestre a los navegadores visuales, es la duplicación de contenido. –
¿No es una leyenda de Fieldset? – rahul