Estoy creando un sitio React y tengo que admitir la accesibilidad en todos los navegadores.
En mi sitio tengo entradas y realizo las validaciones solo en desenfoque, si la entrada no es válida, se inserta un mensaje de error después de la entrada.
Mi problema es que el lector de pantalla omite este nuevo elemento de error y salta al siguiente; parece que el lector calcula el siguiente elemento cuando se enfoca en el anterior (en mi caso, la entrada). y, por lo tanto, cuando "tabulo" y desenfoque la entrada, pasa al siguiente elemento tabulado y omite el nuevo error.
El nuevo elemento de error que se está omitiendo tiene todos los atributos requeridos (se está enfocando si cambio + tabulador desde el siguiente elemento que se alcanzó después de la entrada). También intenté agregar aria-live="asertive" al nuevo elemento del mensaje de error, pero no ayuda.
¿Alguna solución para esto?
Las recomendaciones aria-invalid y aria-describedby de @jongibbons son buenas, pero el anuncio real del mensaje de error cuando se agrega debe ser manejado por aria-live . Mencionaste que probaste aria-live pero que no funcionó. Puede depender de cómo estabas tratando de usarlo.
Si intenta agregar ese atributo dinámicamente cuando se genera el mensaje de error, entonces no funcionará. aria-live debe existir en la página antes de agregarle texto. Por ejemplo, lo siguiente no funcionará:
Antes del error:
<input>Después del error
<input> <div aria-live="polite">this is the error message</div> Si el <div> se agrega dinámicamente, no se anunciará aunque tenga aria-live .
En cambio, su código debería verse así:
Antes del error:
<input> <div aria-live="polite"> <!-- empty area for error message --> </div>Después del error
<input> <div aria-live="polite">this is the error message</div>En este caso, los lectores de pantalla anunciarán "este es el mensaje de error" cuando se inyecte el nuevo texto en la página.
Y como dijo @jongibbons, asocie el mensaje de error con el campo de entrada a través aria-describedby .
<input aria-describedby="foo"> <div id="foo" aria-live="polite"> <!-- empty area for error message --> </div>Para que el comportamiento que describe sea accesible, debe considerar el uso de los atributos aria-invalid y aria-describedby .
Cuando un campo tiene un error, alternar aria-invalid en <input> de false a true hará que los lectores de pantalla anuncien el cambio de estado.
Agregar una relación aria-describedby entre su <input> que tiene un error y el elemento HTML que contiene su mensaje de error también debería hacer que el lector de pantalla anuncie el mensaje de error.
<label for="email">Email address</label> <input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedby="email-error"> <p class="error-message" id="email-error"> Error: This doesn't look like a valid email address </p>Aquí hay un ejemplo en MDN con código que podría coincidir con lo que necesita: Usar el atributo aria-invalid