Gracias de antemano por cualquier sugerencia. Completamente nuevo en JS y en codificación en general, así que tengan paciencia conmigo aquí. No estoy remotamente familiarizado con ningún marco, por lo que esto es estrictamente vainilla.

Tengo un modal que aparece como lo primero que ve el usuario. Contiene una serie de entradas y un botón para enviar esos datos. Cuando se hace clic en el botón, la opacidad del modal se desvanece a 0 y deja de aceptar eventos de puntero, lo que permite al usuario ver y usar el contenido debajo de él.

Objetivo : no quiero que los lectores de pantalla anuncien nada en segundo plano (llamémoslo backgroundContainer) hasta que se descarte el modal.

Probado : establecer aria-hidden = "true" en el HTML y luego activar el envío del formulario backgroundContainer.setAttribute('aria-hidden', 'false'); en el JavaScript. Intenté lo mismo que un detector de eventos cuando el usuario hace clic en el botón Enviar.

Resultado : el HTML funciona como se esperaba; background-container se ignora al cargar la página. Sin embargo, NVDA (lector de pantalla) no lee el contenedor de fondo después de presionar el botón.

Probado : agregando backgroundContainer.inert = false; a lo anterior y envolviendo todo en una función que se llamará mediante el envío del formulario o en respuesta a un detector de eventos separado conectado al botón de envío. Por ejemplo:

 function ariaReset() { let backgroundContainer = document.getElementById('background-container'); backgroundContainer.inert = false; backgroundContainer.setAttribute('aria-hidden', 'false'); }

Resultado : como el anterior.

También probé algunas variaciones de lo anterior, pero sospecho que lo estoy haciendo todo mal. Cualquier y toda ayuda apreciada.

Actualización: según el consejo dado, pude enfocar el encabezado en la página principal usando tabindex . Si volviera a escribir esto, lo haría de manera muy diferente y evitaría el uso de un modal por completo, pero este es un proyecto de aprendizaje para mí (en lugar de ser para el consumo público), y reescribir me habría enseñado menos. Al final, lo que he hecho es:

Utilice las clases CSS para mostrar/ocultar los dos divs de contenedor diferentes (es decir, .container-hide es simplemente display: none ) que he intercambiado en JavaScript (por ejemplo, container.className = "container-show") cuando el formulario es presentada. Esto parece funcionar bien con NVDA, que es el lector de pantalla que estoy usando.

Una vez que se muestra el contenido principal, su información clave recibe el foco ( foo.tabIndex = -1; ). En otros lugares, ariaLive se usa para actualizar al usuario a medida que interactúa con la interfaz de usuario de manera que desencadena cambios en el DOM. Una comprensión ligeramente mejor ganada en el proceso. Gracias por sus respuestas.