Al usar un lector de pantalla, se pierde una gran cantidad de la información visual . Debido a esto, tenemos que proporcionar información específica a los que puede ser obvio para una persona que no sufré discapacidad visual.
Una forma común que la gente usa es el definir la información específicamente para los lectores de pantalla envolviendo el texto en una clase especifica.
Aunque esto funciona, podemos usar atributos ARIA que son específicamente para este propósito. Hay tres atributos que podemos utilizar para proporcionar un texto descriptivo para los lectores de pantalla.
El atributo establece relaciones entre los objetos y sus etiquetas, aria-labelledby es muy similar al aria-describedby : uno proporciona información esencial acerca de un objeto, mientras que el otro proporciona información ampliada que el usuario pueda necesitar.
------------------------------------ejemplo1---------------------------------
<div id="billing">Billing Address</div>
<div>
<div id="name">Name</div>
<input type="text" aria-labelledby="billing name"/>
</div>
<div>
<div id="address">Address</div>
<input type="text" aria-labelledby="billing address"/>
</div>
-------------------------------asociación de encabezados con su región------------------------
<div role="main" aria-labelledby="foo">
<h1 id="foo">Wild fires spread across the San Diego Hills</h1>
Strong winds expand fires ignited by high temperatures ...
</div>
------------------------------------Asociación con el boton radio--------------------
<div id="radio_label">My 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>
---------------------------------Menus---------------------------------------
<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>
-----------------------------------Definiciones------------------------------
<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>
----------------------Dialogos---------------------------------------
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">Choose a File</h2>
... Dialog contents
</div>
Se utiliza para definir una acción que etiqueta el elemento actual.
Ejemplo. un botón es estilizado para parecer un típico botón "cerrar", con una X en medio
<button aria-label="Close" onclick="myDialog.close()">X
</button>
Este atributo se utiliza para especificar el nombre o etiqueta del elemento actual.se puede utilizar para adjuntar información descriptiva a uno o más elementos
Para utilizar el atributo, se escribe el ID del elemento que contiene la etiqueta.
<div role="main" aria-labelledby="foo">
<h1 id="foo">Wild fires spread across the San Diego Hills</h1>
Strong winds expand fires ignited by high temperatures ...
</div>
-------------------------------ejemplo2------------------------
<div id="radio_label">My 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>A
