O que é rótulo de ária e como devo usá-lo?

321

Algumas horas atrás, li sobre o atributo aria-label , que:

Define um valor de sequência que rotula o elemento atual.

Mas, na minha opinião, é isso que o titleatributo deveria fazer. Procurei mais na Mozilla Developer Network para obter alguns exemplos e explicações, mas a única coisa que encontrei foi

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

O que não me fornece nenhum rótulo (então suponho que não entendi a idéia). Eu tentei aqui no jsfiddle .

Portanto, minha pergunta é: por que preciso aria-labele como devo usá-lo?

html assistive-technology Salvador Dalí
fonte
3
Olhando para o recurso que você vinculou, parece que aria-labelpode ser usado se você não quiser mostrar a dica de ferramenta fornecida pelo atributo title: Nos casos em que um rótulo visível ou uma dica de ferramenta visível é indesejável, os autores PODEM definir o nome acessível do elemento usando aria-label
Fabrizio Calderan
13
fyi ARIA = Aplicativos ricos para Internet acessíveis
Eric D'Souza
Alguém sabe se é apropriado usar aria-label para um texto <h1> mais descritivo quando o texto visível real dentro do elemento <h1> é muito breve e não se deseja que o texto completo seja visível? Nos exemplos deste segmento, um rótulo pode ser usado. Mas os rótulos não se aplicam aos cabeçalhos, e é por isso que pergunto
HelloWorld
A única coisa similar apropriada que você está solicitando é a propriedade "longdesc" (somente para imagens) que precisa de mais informações - não é possível imaginar que exista uma para o texto, pois sempre deve ser descritiva de qualquer maneira. - @HelloWorld
Jamie Paterson

Respostas:

427

É um atributo criado para ajudar a tecnologia assistiva (por exemplo, leitores de tela) a anexar um rótulo a um elemento HTML anônimo.

Portanto, há o <label>elemento:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

O <label>avisa explicitamente ao usuário que digite seu nome na inputcaixa onde id="fmUserName".

aria-labelfaz a mesma coisa, mas é para aqueles casos em que não é prático ou desejável ter uma labeltela. Veja o exemplo MDN :

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

A maioria das pessoas seria capaz de inferir visualmente que esse botão fechará a caixa de diálogo. Uma pessoa cega que usa a tecnologia assistida pode ouvir "X" em voz alta, o que não significa muito sem as pistas visuais. aria-labeldiz explicitamente o que o botão fará.

Olly Hodgson
fonte
4
Obrigado pela explicação, mas como ele vai ouvir de perto? O que posso fazer no meu navegador (chrome) para ouvir isso? E como uma pessoa cega pode selecionar esse botão se não tem ideia de onde está?
Salvador Dali
1
Eu acho que uma extensão como o ChromeVox seria um bom lugar para começar? Eu nunca usei isso embora. Eles trabalham lendo a tela em voz alta para o usuário, pegando pistas do HTML (por exemplo, um h1deve ser enfatizado mais que um p, aé claramente um , formulário de link » indica um lugar para inserir informações, aria-*atributos dão mais dicas sobre o que os elementos fazem, etc.) .
Olly Hodgson
2
Nesse caso em particular, eu o adicionaria a um título attribute. Não há mal nenhum em mostrar uma dica de ferramenta para 'ver' os usuários quando eles passam o mouse sobre o X.
GolezTrol 17/08/2015
3
Além do ChromeVox, há o NVDA . Ambos são bastante fáceis de instalar e iniciar e bastante difíceis de dominar.
Ivarni 12/10
1
@SalvadorDali - apenas para informação. no celular, o cego pode ativar a ferramenta de acessibilidade, como no celular Android, é o TalkBack e, para celulares iOS, é o VoiceOver. usando isso, a página é lida linha por linha.
Rahul J. Rane
71

No exemplo que você dá, você está perfeitamente certo, você precisa definir o atributo title.

Se essa aria-labelé uma ferramenta usada por tecnologias de assistência (como leitores de tela), ela não é suportada nativamente nos navegadores e não tem efeito neles. Isso não ajudará a maioria das pessoas visadas pelas WCAG (exceto usuários de leitores de tela), por exemplo, uma pessoa com deficiências intelectuais.

