Difference between revisions of "ARIA label Property"
Jump to navigation
Jump to search
This is some text in the region.
SSB BART Group
| (24 intermediate revisions by 3 users not shown) | |||
| Line 3: | Line 3: | ||
==Input example== | ==Input example== | ||
<html> | <html> | ||
| − | <label>Username:</label> | + | <!--<label>Username:</label> --> |
| − | <input aria-label=" | + | <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 30: | Line 30: | ||
</div> | </div> | ||
</html> | </html> | ||
| + | |||
| + | ==Button example== | ||
| + | <html> | ||
| + | <button aria-label="my label"></button> | ||
| + | <button aria-label="my label">inner text</button> | ||
| + | <button title="title"></button> | ||
| + | <button> <span class="visuallyhidden">visually hidden text</span></button> | ||
| + | </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.
Contents
Input example
Link example
Learn more about SSB BART Group Click here
Region example
Related links
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
