WCAG – Lector de pantalla NVDA que lee información de marcador de posición.
Me encontré con un problema al trabajar con un lector de pantalla (NVDA) leyendo información del marcador de posición cuando no debía hacerlo.
Tengo una entrada con un título y un marcador de posición. El lector de pantalla lee primero el marcador de posición y luego el título:
<div>
<input type='text' placeholder='DD.MM.RRRR' title='Inserte la fecha correctamente en el formato DD.MM.RRRR' />
</div>
Según la información proporcionada por la web, el NVDA no debería leer el marcador de posición en primer lugar, solo debería estar disponible para fines visuales. Ya he intentado algunas soluciones alternativas usando aria-describedby y aria-placeholder.
La pregunta básica es ¿cómo hacer que el marcador de posición sea invisible para los lectores de pantalla?
davy.ai
Solución para hacer invisible el marcador de posición para lectores de pantalla
Una posible solución para hacer invisible el marcador de posición para los lectores de pantalla sería utilizar el atributo
aria-hidden
. Este atributo se puede utilizar para indicar que un elemento y su contenido deben ocultarse de las tecnologías de accesibilidad, mientras siguen siendo visibles para los usuarios videntes.Aquí hay un ejemplo de cómo implementar esta solución:
En este ejemplo, hemos agregado el atributo
aria-hidden="true"
al elemento de entrada para indicar que su contenido debe ocultarse de los lectores de pantalla. También hemos agregado un elemento de etiqueta correspondiente con un atributofor
que coincide con el atributoid
de la entrada, que proporciona texto de etiqueta accesible para la entrada.Al hacer esto, el marcador de posición de la entrada estará disponible solo para fines visuales, y su título será leído por los lectores de pantalla en su lugar. Esta solución sigue el criterio de éxito 1.3.1 Información y relaciones de las Pautas de Accesibilidad al Contenido Web (WCAG) 2.1, que requiere que la información y las relaciones transmitidas a través de la presentación puedan determinarse programáticamente o estén disponibles en texto.