O "X" não é suficiente para fornecer informações à ação liderada pelo botão (pense em alguém sem conhecimentos de informática). Pode significar "fechar", "excluir", "cancelar", "reduzir", uma cruz estranha, um rabisco, nada.

Apesar do fato de que o W3C parece promover a aria-labelvez que o titleatributo aqui: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 em um exemplo semelhante, você pode ver que a tecnologia O suporte não inclui navegadores padrão: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

De fato aria-label, nessa situação exata, pode ser usado para dar mais contexto a uma ação:

Por exemplo, pessoas cegas não percebem pop-ups como aqueles de nós com boa visão, é como uma mudança de contexto. "Voltar à página" será uma alternativa mais conveniente para um leitor de tela, quando "Fechar" for mais significativo para alguém sem leitor de tela.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
Adão
fonte
35

Se você quer saber como o aria-labelajuda na prática .. siga os passos ... você o fará por conta própria ..

Crie uma página html com o código abaixo

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Agora, você precisa de um emulador de leitor de tela virtual que será executado no navegador para observar a diferença. Então, cromo usuários do navegador pode instalar ChromeVox extensão e os usuários do Mozilla pode ir com presas tela leitor de suplemento

Depois de concluir a instalação, coloque os fones de ouvido nos ouvidos, abra a página html e concentre-se nos dois botões (pressionando a tecla Tab) um por um .. e você pode ouvir .. o foco no first x button.. dirá apenas x button.. mas no caso de second x button.. você ouvirá back to the page buttonapenas ..

Espero que você tenha entendido bem agora !!

Moumit
fonte
1
Um ponto importante é que o titleatributo é ignorado, mesmo no primeiro botão. Mais informações: silktide.com/…
Sphinxxx
2
Ainda é o caso? Ainda melhor para fornecer tanto title e aria-label ?
Kamafeather
2
Isto é exatamente o que eu queria. Eu só queria ver e ouvir como isso funciona no mundo real e chromevoxfunciona como um encanto e recitará os campos marcados por ária. Obrigado.
Raj Rajeshwar Singh Rathore
7

Pré-requisito:

Aria é usado para melhorar a experiência do usuário de usuários com deficiência visual. Usuários com deficiência visual navegam pelo aplicativo usando software leitor de tela como JAWS, NVDA, etc. Enquanto navegam pelo aplicativo, o software leitor de tela anuncia o conteúdo para os usuários. O Aria pode ser usado para adicionar conteúdo ao código, o que ajuda os usuários de leitores de tela a entender a função, o estado, o rótulo e a finalidade do controle.

Aria não muda nada visualmente. (Aria também tem medo de designers).

rótulo de ária

O atributo aria-label é usado para comunicar o rótulo aos usuários do leitor de tela. Normalmente, o campo de entrada de pesquisa não possui rótulo visual (graças aos designers). ária-label pode ser usada para comunicar o rótulo de controle aos usuários de leitores de tela

Como usar:

<input type="edit" aria-label="search" placeholder="search">

Não há alteração visual no aplicativo. Mas os leitores de tela podem entender o propósito do controle

ária-labelledby

Tanto o rótulo da ária quanto o rótulo da ária são usados ​​para comunicar o rótulo. Porém, aria-labelledby pode ser usado para fazer referência a qualquer rótulo já presente na página, enquanto aria-label é usado para comunicar o rótulo que eu não exibi visualmente

Abordagem 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Abordagem 2:

aria-labelledby também pode ser usado para combinar duas etiquetas para usuários de leitores de tela

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">
ndioewbnc
fonte
3

o title atributo exibe uma dica de ferramenta quando o mouse está passando o mouse sobre o elemento. Embora esse seja um ótimo complemento, não ajuda pessoas que não podem usar o mouse (devido a deficiências de mobilidade) ou pessoas que não podem ver essa dica de ferramenta (por exemplo: pessoas com deficiência visual ou pessoas que usam um leitor de tela).

Como tal, a abordagem consciente aqui seria servir a todos os usuários. Eu adicionaria atributos titlee aria-label(servindo diferentes tipos de usuários e diferentes tipos de uso da web).

Aqui está um bom artigo que explica aria-labelem profundidade

lucalanca
fonte