Tengo un requisito en el que el lector de pantalla NVDA debería leer los mensajes de error (mostrados dinámicamente) en el lwc. Tengo una matriz con una lista de mensajes de error y la utilizo para mostrarlos. Sin embargo, el visor de voz de NVDA nunca lee estos mensajes. Intenté agregar aria-hidden = "true", aria-live = "asertive" y role = "alert" junto con aria-atomic = "true" a la etiqueta, pero ninguno de ellos funciona. No se puede encontrar el problema, ¿alguien puede ayudarme? Aquí está el código:

        <ul aria-live="assertive">
            <template for:each={Errors} for:item="err">
               <li class="slds-text-align--right" key={err}>{err}</li>
            </template>
        </ul>

        <ul role="alert" aria-atomic="true">
            <template for:each={Errors} for:item="err">
                <li class="slds-text-align--right" key={err}>{err}</li>
            </template>
        </ul>
1
Kanikala 27 ago. 2020 a las 04:11

1 respuesta

La mejor respuesta

Deberá establecer el atributo aria-atomic en el elemento, se usa para establecer si el lector de pantalla debe presentar siempre la región activa como un todo, incluso si solo cambia una parte de la región.

Además, debe agregar un atributo aria-relevant para poder decirle al lector de pantalla qué tipo de cambio hizo.

Valores posibles para los atributos anteriores:

aria-atomic="boolean" [predeterminado: falso]

aria-relevant="additions/removals/text/all" [predeterminado: texto]

Prueba esto

<ul aria-live="assertive" aria-atomic="true" aria-relevant="additions">
    <template for:each={Errors} for:item="err">
        <li class="slds-text-align--right" key={err}>{err}</li>
    </template>
</ul>
0
Dharman 27 ago. 2020 a las 07:14