Pular para o conte√ļdo principal

Link

Vis√£o geral#

Os links são utilizados como rota. O destino dessa rota pode ser externo ou interno à aplicação. Eles podem ser usados dentro de texto ou isoladamente.

Anatomia#

O link é composto por uma label que descreve a sua finalidade, comunicando ao que ele está vinculado.

Anatomia do link apresentada na imagem. Texto link text representado a label do link.

1. Label (rótulo).

Os componentes são formados por tokens, sendo estes propriedades de estilo que definem como será estruturado o link. Os tokens que podem ser alterados pelas marcas, podem ser conferidos na seção de propriedades customizáveis.

Boas pr√°ticas#

O componente link foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Tamb√©m foram estruturadas padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia para os usu√°rios. Por isso, √© muito importante que, ao aplicar esse componente, o propriet√°rio do conte√ļdo leve em considera√ß√£o alguns crit√©rios e pr√°ticas:

Uso#

  • Evite usar muitos links em uma √ļnica tela, pois isso pode confundir o usu√°rio quanto a identifica√ß√£o e rotas.
  • Em caso de intera√ß√Ķes que alteram ou manipulam dados ou acionam alguma a√ß√£o, priorize o uso de bot√Ķes ao inv√©s de link.
  • Use labels (r√≥tulos) que descrevam a finalidade do link. Evite texto como "Clique aqui", por exemplo. (WCAG 2.4.9: Link Purpose - Link Only)
Link com a label Animalia DSFazer

Use labels que descrevam precisamente o direcionamento do link, como o nome da p√°gina para qual o usu√°rio ser√° direcionado.

Link com a label clicando aquiN√£o fazer

Não use labels muito vagas ou genéricas para o link, elas devem informar claramente o local de acesso.

  • N√£o use cores para o link com baixo contraste entre o fundo e o texto, pois isso dificulta o entendimento do conte√ļdo. √Č poss√≠vel conferir se o contraste est√° adequado e atingindo o valor de 7:1 em um Contrast Checker (WCAG 1.4.6: Contrast)
Link com contraste alto e underline com a label documentaçãoFazer

Utilize o componente de link com contraste adequado para que os usu√°rios consigam identificar facilmente no meio do texto.

Link com contraste baixo, sem o underline e com a label documentaçãoNão fazer

Além do cuidado com o contraste, não remova o underline do link, pois isso dificulta a identificação do componente.

Interação#

  • A intera√ß√£o de foco deve compor o componente, sendo a navega√ß√£o por mouse ou teclado, e em sequ√™ncia l√≥gica. Como por exemplo, ao pressionar Enter, executa o link e move o foco para o destino do link. (WCAG 2.4.3: Focus Order)
  • A dist√Ęncia entre o link e outras √°reas interativas deve ter no m√≠nimo 44px de altura e largura, para permitir distanciamento seguro e para que nenhum outro elemento seja acionado sem inten√ß√£o. (WCAG 2.5.8: Pointer Target Spacing)
Dois links dispostos com o espaçamento adequado de 44pxFazer

Utilize um espaçamento adequado para que o tamanho do componente, mais o espaçamento para outro elemento, alcance a soma de no mínimo 44px.

Dois links com pouco espaçamento, totalizando 32pxNão fazer

Um espaçamento menor do que o necessário, com soma inferior a 44px, pode ocasionar em um clique indesejado.

  • Quando se tratar de um link para uma p√°gina externa, √© recomend√°vel que esta informa√ß√£o seja adicionada na label do componente link, para que a mudan√ßa de contexto seja informada ao usu√°rio (WCAG 3.2.5: Change on Request).
Link com complemento entre parênteses, escrito que abre em uma outra guiaFazer

Informe de forma clara, qual comportamento o link ter√°, se ir√° abrir uma outra guia ou janela.

Link com complemento entre parênteses, escrito que abre em outro lugarNão fazer

N√£o insira informa√ß√Ķes gen√©ricas que n√£o contribuem para o entendimento do usu√°rio.

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas pelo propriet√°rio do conte√ļdo. S√£o elas:

  • O link foi desenvolvido utilizando controles padr√Ķes HTML para permitir a identifica√ß√£o do mesmo na interface por tecnologias assistivas. (WCAG 4.1.2: Name, Role, Value)
  • A cor n√£o deve ser o √ļnico meio para diferenciar o link de textos comuns ou outros elementos, por isso deve-se manter o underline no link, para proporcionar essa diferen√ßa. (WCAG 1.4.1: Use of Color/ 3.2.4: Consistent Identification)
  • O foco precisa ter uma √°rea m√≠nima do dobro do per√≠metro do link, ter contraste de pelo menos 4.5:1 entre o estado focado e n√£o focado do componente; e o foco n√£o pode ficar escondido por outros elementos da tela. (WCAG 2.4.12: Focus Appearance - Enhanced)
  • O estado de foco do componente deve ser sempre preservado. (WCAG 2.4.7: Focus Visible)