Usando o atributo aria-label

O atributo aria-label é usado para definir um 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 assistiva.

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

Working Examples:

 

Notas

The most common accessibility API mapping for a label is the accessible name property.

Used by ARIA roles

todos os elementos da marcação de base

Compatibilidade

TBD: Add support information for common UA and AT product combinations

Recursos Adicionais