</table>

<p><code>aria-label</code> and <code>aria-labelledby</code> have similar behaviour in screen readers and the Accessibility API, but <code>aria-label</code> should be reserved for when there is no visible text on the page to reference or when keeping track of <code>id</code> values would be too difficult. <a href="http://davidmacd.com/blog/does-aria-label-override-static-text.html">Test sources</a></p>

<h4>Internet explorer notes on aria-labelledby, aria-label, and aria-describedby</h4>

p>In Internet Explorer, if you use <code>aria-labelledby</code> with multiple <code>id</code> references or <code>aria-describedby</code> with single or multiple <code>id</code> references, the referenced elements <strong>must be</strong> what Microsoft terms as <a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">accessible HTML elements</a>.</p>

<p>The following example of <code>aria-labelledby</code> with multiple references uses a <code>span</code> with a <code>tabindex=-1</code> added. Refer to <a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Making_Nonaccessible_Elements_Accessible">Making Non accessible Elements Accessible</a>.</p>

<p>In Internet Explorer, if you use <code>aria-labelledby</code> with multiple <code>id</code> references or <code>aria-describedby</code> with single or multiple <code>id</code> references, the referenced elements <strong>must be</strong> what Microsoft terms as <a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">accessible HTML elements</a>.</p>

<p>The following example of <code>aria-labelledby</code> with multiple references uses a <code>span</code> with a <code>tabindex=-1</code> added. Refer to <a href="http://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Making_Nonaccessible_Elements_Accessible">Making Non accessible Elements Accessible</a>.</p>

<code class="block">&lt;label

<mark>id=&quot;l1&quot;</mark>

for="f3"&gt;label text&lt;/label&gt;<br>

<h5>What If You Can't Avoid Using CSS Images or If You Want Alternate Text for &quot;Non-important&quot; Ambient Photos, Etc.? </h5>

<p>The CSS spec makes its discouragement of CSS informational background images a &quot;SHOULD&quot; not a &quot;MUST&quot; because there are times when visual design or existing code makes it difficult to change it to an HTML image without redesigning the front-end. Other times the author may want to provide alternate text for an ambient image that is <em><strong>not</strong></em> "important" to the understanding of the content but as a courtesy to screen reader users who prefer knowing what is in the image. Here is a detailed article on <a href="http://davidmacd.com/blog/what-is-pure-decoration-alt-text-in-wcag.html">ambient images vs pure decoration vs informational images.</a> </p>

<h5>When Providing Alternate Text for the CSS Image, There Are Number of Considerations </h5>

<p>If the <code>&lt;div&gt;</code> tag has any content inside it, then a <code>role=&quot;img&quot;</code> and <code>aria-label</code> could obscure the inside content because of the <a href="https://www.w3.org/TR/html-aam-1.0/#img-element">accessible name calculation</a>, or the assistive technology might just ignore the <code>aria-label</code>.

<p>If the <code>&lt;div&gt;</code> tag has any content inside it, then a <code>role=&quot;img&quot;</code> and <code>aria-label</code> could obscure the inside content because of the <a href="https://www.w3.org/TR/html-aam-1.0/#img-element">accessible name calculation</a>, or the assistive technology might just ignore the <code>aria-label</code>.

</p>

<p>So do not put the CSS background image inside a <code>&lt;div&gt;</code> that contains any content. It's best to use an empty <code>&lt;span&gt;</code> and an <code>aria-label</code> with <code>role="img"</code></p>

<p><strong>Do this:</strong></p>

<h3 tabindex="-1">Using ARIA role=application</h3>

<h4 id="not">How Does role=&quot;application&quot; Affect a Screen Reader?</h4>

<p>On many popular screen readers today, most keystrokes are captured by the screen reader and not the web page when the user is in browse mode. This is necessary for efficient navigation of a page. As of this writing, when application mode is set, many screen readers stop intercepting keystrokes, and pass all keystrokes directly to the browser. Then the user won't be able to navigate the page as easily. For instance they won't be able to skip around the page by headings or read a paragraph of static text line-by-line. However, several screen readers do not behave differently when there is an application role set.</p>

<h4>So When Should I Use It, and When Not? </h4>

<h4>So When Should I Use It, and When Not?</h4>

<p>In determining when to use <code>role=application</code>, one should consider, among other things, the advantages of screen reader keyboard shortcuts weighed against the loss of those features. It generally should not be used, and if it is, usability testing with screen reader users should be conducted.</p>

<p>You <strong>do not</strong> use <code>role="application"</code> if a set of controls only contains these widgets, that are all part of standard HTML. This also applies if you mark them up and create an interaction model using WAI-ARIA roles instead of standard HTML widgets:</p>

<p><strong>NOTE:</strong> It's not recommended that authors develop custom text input widgets. It's almost always best to use the native inputs for these.</p>