Difference between revisions of "Accessible name calc"
| Line 132: | Line 132: | ||
<h1>Input no type</h1> | <h1>Input no type</h1> | ||
| − | <p> | + | <p>Explicit label</p> |
| − | <input /> | + | <div> |
| + | <p>acc name is "first name:"</p> | ||
| + | <label for="fname1">First name:</label> | ||
| + | <input id="fname1" /> | ||
| + | </div> | ||
| + | |||
| + | <p>Implicit label</p> | ||
| + | <div> | ||
| + | <p>acc name is "first name:"</p> | ||
| + | <label> First name: | ||
| + | <input /> | ||
| + | </label> | ||
| + | |||
| + | <p>title attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "last name:"</p> | ||
| + | <input title="last name" /> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-label attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "Middle name:"</p> | ||
| + | <input aria-label="middle name" /> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-labelledby</p> | ||
| + | <div> | ||
| + | <p>acc name is "SSN:"</p> | ||
| + | <span id="ssn">SSN:</span> | ||
| + | <input aria-labelledby="ssn" /> | ||
| + | </div> | ||
<h1>Input type text</h1> | <h1>Input type text</h1> | ||
<p>Explicit Label</p> | <p>Explicit Label</p> | ||
<div> | <div> | ||
| − | <p> | + | <p>acc name is "first name:"</p> |
<label for="fname">First name:</label> | <label for="fname">First name:</label> | ||
<input id="fname" type="text" /> | <input id="fname" type="text" /> | ||
| Line 151: | Line 181: | ||
</div> | </div> | ||
| + | <p>title attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "last name:"</p> | ||
| + | <input type="text" title="last name" /> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-label attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "Middle name:"</p> | ||
| + | <input aria-label="middle name" /> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-labelledby</p> | ||
| + | <div> | ||
| + | <p>acc name is "SSN:"</p> | ||
| + | <span id="ssn1">SSN:</span> | ||
| + | <input type="text" aria-labelledby="ssn1" /> | ||
| + | </div> | ||
</body> | </body> | ||
Revision as of 20:26, 11 January 2017
Image
Image with aria-label and alt
having an accessible name of “here”.
Image with space for aria-label and alt
having an accessible name of “ ”.
Image with null for aria-label and alt
having an accessible name of “hello”.
Image with aria-labelledby with multiple id refs/h2>
Hello
Here
Hello
Here
Link
Link with pseudo content
has an accessible name of "click here".
Link with only pseudo content
Link referencing aria-labelledby with pseudo content
Link referencing aria-labelledby with display none including children
has an accessible name of "pool location"
Link referencing aria-labelledby with visibility hidden including children
has an accessible name of "pool"
Link referencing parent with aria-labelledby
Massive storm sweeps across nation click here
has an accessible name of "Massive storms sweeps across nation click here"
Link with aria-labelledby that contains some content with aria-hidden
Link with aria-labelledby that contains all content with aria-hidden
Link with text and span with aria-label and span with aria-labelledby
Avila D
Has an accessible name of "Jon not".
Reference to aria-labelledby element which has aria-label
Avila
Has an accessible name of "David".
Switch
Name as text content "running?"
Name as aria-labelledby "Is your refrigerator running?"
Name as aria-label "Fridge is running?"
Name as title attribute with text content "Running?"
Name as title attribute with no text content "Fridge is running?"
iframe
title "SSB's homepage"
aria-label "my label"
aria-labelledby "SSB's homepage"
Input no type
Explicit label
acc name is "first name:"
Implicit label
acc name is "first name:"
title attribute
acc name is "last name:"
aria-label attribute
acc name is "Middle name:"
aria-labelledby
acc name is "SSN:"
SSN:Input type text
Explicit Label
acc name is "first name:"
Implicit label
acc name is "first name:"
title attribute
acc name is "last name:"
aria-label attribute
acc name is "Middle name:"
aria-labelledby
acc name is "SSN:"
SSN: