Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 447833 of Using the aria-label attribute

  • Revision slug: Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
  • Revision title: Using the aria-label attribute
  • Revision id: 447833
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Editorial review
Tags: 

Revision Content

This technique demonstrates how to use the aria-label attribute.

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. (If there is visible text labeling the element, use aria-labelledby instead.)

This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA role assigned.

Value

string

Possible effects on user agents and assistive technology 

Edit section

Note: Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

Example 1: Multiple Labels

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

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

Working Examples:

 

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

Compatibility

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

Additional resources

Revision Source

 
<p>This technique demonstrates how to use the <a class="external" href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-label" rel="external" target="_blank" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-label"><code>aria-label</code></a> attribute.</p>
<p>The <code>aria-label</code> attribute is used to define a string that labels the current element. Use it in cases where a text label is <em>not</em> visible on the screen. (If there is visible text labeling the element, use <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> instead.)</p>
<p>This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA <code>role</code> assigned.</p>
<h3 class="editable" id="Value"><span>Value</span></h3>
<p>string</p>
<h3 class="editable" id="Possible_effects_on_user_agents_and_assistive_technology.C2.A0"><span>Possible effects on user agents and assistive technology&nbsp;</span></h3>
<div class="editIcon" style="visibility: hidden;">
  <h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&amp;sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif" /></span></a></h3>
</div>
<div class="note">
  <strong>Note:</strong>&nbsp;Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.</div>
<h2 id="Examples">Examples</h2>
<div id="section_5">
  <h4 id="Example_1.3A_Multiple_Labels">Example 1: Multiple Labels</h4>
  <p>In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the <code>aria-label</code> attribute is used to provide the label to any assistive technologies.</p>
</div>
<pre class="deki-transform">
<span class="tag">&lt;button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>&gt;</span>X<span class="tag">&lt;/button&gt;</span>
</pre>
<h4 id="Working_Examples.3A">Working Examples:</h4>
<p>&nbsp;</p>
<h3 id="Notes.C2.A0">Notes&nbsp;</h3>
<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property.</p>
<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3>
<p>all elements of the base markup</p>
<h3 id="Related_ARIA_techniques.C2.A0">Related ARIA techniques&nbsp;</h3>
<ul>
  <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li>
</ul>
<h3 id="Compatibility">Compatibility</h3>
<p class="comment">TBD: Add support information for common UA and AT product combinations</p>
<h3 id="Additional_resources">Additional resources</h3>
<ul>
  <li><a class="external" href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-label" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-label">WAI-ARIA specification for aria-label</a></li>
</ul>
Revert to this revision