Alternativa textual para elementos que não são imagens

Elementos como os de navegação (<nav>), de seção (<section>), componentes dinâmicos, dentre outros, podem receber um rótulo como alternativa. Este rótulo pode ser interpretado pelos leitores de tela, auxiliando a pessoa com deficiência visual a identificar aquele conteúdo. Para tal, é indicado utilizar o atributo aria-label para fornecer um rótulo de texto a um objeto. Quando um leitor de tela encontra o objeto, o conteúdo do atributo aria-label é lido para que o usuário saiba do que se trata.

Observação: o aria-label substituirá qualquer outra nomenclatura especificada, como alt em imagens ou o label associado a um campo de formulário usando o atributo for. Nesse sentido, é importante ressaltar que o alt e o label devem ser priorizados, quando se trata de imagens e formulários respectivamente, em relação ao aria-label. Recomenda-se que este último seja utilizado apenas em casos onde o objeto não é uma imagem ou formulário.

Exemplo de alternativa para elementos de navegação

Seção de uma página web que lista os links de acesso para cada curso ofertado agrupados por nível de ensino, onde o nível de ensino é informado ao usuário pelo atributo aria-label

Código fonte do exemplo:

Exemplo de alternativa para elementos de seção

Um trecho de código HTML de uma página web de um cinema exemplifica a utilização do elemento section para separar partes de uma página, sendo cada parte ou seção identificada pelo atributo aria-label

Programação

Selecione abaixo sua cidade e o cinema para acessar a programação dos atuais filmes em cartaz

Ingresso online

Não perca tempo e garanta sua poltrona comprando com antecedência seu ingresso

Próximas estreias

Conheça os filmes que em breve irão estreiar por aqui

Código fonte do exemplo:

Exemplo de alternativa para gráficos dinâmicos

Uma página web que mostra, em um componente dinâmico, o desempenho das ações de uma empresa ao longo do dia

Código fonte do exemplo: