Os componentes são os principais elementos de construção das interfaces de usuário. Criar uma biblioteca de componentes reutilizáveis aprimora o fluxo de trabalho de desenvolvimento do seu produto, reduzindo a dívida de design e tecnologia e acelerando o processo. Os componentes centrais não podem ser decompostos em partes menores sem perder seu significado.

Quando a área de conteúdo recebe foco por meio de tecnologias assistivas, ela deve anunciar um contexto adicional do elemento de acionamento.

Relação entre o conteúdo e o acionador

O Accordion possui dois estados para alternar a visibilidade do seu conteúdo. Se um acionador de accordion exibe um ícone, ele deve ser visualmente distinto entre os estados.

Estado ativo

A área de conteúdo deve ser flexível o suficiente para suportar vários tipos de conteúdo, incluindo outros componentes.

Composição

Adicione uma animação sutil para ajudar os usuários a compreender e acompanhar o comportamento do componente ao alternar entre os estados.

Transição de alternância

O Accordion alterna a visibilidade das regiões de conteúdo quando o elemento de acionamento é pressionado.

Accordion

Ao utilizar tecnologias assistivas, os alertas devem anunciar corretamente sua role de acessibilidade.

Role de acessibilidade

As ações nos alertas devem estar relacionadas ao seu texto e proporcionar uma forma de reagir à mensagem enviada ao usuário.

Ações suplementares

É fundamental diferenciar a aparência visual do alerta com base em sua função. Se estiver utilizando cores de fundo para diferenciá-los, assegure-se de que haja um contraste suficiente em relação ao conteúdo exibido dentro do alerta.

Cores

O ícone ilustra o papel do alerta e oferece uma dica adicional para auxiliar pessoas com daltonismo a compreendê-lo.

Suporte a ícones

Os alertas podem se ajustar ao tamanho da tela, geralmente ocupando a largura total em dispositivos móveis para economizar espaço.

Responsividade

Oferecer suporte à título pode ajudar o usuário a compreender o contexto da mensagem mais rapidamente, especialmente em casos de mensagens de alerta mais longas.

Suporte a titulo

Os alertas exibem uma mensagem proeminente sobre toda a página ou uma área específica dela.

Alerta

O avatar deve fornecer uma label acessível quando utilizado para imagens não decorativas e não possui uma representação textual de seus conteúdos.

Label de acessibilidade

Quando utilizado sem uma imagem, o avatar deve ter uma cor de fundo aplicada à sua forma. Certifique-se de que os ícones e o texto possuam um contraste adequado em relação ao fundo, seguindo o padrão WCAG AA.

Múltiplos avatares podem ser empilhados juntos para representar um grupo de usuários.

Grupos de avatares

Os avatares devem mascarar uma imagem em sua forma e funcionar com qualquer tamanho de imagem, uma vez que podem obter essa imagem de fontes de dados desconhecidas.

Imagem

Quando não for fornecida uma imagem ou ocorrer um erro ao carregar a imagem, os avatares devem ser capazes de exibir um recurso alternativo com uma imagem, ícone ou iniciais de texto diferentes.

Recurso alternativo de imagem

Os avatares podem ter suporte a múltiplas formas, como quadrado ou círculo, dependendo da área em que são utilizados.

Formas

Há vários contextos nos quais é necessário utilizar um avatar, exigindo diferentes tamanhos para o componente. Em projetos comuns, é recomendado utilizar pelo menos 2-3 tamanhos distintos e garantir que haja pelo menos um tamanho pequeno disponível.

Tamanhos

Miniatura de uma foto do usuário, organização ou uma representação visual de outros tipos de conteúdo.

Avatar

Os badges podem desempenhar várias funções em seu produto, e ter uma cor pré-definida para cada função deve ajudar os usuários a entender seu significado. Ao alterar as cores, certifique-se de que o texto tenha uma proporção de contraste adequada com o fundo, de acordo com o padrão WCAG AA.

