Usando o atributo aria-label

O atributo aria-label é usado para definir uma string na tag do elemento atual. Use nos casos que a tag do texto não seja visível na tela. Se há texto visível na tag do elemento, usa aria-labelledby em vez.

Esse atributo pode ser usado em qualquer elemento de HTML; não se limita aos elementos que tem um papel ARIA atribuído.

Valor

string

Possíveis efeitos sobre os user agents e Tecnologia assistiva 

Edit section

Nota: Opiniões podem diferir em como tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é um desses pareceres e, portanto, não normativo.

Exemplos

Exemplo 1: Várias Etiquetas

No exemplo abaixo, um botão é denominado para olhar como um botão típico "fechar", com um X no meio. Uma vez que não há nada que indique que a finalidade do botão é para fechar a janela, o atributo aria-label é utilizado para fornecer o rótulo para quaisquer tecnologias assistivas.

<button aria-label="Fechar" onclick="myDialog.close()">X</button>

Working Examples:

Notas

  • O mapeamento mais comum da API accessibility para uma label é a propriedade accessible name.
  • Atributos, incluindo declarações aria-label, são ignoradas pela maioria dos serviços de tradução automática.

Usado por regras ARIA

todos os elementos da marcação de base

Técnicas ARIA relacionadas

Compatibilidade

Ainda por fazer: Adicionar informação de apoio para os combinações de produtos UA e AT mais comuns

Recursos Adicionais