Breadcrumb

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

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"

Antes de interagir com o componente é possível perceber visualmente que o componente é interativo?
Antes de interagir com o componente é possível perceber visualmente que se trata de um menu de navegação?
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)

Há feedback visual ao passar o mouse nos componentes acionáveis?
Há feedback visual ao clicar no componente acionável?
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

Há feedback visual ao acionar o componente?
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)

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

Projetando para uso com leitor de telas

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)?
Ao focar em um componente acionável de um breadcrumb é possível ouvir claramente o objetivo do link?
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)). , Ref 2 (abre em uma nova aba).

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

Navegação por teclado

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

Leitor de telas para desktop

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).
ENTÃO, quando uso a tecla Enter para ativar o link
OUÇO dizer que meu navegador está indo para algum lugar.

Leitor de telas para dispositivos móveis

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).
ENTÃO, quando eu toco duas vezes para ativar o link
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.