Separator
Resumo
Um divisor é uma linha fina que agrupa conteúdo em listas e contêineres. Os divisores ajudam a melhorar a organização do conteúdo, separando-o visualmente e facilitando a leitura e a compreensão das informações pelos usuários.
Divisórias podem aumentar a eficácia do espaço negativo, proporcionando uma separação clara entre as seções, ao mesmo tempo que mantêm áreas livres ao redor delas. O espaçamento adequado ao redor das divisórias garante que elas não ofusquem o conteúdo.
Os divisores são comumente usados nos seguintes padrões de design:
listas
campos de formulário
cartões e painéis.
Onde usar
Separação visual
Os divisores são usados para distinguir diferentes seções de conteúdo, o que ajuda a melhorar a legibilidade.
Destacando a hierarquia visual
Útil para indicar relações ou importância dentro do conteúdo (ex.: títulos e subtítulos).
Organizando itens relacionados
Utilize para agrupar elementos semelhantes, como itens de menu ou campos de formulário.
Acessibilidade
A
Nenhuma instrução de uso pode depender só da posição relativa ao separador (WCAG 1.3.3)
AA
Se o separator é o único meio de perceber uma divisão que carrega significado, ele precisa de contraste de pelo menos 3:1 contra o fundo (WCAG 1.4.11)
Se o separator tem texto, esse precisa de contraste de ao menos 4.5:1 contra o fundo (WCAG 1.4.3).
AAA
Se o separator tem texto no meio, esse texto com contraste de 7:1 (WCAG 1.4.6)
Boas práticas
Antes de adicionar, pergunte se o whitespace não resolve
Use o separator só quando o espaço sozinho não basta (densidade alta, espaço limitado, ou quando os grupos ficam ambíguos sem uma marca explícita).
Não coloque uma linha entre cada item
Separator entre todos os itens de uma lista cria uma grade pesada e cansa a leitura. Prefira separar só entre grupos. A exceção é tabela ou lista de dados densa, onde a linha ajuda o olho a alinhar.
O separator divide, não compete
A linha deve ser mais discreta que o conteúdo que ela separa. Se ela chama mais atenção que o texto, está forte demais.
Respiro simétrico dos dois lados
Espaçamento igual acima e abaixo (ou esquerda e direita, se vertical). Espaço desigual faz a linha “grudar” em um dos lados e parecer que pertence a ele, em vez de dividir os dois de forma neutra.
Linha não conserta hierarquia tipográfica fraca
Se você está usando separators para deixar claro o que é título de seção, o problema real costuma ser a tipografia. Resolva tamanho, peso e espaçamento do texto primeiro.
Para agrupar com força, use container, não linha
Se o conteúdo precisa ser percebido como uma unidade fechada, um card (fundo ou borda completa) comunica isso melhor que linhas soltas. Separator é divisão leve, não encapsulamento.
Referências
https://heydonworks.com/article/the-br-element/
https://balsamiq.com/learn/rules/