Paginação

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 Paginação.

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 se trata de um agrupamento de navegação entre páginas relacionadas?
Antes de interagir com o componente é possível perceber visualmente qual é a página atual?
Antes de interagir com o componente é possível perceber visualmente quais controles estão disponíveis, indisponíveis ou representam páginas omitidas?
Quando houver reticências ou compactação de páginas, fica claro que existem páginas intermediárias não exibidas?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse nos controles acionáveis?
Há feedback visual ao clicar no controle acionável?
Ao clicar em uma página, no botão anterior ou no botão próximo, ocorre o carregamento do conteúdo correspondente?
Após o carregamento, a página atual, o título da página e os controles anterior/próximo são atualizados?
Controles indisponíveis, como "anterior" na primeira página ou "próximo" na última página, deixam claro que não podem ser acionados?

Projetando para uso com gestos

Os alvos tocáveis possuem área suficiente para acionamento confortável?
Há feedback visual ao acionar um controle de paginação?
Ao acionar uma página, o conteúdo relacionado é carregado e a indicação de página atual é atualizada?
Em telas menores, a quantidade de páginas exibidas é reduzida sem esconder a página atual, a anterior, a próxima, a primeira e a última quando forem necessárias?

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

Há feedback visual ao focar em cada controle acionável?
É possível navegar entre os controles acionáveis utilizando TAB e SHIFT+TAB?
É possível acionar links de páginas com a tecla ENTER?
Controles implementados como botões podem ser acionados com ENTER e SPACE?
Elementos de reticências usados apenas para indicar páginas ocultas não entram na ordem de foco?
Após a troca de página, o foco é gerenciado de forma consistente, indo para o início do novo conteúdo ou permanecendo em um ponto previsível do fluxo.

Projetando para uso com leitor de telas

Ao navegar por landmarks é possível identificar a paginação como uma região de navegação com nome acessível claro?
Ao focar em um controle acionável é possível ouvir se ele é um link ou botão?
Ao focar em um número de página é possível ouvir o número e o objetivo do controle, por exemplo "Página 3"?
Ao focar na página atual é possível ouvir que aquela é a página atual através de aria-current="page"?
Ao mudar de página, o novo conteúdo ou o novo estado da tela é perceptível para pessoas usando leitor de telas?

Métodos de Interação

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

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, cada controle acionável deve retornar feedback visual confirmando possibilidade de interação.
Ao clicar em um número de página, o conteúdo correspondente deve ser carregado.
Ao clicar em "anterior" ou "próximo", o conteúdo da página imediatamente anterior ou posterior deve ser carregado.
A página atual deve possuir indicação visual diferente dos demais itens e também atualização semântica.
Controles indisponíveis devem possuir aparência de estado desabilitado e não devem executar ação.

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

Ao focar com teclado, cada controle acionável 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.
Links de paginação devem ser acionados com a tecla ENTER.
Botões de paginação, quando utilizados em experiências dinâmicas, devem ser acionados com as teclas ENTER e SPACE.
A página atual deve ser identificada com aria-current="page".
Itens meramente visuais, como reticências, não devem receber foco por teclado.

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

Ao focar no agrupamento de componentes em uma paginação é possível identificar de que se trata de uma navegação.
Quando houver mais de uma navegação na página, o nome acessível da paginação deve diferenciar sua finalidade, por exemplo "Paginação dos resultados de busca".
Ao focar em um controle acionável deve ser possível ouvir seu nome acessível, papel e estado.
A página atual deve ser anunciada como página atual.
Quando a troca de página recarregar apenas parte da tela, a mudança de conteúdo deve ser perceptível e o foco deve seguir uma estratégia consistente.

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 paginação

Navegação por teclado

QUANDO uso a tecla Tab para mover o foco para os controles de paginação
O foco que VEJO é fortemente indicado visualmente
ENTÃO, quando uso a tecla Enter para acionar um link de página
VEJO que o conteúdo correspondente à página selecionada é carregado
E VEJO que a indicação visual da página atual é atualizada

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 controle de paginação
- OUÇO que a paginação é identificada como uma região de navegação.
- OUÇO o nome acessível da navegação de paginação.
- OUÇO o nome de cada controle, como página anterior, próxima página ou página específica.
- OUÇO que a página atual é indicada quando o foco está no item correspondente.
ENTÃO, quando uso a tecla Enter para ativar um controle de paginação
OUÇO ou percebo que o navegador está indo para outro conteúdo ou que o conteúdo da página foi atualizado.

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 controle de paginação, acontece o seguinte:
- OUÇO que a paginação é identificada como uma região de navegação.
- OUÇO o nome acessível da navegação de paginação.
- OUÇO o nome de cada controle, como página anterior, próxima página ou página específica.
- OUÇO que a página atual é indicada quando o foco está no item correspondente.
ENTÃO, quando eu toco duas vezes para ativar um controle de paginação
OUÇO ou percebo que o navegador está indo para outro conteúdo ou que o conteúdo da página foi atualizado.

Pontos de Atenção

Referências

Referências adicionais sobre componentes do tipo Paginação.

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.