Separator
separador
Un separador es una línea visible que también puede marcar una ruptura real entre partes. Si las personas pueden enfocarse y moverlo, se convierte en un divisor ajustable.
Otro ejemplo
Una aplicación de correo utiliza un separador que no puede recibir enfoque entre los grupos de comandos. Un separador diferente divide la lista de mensajes y la vista previa. Ese separador puede recibir enfoque y le indica al software su dirección y posición. Las flechas lo mueven dentro de los límites de ancho establecidos.
Partes principales
- 01Límite
- 02Orientación
- 03valor ajustable opcional
Úsalo cuando
Usa un separador semántico solo cuando la pausa ayude a explicar la estructura. Agrega valores y control por teclado solo cuando sea ajustable.
No lo uses cuando
No marque cada línea decorativa como un separador. No permita que un divisor fijo reciba el foco.
Nombre usado en código
hr or role=separator; tabindex and aria-valuenow only when adjustable Antes de lanzarlo
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with separador (Separator). User context: Una aplicación de correo utiliza un separador que no puede recibir enfoque entre los grupos de comandos. Un separador diferente divide la lista de mensajes y la vista previa. Ese separador puede recibir enfoque y le indica al software su dirección y posición. Las flechas lo mueven dentro de los límites de ancho establecidos. Recommended pattern: separador (Separator). Why it fits: Usa un separador semántico solo cuando la pausa ayude a explicar la estructura. Agrega valores y control por teclado solo cuando sea ajustable. Do not use it when: No marque cada línea decorativa como un separador. No permita que un divisor fijo reciba el foco. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how separador (Separator) is used now. Definition: Un separador es una línea visible que también puede marcar una ruptura real entre partes. Si las personas pueden enfocarse y moverlo, se convierte en un divisor ajustable. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.