Seleciona o idioma
Selecionar outros idiomas

Tradução automática

Carregando tradutor…

Magoofaça seus componentes funcionarem corretamenteVoltar para página principal

Breadcrumb

Mostra a localização da página na hierarquia e oferece caminhos de volta aos níveis anteriores.

Para ver exemplos funcionais e padrões de design deste componente, consulte a aba de referências (abre as referências na mesma página).

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Sempre avalie o contexto da aplicação, mesmo com a orientação tendo um padrão. Design de interação documenta a intenção. O funcionamento deve ser verificado na implementação.

Quando usar

Use para mostrar a localização atual na hierarquia e voltar a níveis anteriores.

O que desenhar

Mostre os níveis na ordem, separadores e a página atual distinguível.

Como se comporta

Os links levam aos níveis anteriores e são acionados com Enter. O último item representa a página atual; separadores não recebem foco.

O que documentar no Figma

Registre os destinos e a identificação da página atual, evitando tornar o item atual uma ação de navegação.

Como revisar

Confira se o objetivo e os estados são claros em telas pequenas e grandes, com ampliação. Verifique os comportamentos documentados na implementação, incluindo teclado e leitor de telas quando aplicáveis.

Orientações completas

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes interativos do tipo Breadcrumb.

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

  1. Antes de interagir com o componente é possível perceber visualmente que o componente é interativo?
  2. Antes de interagir com o componente é possível perceber visualmente que se trata de um menu de navegação?
  3. Antes de interagir com o componente é possível perceber visualmente qual é a posição atual indicada?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

  1. Há feedback visual ao passar o mouse nos componentes acionáveis?
  2. Há feedback visual ao clicar no componente acionável?
  3. Ao clicar em um dos componentes acionáveis, ocorre o carregamento da tela e também a atualização de estado dos componentes?

Projetando para uso com gestos

  1. Há feedback visual ao acionar o componente?
  2. Ao acionar um dos componentes acionáveis, ocorre o carregamento da tela e também a atualização de estado dos componentes?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

  1. Há feedback visual ao focar no componente acionável?
  2. É possível interagir com o componente acionável através da tecla "enter"?
  3. Ao ser acionado por teclado o componente acionável direciona a pessoa para seu respectivo conteúdo?

Projetando para uso com leitor de telas

  1. Ao focar em um componente acionável de um breadcrumb é possível ouvir de que se trata de um link (e não um botão)?
  2. Ao focar em um componente acionável de um breadcrumb é possível ouvir claramente o objetivo do link?
  3. Ao focar no último componente do agrupamento de um breadcrumb é possível ouvir de que se trata da tela atual e este não direciona para nenhum lugar?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Breadcrumb.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

  • Ao passar o mouse, o componente deve retornar feedback visual confirmando possibilidade de interação.
  • Ao clicar com o botão do mouse, o componente deve retornar feedback visual confirmando o clique.
  • Ao clicar com o botão do mouse, o conteúdo deve ser carregado.
  • Ao clicar com o botão do mouse, o último componente do agrupamento não direciona para nenhum local e ele representa a tela atual?

Interação com teclado (qualquer dispositivo que não seja de apontamento)

  • Ao focar com teclado, o componente deve retornar feedback visual com foco visível.
  • Deve ser possível navegar para o próximo item ou para o anterior utilizando as teclas TAB ou SHIFT+TAB respectivamente.
  • Deve ser possível acionar componentes acionáveis com a tecla ENTER.
  • O último componente do agrupamento pode receber foco, mas não deve ser acionável.
  • Os separadores de componentes não recebem foco por teclado.

Interação com teclado (ou gestos) + leitor de telas

  • Ao focar no agrupamento de componentes em um breadcrumb é possível identificar de que se trata de uma lista ordenada.
  • Ao focar em um componente acionável em um breadcrumb é possível ouvir de que se trata de um link.
  • Ao focar em um componente acionável em um breadcrumb deve ser possível identificar o objetivo do link com clareza.
  • Caso seja configurado o foco no último componente do agrupamento em um breadcrumb deve ser possível ouvir de que se trata da tela atual.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)).

Cenário: Considerando que estou em uma página que contém breadcrumb

Navegação por teclado

  1. QUANDO uso a tecla Tab para acionar um link
  2. O foco que VEJO é fortemente indicado visualmente
  3. ENTÃO, quando uso a tecla Enter para acionar o link
  4. VEJO que meu navegador está indo para algum lugar

Leitor de telas para desktop

  1. Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e uso a tecla Tab para mover o foco para um link
    • VEJO que os nomes dos links correspondem aos títulos das páginas de destino
    • OUÇO links identificados como pontos de referência em um sistema de navegação por trilha de navegação.
    • OUÇO que o link da página atual é indicado quando o foco está na página.
    • Posso OUVIR os atalhos de leitor de tela como um ponto de referência de navegação (landmarks).
  2. ENTÃO, quando uso a tecla Enter para ativar o link
  3. OUÇO dizer que meu navegador está indo para algum lugar.

Leitor de telas para dispositivos móveis

  1. QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para focar em um link, acontece o seguinte:
    • OUÇO que os nomes dos links correspondem aos títulos das páginas de destino
    • OUÇO links identificados como pontos de referência em um sistema de navegação por trilha de navegação.
    • OUÇO que o link da página atual é indicado quando o foco está na página.
    • Posso OUVIR os atalhos de leitor de tela como um ponto de referência de navegação (landmarks).
  2. ENTÃO, quando eu toco duas vezes para ativar o link
  3. OUÇO dizer que meu navegador está indo para algum lugar.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Breadcrumb.

  • É importante que os separadores de componentes sejam construídos de forma apenas visual e não recebam foco ao se navegar por teclado ou sejam lidos por leitores de tela.
  • Breadcrumbs são componentes de navegação em formato de lista ordenada. Devem ser construídos com a semântica adequada.
  • O último item de um breadcrumb não deve ser acionável, pois é a tela atual. No entanto, é possível configurar o foco por teclado informando apenas que é a tela atual.

Referências

Referências adicionais sobre componentes do tipo Breadcrumb.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.

Padrões de Design

Design System

Conteúdo autoral de Marcelo Sales, originalmente utilizado nas aulas do curso AccessBoost (link externo - abre em uma nova janela). As interações representam o formato padrão da indústria, mas em casos específicos podem ser customizadas (desde que haja instruções suficientes para que as pessoas compreendam a mudança de comportamento).