html - para - pagina de nvda

¿Cómo manejan los lectores de pantalla la visualización flexible?

Question

Estoy escribiendo un formulario HTML en el que la obligatoriedad de algunos campos depende del valor de otros y, por lo tanto, cambia dinámicamente. Me gustaría presentar una indicación visual de esa exigencia al agregar un asterisco a la etiqueta que precede a cada campo requerido. Dado que es puramente visual y la semántica de la situación está bien expresada por el atributo required en la etiqueta adecuada, me gustaría que el asterisco se agregue como contenido de una definición CSS en lugar de insertarlo en el HTML directamente o mediante script.

Sin embargo, agregar contenido visual a un elemento que precede al campo requerido es desafiante, ya que los combinadores de selector de CSS parecen avanzar (hacia los hijos y los seguidores de los hermanos) pero no hacia atrás (hacia los padres o hermanos anteriores).

Por supuesto, podría alternar un nombre de clase en la etiqueta desde el mismo código donde cambio la obligatoriedad del campo de entrada, pero eso separaría la adición de contenido del cambio de requerimiento en dos instrucciones diferentes que tendría que recordar llamar juntas, ahora y dentro de un año, esa es una restricción que me gustaría evitar; Preferiría cambiar la obligatoriedad del campo de entrada y hacer que el CSS reaccione a ese cambio sin una mayor participación de mi parte.

Así que he recurrido a invertir el orden de cada etiqueta y su campo de entrada, y luego envolviendo ambos en una display:flex; flex-direction:column-reverse display:flex; flex-direction:column-reverse element, haciendo que el texto de la etiqueta sea renderizado antes de su campo correspondiente a pesar de ser declarado después de él. De esa forma, puedo usar un combinador de siguiente hermano para agregar un asterisco al texto de la etiqueta de cada campo requerido:

label {
display:inline-flex;
flex-direction:column-reverse;
}
label>input[required]+span:after
{
content:"*";
color:#a21;
}

<label>
<input type="text" required>
<span>Field 1</span>
</label>
<label>
<input type="text">
<span>Field 2</span>
</label>

Mi pregunta, sin embargo, es cómo interpretarán los lectores de pantalla esa doble inversión (una vez en el HTML y otra en el CSS). ¿Leerán el texto antes de esperar la entrada de un usuario?

Gracias, siempre tengo la necesidad de sentarme, instalar un lector de pantalla y descubrir estas cosas por mí mismo, pero nunca tengo tiempo para hacerlo :-(

Answer 1

Los lectores de pantalla generalmente no se preocupan por CSS. Leen el DOM y no les importa si cambias las cosas con CSS. Si tengo una lista horizontal de enlaces con float:right , visualmente, se mostrarán de derecha a izquierda, pero cuando abro un cuadro de diálogo de lector de pantalla que muestra todos los enlaces de la página, estarán en el orden del DOM, independientemente de dónde el CSS los puso en la página.

La razón por la que digo que los lectores de pantalla "normalmente" no se preocupan por CSS es que la mayoría de los lectores leerán el texto que se agrega a través de la propiedad del content , aunque ese sea un texto agregado a través de CSS. Pero no contaría con ese comportamiento. En su ejemplo, escucho "etiquetar una estrella" cuando uso mandíbulas, nvda y voz en off, pero en el pasado, simplemente escuchaba "etiqueta uno". Con la próxima versión del lector de pantalla o navegador, podría cambiar nuevamente. Siempre que tenga el conjunto de propiedades required , esa es la parte importante.

Answer 2

Primero, como se dijo en otra respuesta, los lectores de pantalla ignoran cualquier posicionamiento CSS y tratan las etiquetas en el orden DOM.

Ahora, de acuerdo con H44: el uso de elementos de etiqueta para asociar etiquetas de texto con controles de formulario , el orden de la etiqueta y la entrada también son importantes

Para todos los elementos de entrada de tipo texto, archivo o contraseña, para todas las áreas de texto y para todos los elementos seleccionados en la página web:

• Compruebe que haya un elemento de etiqueta que identifique el propósito del control antes de la entrada, área de texto o elemento seleccionado

PERO , en tu caso, tienes una situación muy peculiar. Su label etiqueta se ve antes de la etiqueta de input (en el orden DOM) mientras su contenido de texto está después.

<label>
<input type="text" required>
<span>Field 1</span>
</label>

Yo diría que los lectores de pantalla estarían bien con eso, porque leerán la input y la label como un todo anunciando el "Campo de etiquetas implícitas 1".

Siempre que la label su etiqueta se vea antes de la input[type=text] , este no es un mal diseño (las cosas son diferentes para input campos de input de tipo radio o casilla de verificación donde debe estar después).