Os badges podem ser usados como uma forma dinâmica de exibir valores selecionados, e deve haver uma maneira de descartá-los.

Ação de descarte

Os distintivos podem ser utilizados sem nenhum conteúdo de texto interno. Isso geralmente requer a alteração de seus estilos para preservar a forma correta.

Estado vazio

Para ilustrar melhor o significado de um badge, você pode exibir um ícone ao lado do texto. Certifique-se de que, para badges pequenos, o conteúdo do ícone ainda seja reconhecível.

Quando usado como um distintivo de status, como um indicador de notificação, você deve ser capaz de posicioná-lo em relação a esses elementos.

Posicionamento

Os badges podem ser apresentados em vários tamanhos, dependendo de onde são utilizados. Por exemplo, você pode usar o tamanho grande em páginas de marketing.

Com base no local em que os badges são exibidos no produto, é possível oferecer várias variantes do componente. Por exemplo, é possível ter alguns badges com um fundo desbotado para evitar chamar muita atenção.

Variantes

Elemento compacto que representa o status de um objeto ou entrada do usuário.

Badge

Se os itens do menu de navegação não couberem no contêiner pai, a lista deve oferecer suporte ao colapso de itens apenas para manter visíveis aqueles relevantes para o usuário.

Estado colapsado

Cada item da lista pode ser desabilitado individualmente para impedir que os usuários naveguem para a página.

Estado desabilitado

Ícones ajudam a comunicar os papéis das páginas às quais os itens do menu de navegação apontam. Na maioria das vezes, é importante garantir que sejam usados de forma consistente, não apenas para itens aleatórios na lista.

Dependendo do contexto de uso, os itens na lista de breadcrumbs podem utilizar diferentes estilos de separadores.

Separador personalizado

Navegação principal do produto que ajuda o usuário a compreender a localização da página atual e navegar de volta aos seus respectivos níveis superiores.

Breadcrumbs

O botão deve ter um indicador de foco visível quando estiver em foco utilizando o teclado ou tecnologias assistivas.

Indicador de foco

O botão deve anunciar corretamente as roles de acessibilidade do botão ou do link e resolvê-los automaticamente com base nas propriedades passadas para ele.

Forneça uma indicação visual quando um botão for pressionado, usado para selecionar um valor ou alternar outros elementos na página.

Botões podem desempenhar diferentes papéis em seu produto, e ter uma cor pré-definida para cada papel deve ajudar os usuários a entender seu significado. Ao alterar as cores, certifique-se de que o texto tenha uma proporção de contraste adequada com o fundo, de acordo com o padrão WCAG AA.

Mostre visualmente que o botão não é interativo e impeça que ele seja pressionado.

Mostre claramente que o botão é interativo quando o cursor do mouse estiver sobre ele.

Estado de hover

Ícones comunicam facilmente o propósito do botão quando utilizados ao lado de uma label ou podem ser usados sem texto quando há pouco espaço disponível. Certifique-se de fornecer uma label acessível quando utilizar apenas o ícone.

Indique quando os usuários devem esperar pelo resultado de sua ação após pressionar um botão. Se um indicador de progresso (spinner) for usado para exibir esse estado, certifique-se de que ele não altere a largura ou altura original do botão.

Estado de carregamento

Dependendo de onde um botão será usado, ele pode ter vários tamanhos. Por exemplo, você pode usar o tamanho pequeno para áreas densas da sua aplicação.

Ao utilizar múltiplos botões, deve haver uma forma de diferenciar entre ações primárias e secundárias. Os botões podem desempenhar diferentes papéis para o usuário ou serem utilizados em diferentes superfícies, e é necessário que eles alterem sua aparência de acordo.

Elemento interativo utilizado para ações de um único passo.

Botão

