es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

WCAG – Lector de pantalla NVDA que lee información de marcador de posición.

17 Jun, 2023 Programació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?

JSFiddle

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    <div>
  <input type="text" placeholder="DD.MM.AAAA" title="Inserte la fecha correctamente en el formato DD.MM.AAAA" aria-hidden="true">
  <label for="date-input">Inserte la fecha correctamente en el formato DD.MM.AAAA</label>
</div>

    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 atributo for que coincide con el atributo id 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.

Comments are closed.