Separator
Separador
Um separador é uma linha visível que também pode marcar uma quebra real entre partes. Se as pessoas podem focar e movê-lo, ele se torna um divisor ajustável.
Outro exemplo
Um aplicativo de e-mail usa um separador que não pode receber foco entre grupos de comando. Um separador diferente divide a lista de mensagens e a pré-visualização. Esse separador pode receber foco e informa ao software sua direção e posição. As teclas de seta movem-no dentro de limites de largura definidos.
Partes principais
- 01Limite
- 02Orientação
- 03valor ajustável opcional
Use-o quando
Use um separador semântico apenas quando a quebra ajudar a explicar a estrutura. Adicione valores e controle de teclado apenas quando for ajustável.
Não o use quando
Não marque todas as linhas decorativas como separadores. Não permita que um divisor fixo receba foco.
Nome usado no código
hr or role=separator; tabindex and aria-valuenow only when adjustable Antes de lançar
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: Um aplicativo de e-mail usa um separador que não pode receber foco entre grupos de comando. Um separador diferente divide a lista de mensagens e a pré-visualização. Esse separador pode receber foco e informa ao software sua direção e posição. As teclas de seta movem-no dentro de limites de largura definidos. Recommended pattern: Separador (Separator). Why it fits: Use um separador semântico apenas quando a quebra ajudar a explicar a estrutura. Adicione valores e controle de teclado apenas quando for ajustável. Do not use it when: Não marque todas as linhas decorativas como separadores. Não permita que um divisor fixo receba 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): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Separador (Separator) is used now. Definition: Um separador é uma linha visível que também pode marcar uma quebra real entre partes. Se as pessoas podem focar e movê-lo, ele se torna um divisor ajustável. 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.