Cuando se trata de accesibilidad, ¿cuál es el patrón de diseño o la técnica adecuada para agregar un panel en línea que tenga un encabezado, un cuerpo de texto y un botón de cierre opcional?
A modo de contexto, se me ha asignado la tarea de crear una pregunta de prueba de selección múltiple accesible que agregue un panel de comentarios correctos o incorrectos debajo de la pregunta después de que el usuario presiona enviar. Creo que normalmente este tipo de comentarios aparecería en una ventana emergente modal que cubre el otro contenido y atrapa el foco, pero este diseño en particular necesita que el panel de comentarios aparezca en la página directamente debajo del botón de enviar, y aún permita al usuario volver a la pestaña. las opciones de respuesta (aunque estarían aria-deshabilitadas después de enviar).
El panel de comentarios tendría un encabezado de título, un cuerpo de texto y un botón de cierre opcional. No habría ningún botón de cierre si el usuario acertó todo o si se quedó sin intentos.
¿Existe un rol de aria adecuado o un patrón de diseño conocido para este tipo de panel adjunto? ¿Y a qué debo enviar el foco una vez que aparece el panel de comentarios, el encabezado? ¿El botón de cerrar?
En caso de que sea relevante, para las opciones de respuesta de selección múltiple, estoy usando casillas de verificación nativas con <label> s
El primero sería agregar role="alert" al cuadro adjunto (suponiendo que solo lo agregará una vez por página, de lo contrario aria-live ).
Luego, esto se anunciaría a los usuarios de lectores de pantalla.
La opción 2 es que simplemente puede agregar el cuadro a la página y usar la administración de enfoque. Entonces aparece el cuadro y movería el foco al encabezado del cuadro a través de JavaScript (con tabindex="-1" en el encabezado, por ejemplo). Esto debe suceder a partir de una acción esperada (por lo tanto, el botón "enviar respuesta" que dijo que tiene).
Probablemente elegiría la opción 2, ya que es la forma más fácil de no introducir más problemas de accesibilidad por error.
Hay otras formas de lograr esto con aria-live , aria-labelledby etc., pero las dos opciones anteriores son las más sencillas.