¿Es posible hacer que un lector de pantalla lea un texto (título, intervalo o div) en el montaje si el foco está configurado en otro elemento de la página?
Tengo una aplicación de reacción con una página de inicio de sesión. La página de inicio de sesión tiene cuadros de entrada para el nombre de usuario y la contraseña con el enfoque inicial establecido en el nombre de usuario mediante el enfoque automático. La página también tiene un encabezado. ¿Cómo puedo hacer que un lector de pantalla lea el encabezado cuando está montado sin perder el foco del nombre de usuario? Consulte el codepen de muestra: aplicación de muestra .
El ejemplo anterior tiene un botón de inicio de sesión en la página de destino inicial, al hacer clic en él se cargará el componente de inicio de sesión. Quiero que el lector de pantalla lea el encabezado primero sin perder el enfoque de la entrada del nombre de usuario. Intenté el atributo aria-live , pero no funciona. ¿Puede ayudarme alguien, por favor?
¡Gracias!
Creo que un <fieldset> es exactamente lo que está buscando.
ARIA define el rol de structure abstracta , que agrupa el contenido en diferentes contextos, por así decirlo. landmark cae bajo estos, group también.
No estoy seguro de en qué rol se basa exactamente esta lógica, pero los lectores de pantalla anuncian estos cambios de contexto, por lo que cuando el foco deja un grupo o ingresa a otro, se anuncian sus roles y nombres.
Entonces, si su encabezado sirve como el nombre accesible para una estructura de la que forma parte la entrada enfocada automáticamente, debe anunciarse.
Un rol de estructura muy apropiado para los formularios es el de group , implementado por <fieldset> .
<button onclick="document.querySelector('input').focus();">Login</button> <form> <fieldset> <legend><h3>Enter Credentials</h3></legend> <label>Username <input name="username" autofocus> </label> </fieldset> </form>Después de presionar el botón Iniciar sesión, NVDA (con Firefox o Chrome) anunciará:
Ingresar Credenciales, agrupación
Nombre de usuario, editar, tiene autocompletar, en blanco
Orca con Firefox es similar, pero lamentablemente Chromevox no anuncia el grupo, ni el nombre de una <section> .
Observe también name="username" . Este es un estándar común para permitir que los navegadores completen automáticamente los campos, lo que es importante para la accesibilidad. También puede agregar autocomplete="username" si tiene un nombre diferente.
El contexto más externo dentro del sitio sería el del document . Su nombre accesible es el meta <title> de tu página, el cual se anunciará al principio, eso es ineludible.