Descrição
Essa técnica demonstra como usar o atributo aria-labelledby.
O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.
aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.
O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atibutos nesses casos.
aria-labelledby pode ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.
Esse atributo pode ser usando com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.
Value
Uma lista separadas por espaço de IDs do elemento
Possíveis efeitos em user agents e tecnologias assistivas
Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.
Exemplos
Exemplo 1: Múltiplas Labels
No exemplo abaixo, cada campo input é rotulado por ambos tanto por seu próprio rótulo individual como para o rótulo para o grupo:
<div id="billing">Endereço de Cobrança</div>
<div>
<div id="name">Nome</div>
<input type="text" aria-labelledby="name billing"/>
</div>
<div>
<div id="address">Endereço</div>
<input type="text" aria-labelledby="address billing"/>
</div>
Exemplo 2: Associando Cabeçalhos com Regiões
No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.
<div role="main" aria-labelledby="foo"> <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1> Fortes ventos expandem o fogo inflamado pelas altas temperaturas ... </div>
Exemplo 3: Radio Groups
No exemplo abaixo, o container de um radiogroup é associado com suas labels usando o atributo aria-labelledby:
<div id="radio_label">Meu radio label</div>
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">Item #1</li>
<li role="radio">Item #2</li>
<li role="radio">Item #3</li>
</ul>
Exemplo 4: Dialog Label
In the example below, the header element that labels the dialog is referred to by the aria-labelledby attribute:
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">Choose a File</h2>
... Dialog contents
</div>
Example 5: Inline Definition
In the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute:
<p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> or an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> </p>
Example 6: Definition Lists
In the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute:
<dl>
<dt id="anathema">anthema</dt>
<dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority
and accompanied by excommunication</dd>
<dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
<dt id="homily">homily</dt>
<dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
<dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
</dl>
Example 7: Menus
In the example below, a popup menu is associated with its label using the aria-labelledby attribute:
<div role="menubar">
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">Open</div>
<div role="menuitem">Save</div>
<div role="menuitem">Save as ...</div>
...
</div>
...
</div>
Working Examples:
- Button example uses
aria-labelledby - Combobox example uses
aria-labelledby
Notes
The most common accessibility API mapping for a label is the accessible name property
Used by ARIA roles
all elements of the base markup
Related ARIA techniques
Compatibility
TBD: Add support information for common UA and AT product combinations