As datas do calendário devem ser acessíveis pelo teclado e por tecnologias assistivas. A navegação nas datas pode ser feita usando as setas do teclado ou as opções de navegação do leitor de tela. Além disso, é importante permitir a troca de mês ao navegar para fora de uma coluna ou linha.

Navegação por teclado

As datas selecionadas devem ser anunciadas pelas tecnologias assistivas quando recebem foco.

Anúncio de estado

Fornecer labels curtas para os nomes dos dias da semana, além dos números das datas, para facilitar a navegação na seleção de datas pelos usuários.

Nomes dos dias

Os calendários devem ser adaptados para todas as regiões e países suportados pelo produto. Isso inclui formatos de data e a correta ordenação dos dias da semana, de acordo com as convenções locais.

Internacionalização

O calendário pode ser utilizado em diversas áreas e tamanhos de tela do produto. Certifique-se de suportar diferentes modos de exibição para mostrar mais de um mês ou um layout vertical.

Modos de exibição

Para ajudar os usuários a navegar por intervalos de datas mais longos, o calendário deve fornecer uma maneira fácil de alternar entre os meses exibidos.

Seleção de mês

O calendário deve suportar a seleção de uma única data e um intervalo de datas. As datas selecionadas devem ser destacadas visualmente, e o intervalo entre as datas selecionadas deve ser visível para os usuários.

Estado selecionado

Grid que exibe os dias de um ou mais meses e permite que os usuários selecionem uma única data ou um intervalo de datas.

Calendário

Os cards podem ser utilizados com ações geralmente posicionadas na parte inferior do card, ou o próprio card pode ser clicável, representando uma ação.

Composição de conteúdo

Vários cards podem ser agrupados em uma única lista de seções de conteúdo.

Grupos de cards

Os cards são frequentemente utilizados em conjunto com conteúdo de mídia. As opções mais populares são ter uma área de largura total acima do conteúdo ou uma área em um dos lados do card.

Seções de mídia

Nos dispositivos móveis, os cards geralmente ocupam toda a largura da tela para economizar espaço para o conteúdo.

Container para agrupar informações sobre assuntos e suas ações relacionadas.

Card

As seleções dos checkboxes devem ser acionados com o teclado. Usar elementos nativos para isso deve fornecer esse tipo de interação automaticamente.

Suporte ao teclado

Exiba quando o checkbox for selecionado e utilizado para a submissão do formulário.

Utilize um estado desabilitado para impedir interações com o checkbox e remover o seu valor dos valores enviados pelo formulário.

Utilize um estado de erro para a validação do formulário quando o erro estiver relacionado ao campo de checkbox. Sempre utilize um texto de erro juntamente com uma cor de campo diferente.

Estado de erro

Os checkboxes podem ser agrupados para trabalhar com múltiplos valores ao mesmo tempo.

Grupo de checkboxes

Visualmente, indique quando a checkbox possui elementos filhos selecionáveis e somente alguns estão selecionados.

Estado indeterminado

Deve haver uma label de texto vinculada ao campo de checkbox. Clicar no rótulo também deve acionar a seleção do checkbox. Se o rótulo não for exibido na página, as tecnologias assistivas ainda devem anunciá-lo.

Label

Campo de formulário usado para selecionar um ou vários valores da lista.

Checkbox

Se o divisor desempenha um papel funcional no layout, além do papel decorativo, seu papel deve ser anunciado pelas tecnologias assistivas.

Divisores devem separar tanto listas de conteúdo horizontal quanto vertical.

Direção

Elemento para separação visual de conteúdo

Divisor

Quando o conteúdo do dropdown é aberto, o foco deve ser movido para dentro da área de conteúdo e retornar ao elemento acionador quando fechado.

Captura de foco

O dropdown deve ser acessível para teclado e tecnologias assistivas. Os usuários devem ser capazes de fechar o dropdown usando uma ação separada de fechamento ou ao pressionar uma área fora do conteúdo do dropdown.

