2010-11-16 40 views
6

Nuestro sitio web incluye algunos javascript que producen ventanas de moda de superposición.¿Cómo establecer el foco en una ventana modal de JavaScript?

Sin embargo, hay un problema de accesibilidad con esto, una vez que se desencadena el modal, el focus todavía está en el elemento disparador y no en el modal mismo.

Estos modales pueden incluir todo tipo de elementos html, encabezados, párrafos y controles de formulario. Lo que me gustaría es que el enfoque comience en el primer elemento dentro del modal, por lo que es más probable que sea una etiqueta h4.

He explorado utilizando la función focus(), pero esto no funciona con una serie de elementos html.

Se pensó en agregar una etiqueta a vacía en la ventana que podría ganar el foco, pero no estoy seguro acerca de este método.

Respuesta

0

Puede agregar el cuadro de texto al comienzo del HTML modal, establecer el foco y luego ocultar el cuadro de texto. Debería tener el efecto deseado en la medida en que entiendo tus necesidades.

+1

eso es de una manera, aunque preferiría no agregar cuadros de texto vacíos en el código, tanto para la accesibilidad como para la limpieza del código – user502014

+0

@ user502014 el cuadro de texto no estará visible, por lo que la accesibilidad no debería ser un problema. Si encuentra un código más limpio, siéntase libre de usarlo, solo tenga en cuenta que tiene listo el "Plan B". –

4

muy tarde para la fiesta, pero las respuestas existentes no respetan la accesibilidad.

El W3C wiki page on accessible modals ofrece una visión más clara de lo que se pidió en el PO, la parte correspondiente está teniendo tabindex=-1 en el envase modal (que también debe tener un atributo aria-dialog) así que puede ser :focus.

Esta es la manera más accesible de centrar la atención en el modal, también hay más documentación sobre cómo mantenerla solo en el modo modal y regresarla al elemento que desencadenó el modal; hay mucho que explicar aquí, entonces sugiero a todos los interesados ​​que consulten el enlace de arriba.

Cuestiones relacionadas