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 25693 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: 25693
  • Created:
  • Creator: anastasia
  • Is current revision? No
  • Comment page created, 230 words added
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 labelling the element, use aria-labelledby instead.)

This attribute can be used with any typical HTML form 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

Edit section

Example 1: Dialog 'Close' button

Edit section

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

Related ARIA techniques 

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 labelling 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 form element; it is not limited to elements that have an ARIA <code>role</code> assigned.</p>
<h3 class="editable"><span>Value</span></h3>
<p>string</p>
<h3 class="editable"><span>Possible effects on user agents and assistive technology </span></h3>
<div class="editIcon" style="visibility: hidden;"> <h3 class="editable"><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> 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>
<h3 class="editable"><span>Examples</span></h3>
<div class="editIcon" style="visibility: hidden;"> <h3 class="editable"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&amp;sectionId=4" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
</div>
<div id="section_5"> <h4 class="editable"><span>Example 1: Dialog 'Close' button</span></h4> <div class="editIcon" style="visibility: hidden;"> <h4 class="editable"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&amp;sectionId=5" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h4> </div> <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>Working Examples:</h4>
<p> </p>
<h3>Notes </h3>
<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property</p>
<h3>Used by ARIA roles</h3>
<p>all elements of the base markup</p>
<h3>Related ARIA techniques </h3>
<ul> <li><a href="/en/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>Compatibility</h3>
<p class="comment">TBD: Add support information for common UA and AT product combinations</p>
<h3>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