Dropdowns podem ser usados para menus contextuais, navegação de produtos e outros fins. A área de conteúdo deles deve ser flexível o suficiente para suportar vários tipos de conteúdo, incluindo outros componentes.

O dropdown deve suportar a exibição do seu conteúdo em eventos de hover. O mesmo comportamento deve ocorrer para usuários de teclado quando o seu acionador recebe foco.

Acionamento por hover

O conteúdo do dropdown deve ser exibido com base na posição atual do elemento de gatilho na tela e sempre permanecer visível para o usuário.

Posicionamento dinâmico

O conteúdo do dropdown deve ser ajustado se não couber na tela da mesma forma em dispositivos móveis como em desktop.

Lista de ações contextuais que os usuários podem acionar.

Dropdown

A maioria das vezes, os ícones são usados como elementos decorativos. Se um ícone tiver a intenção de ser interativo, essa funcionalidade deve ser incluída usando botões, links ou outros componentes interativos.

Interatividade

Os ícones devem suportar os valores de cor disponíveis nos tokens do design system. Além disso, é uma boa prática permitir a herança de cor a partir do elemento pai.

Os ícones devem possuir diversos tamanhos pré-definidos para oferecer uma experiência completa em todo o produto. É recomendável utilizar combinações tipográficas para esses valores de tamanho, assegurando que estejam alinhados com os tamanhos do texto.

Wrapper para elementos SVG para controlar sua apresentação visual

Ícone

Quando a imagem não for apenas decorativa, é importante fornecer um texto alternativo (alt text) descrevendo o conteúdo da imagem.

Texto alternativo

Para atender à densidade de tela, é recomendado suportar o carregamento de múltiplos recursos de imagem em tamanhos diferentes e servir o mais adequado ao usuário.

Suporte à densidade de tela

Exiba um recurso alternativo quando a URL da imagem estiver incorreta ou indefinida. Isso pode ser uma caixa vazia com um fundo, um ícone ou uma imagem estática de substituição.

A imagem deve ser flexível em termos de tamanhos suportados. Além de suportar apenas largura e altura, adicione suporte para proporção de aspecto para dimensionar suas proporções com base no elemento pai de forma dinâmica.

Utilitário para exibir imagens e controlar o seu comportamento.

Os links devem anunciar corretamente as funções de acessibilidade do botão ou do link, resolvendo-as automaticamente com base nas propriedades passadas para ele.

Os links podem desempenhar diversos papéis no seu produto, e ter uma cor pré-definida para cada papel deve ajudar os usuários a entender o seu significado. Como o link é um elemento de texto, ele deve ser capaz de herdar automaticamente a cor definida pelo seu elemento pai, assim como outros conteúdos de texto.

Indique visualmente que o link não é interativo e impeça que seja pressionado.

Os links devem ser capazes de herdar os estilos tipográficos quando usados como parte do elemento de texto.

Herança de fonte

Um ícone pode ser usado ao lado do link para comunicar o propósito do link. Ícones não devem ser usados dentro de um link sem uma label de texto.

Quando usados dentro de um parágrafo de texto, os links devem suportar a exibição de várias linhas sem interromper o fluxo do texto.

Exibição de várias linhas

Elemento de texto interativo usado para navegação dentro dos parágrafos de texto.

Link

As tecnologias assistivas devem anunciar listas com a role correta e o número de itens exibidos.

Role acessível

As áreas de conteúdo dos itens da lista devem ser flexíveis o suficiente para suportar vários tipos de conteúdo, incluindo outros componentes.

Os itens da lista podem utilizar estilos e tipos de ordenação como marcadores, numerados e outros.

Ordem

A lista é usada para exibir uma lista de itens.

Lista

Se o indicador de carregamento estiver isolado, forneça uma label acessível para a área de conteúdo que está sendo carregada.

