Difference between revisions of "ARIA label Property"

From Level Access Web Labs
Jump to navigation Jump to search
m (Jon Avila moved page Aria-label ARIA Property to ARIA label Property)
 
(21 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
==Input example==
 
==Input example==
 
<html>
 
<html>
<label>Username:</label>
+
  <!--<label>Username:</label> -->
<input aria-label="user name" type="text" id="t1" />
+
  <input aria-label="my label" type="text" id="t1" />
<button> Login </button>
+
  <button> Login </button>
 
</html>
 
</html>
  
 
<html>
 
<html>
<label>City:</label>
+
  <label>City:</label>
<input aria-label="City" type="text" id="c1" />
+
  <input aria-label="City" type="text" id="c1" />
<button> Go </button>
+
  <button> Go </button>
 
</html>
 
</html>
  
 
==Link example==
 
==Link example==
 
<html>
 
<html>
<p><span>Learn more about SSB BART Group</span>
+
  <p><span>Learn more about SSB BART Group</span>
<a aria-label="Learn more about SSB BART Group" href="http://www.ssbbartgroup.com/">Click here </a></span>
+
  <a aria-label="Learn more about SSB BART Group" href="http://www.ssbbartgroup.com/">Click here </a></span>
 
</html>
 
</html>
  
Line 33: Line 33:
 
==Button example==
 
==Button example==
 
<html>
 
<html>
<button aria-label="aria-label"></button>
+
<button aria-label="my label"></button>
<button aria-label="aria-label">inner text</button>
+
<button aria-label="my label">inner text</button>
 
<button title="title"></button>
 
<button title="title"></button>
 
<button> <span class="visuallyhidden">visually hidden text</span></button>
 
<button> <span class="visuallyhidden">visually hidden text</span></button>
 
</html>
 
</html>
 +
 +
==Span==
 +
<span aria-label="this is an aria-label"> This is text.</span>
 +
 +
==Div==
 +
<div aria-label="this is an aria-label"> This is text.</div>
 +
 +
==aria-label attribute with empty string value==
 +
<html>
 +
<div style="padding-bottom: 12px;"><button type="button" aria-label=""> Hello World</button></div>
 +
</html>
 +
 +
==aria-label with role=presentation==
 +
<html>
 +
<div style="padding-bottom: 12px;" role="presentation" aria-label="Scrollable" tabindex="-1">div with role="presentation", tabindex=-1, and existing aria-label value present.</div>
 +
</html>
 +
Testing ARIA Authoring Practice [https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role_ignored 7.2 Conditions That Cause Role presentation to be Ignored]
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]
 
[[Category:Aria-label]]
 
[[Category:Aria-label]]

Latest revision as of 20:42, 24 January 2019

  • aria-label won't be announced when applied to elements that do not contain valid ARIA region/landmark roles or if they are not already active elements like form fields, links, or buttons.

Input example

Link example

Learn more about SSB BART Group Click here

Region example

Related links

This is some text in the region. SSB BART Group

Button example

Span

This is text.

Div

This is text.

aria-label attribute with empty string value

aria-label with role=presentation

div with role="presentation", tabindex=-1, and existing aria-label value present.

Testing ARIA Authoring Practice 7.2 Conditions That Cause Role presentation to be Ignored