Prueba de apertura de elementos con el teclado
Utilice Tabulador y luego Intro o Espacio para abrir y cerrar cada elemento. El título debe indicar el estado de apertura; El contenido oculto no debe mantener los controles en orden de tabulación.
acordeón Sistema de diseño
Contrae el contenido y al mismo tiempo facilita su búsqueda y navegación.
Contenido de la lista
Progreso de la revisión
01
Estructura y significado
Comparar información y presentación en contexto de uso.
02
Interacción y usabilidad
Pruebe la operación, cambie el estado y continúe trabajando.
El progreso se guarda automáticamente en este navegador.
GUÍA
Cómo revisar
EJEMPLOS
Ejemplos de uso
Abra la respuesta en la lista de preguntas frecuentes
El título de la pregunta es un botón con estado abierto o cerrado; Cuando se abre, la respuesta está justo debajo y aún está vinculada a ese elemento.
Variantes y casos de uso
Marcas de apertura y colapso
Seleccione la marca que indica si el panel está cerrado o abierto; La orientación del símbolo debe seguir el estado real.
Utilice el teclado para abrir y cerrar; Comprueba que el acento y el aria ampliada cambian al mismo tiempo.
Ejemplo El signo más se convierte en un signo menos cuando la respuesta está abierta.
Información general
La sección abierta muestra su contenido en el mismo lugar.
Configuración avanzada
La sección abierta muestra su contenido en el mismo lugar.
Información general
La sección abierta muestra su contenido en el mismo lugar.
Configuración avanzada
La sección abierta muestra su contenido en el mismo lugar.
Estados de fila
Distinga las propiedades predeterminadas, flotantes, enfocadas y abiertas por apariencia y accesibilidad.
Desplácese por cada título y luego use Enter; Un panel abierto no puede perder el foco.
Ejemplo El borde de enfoque sigue siendo visible en la fila abierta, independientemente del color de fondo.
Predeterminado
La sección abierta muestra su contenido en el mismo lugar.
Seleccionado
La sección abierta muestra su contenido en el mismo lugar.
Actividad
La sección abierta muestra su contenido en el mismo lugar.
No disponible
La sección abierta muestra su contenido en el mismo lugar.
Cómo dividir artículos
Utilice líneas de separación, espacios o bloques de fondo según la relevancia del contenido.
Abre muchas frases largas; El espacio debe dejar claro a qué respuesta pertenece el título.
Ejemplo Un grupo de preguntas utiliza una línea divisoria; Otros grupos tienen sus propios títulos.
Información general
La sección abierta muestra su contenido en el mismo lugar.
Configuración avanzada
La sección abierta muestra su contenido en el mismo lugar.
Información general
La sección abierta muestra su contenido en el mismo lugar.
Configuración avanzada
La sección abierta muestra su contenido en el mismo lugar.