O indicador de carregamento deve estar sincronizado com as configurações de movimento do sistema e reduzir a velocidade de animação quando as configurações de movimento reduzido estiverem ativadas.

Animação reduzida

Os indicadores de carregamento podem ser utilizados em elementos com diferentes funções e devem seguir o esquema de cores correspondente a esses elementos.

Em alguns casos, o tempo de espera não pode ser determinado. O indicador de carregamento deve ser exibido até que o carregamento seja concluído ou ocorra um erro. Em outros casos, é melhor indicar o tempo restante até que o carregamento seja concluído.

Duração do carregamento

Os indicadores de carregamento podem oferecer diferentes tamanhos, de acordo com o tamanho das áreas em que são exibidos.

Elemento animado que indica o progresso sem informar a duração exata do processo.

Indicador de carregamento

Ao abrir o modal, o foco do usuário deve ser movido para o primeiro elemento com foco e permanecer restrito a ele. Quando o modal for fechado, o foco deve retornar ao último elemento ativo.

Deve ser possível fechar um modal ao pressionar a tecla Esc, e todos os elementos com foco dentro do contêiner do modal devem ser acessíveis por meio da navegação pelo teclado.

Os modais devem usar a role de acessibilidade correta e devem ser caracterizados pelos elementos de título e subtítulo. Se não houver título ou subtítulo visível, a modal pode usar uma label acessível.

Título e subtítulo

Como o conteúdo no modal pode ser acionável, é essencial ter uma área para elementos de ação. Essa área geralmente está localizada na parte inferior do contêiner modal.

Os modais devem oferecer uma forma direta de fechamento, pois eles bloqueiam o conteúdo quando estão abertos. Isso pode ser feito através de um botão de fechar separado ou como uma das ações complementares disponíveis.

Ação de fechar

A área de conteúdo principal deve ser flexível o suficiente para suportar vários tipos de conteúdo, incluindo outros componentes.

Os modais podem ser posicionados no centro da tela ou exibidos como painéis deslizantes em um dos lados da tela.

Forneça suporte para alterar a altura e largura do modal com base no conteúdo que você exibe.

Contêiner que aparece na frente do conteúdo principal para fornecer informações críticas ou um conteúdo acionável.

Modal

A paginação deve fornecer labels claras e dinâmicas para cada página, a fim de oferecer informações contextuais às tecnologias assistivas, em vez de apenas anunciar o número da página sem contexto.

Labels de paginação

A paginação deve anunciar quando uma página selecionada está em foco.

Forneça uma opção para selecionar o número de itens paginados exibidos na página.

Quantidade de itens por página

Quando você não conhece antecipadamente o número total de páginas disponíveis, utilize um modo de exibição diferente que permita navegar pelas páginas individualmente.

Quantidade indeterminada de páginas

Defina os intervalos de páginas a serem renderizadas ao redor da página selecionada. Isso ajuda a exibir apenas um número limitado de páginas, permitindo que os usuários naveguem mais rapidamente do que se tivessem que avançar uma página de cada vez.

Intervalos de exibição de páginas

Destaque visualmente a página selecionada na lista e torne-a não interativa.

Estado da página selecionada

A paginação permite a seleção de uma variedade de páginas dentro de um intervalo.

Paginação

Forneça suporte para adicionar uma label acessível caso não seja possível exibir um rótulo na interface.

Em alguns casos, o tempo de espera não pode ser determinado. O indicador de carregamento deve ser exibido até que o carregamento seja concluído ou ocorra um erro. Em outras situações, é preferível indicar o tempo restante até que o carregamento seja concluído.

Duração

Ofereça suporte para exibir visualmente uma label que explique qual é a responsabilidade da barra de progresso.

Os indicadores de carregamento podem oferecer diferentes tamanhos, dependendo do tamanho das áreas em que são renderizados.

Barra de progresso que exibe o avanço de uma tarefa que leva muito tempo ou consiste em várias etapas.