Difference between revisions of "Accessible name calc"
| Line 130: | Line 130: | ||
<div id="i1"> SSB's homepage</div> | <div id="i1"> SSB's homepage</div> | ||
<iframe src="https://www.ssbbartgroup.com" aria--labelledby="i1"></iframe> | <iframe src="https://www.ssbbartgroup.com" aria--labelledby="i1"></iframe> | ||
| + | |||
| + | <h1>Input no type</h1> | ||
| + | <p>Input no type</p> | ||
| + | <input /> | ||
| + | |||
| + | <h1>Input type text</h1> | ||
| + | <p>Explicit Label</p> | ||
| + | <div> | ||
| + | <p>acce name is "first name:"</p> | ||
| + | <label for="fname">First name:</label> | ||
| + | <input id="fname" type="text" /> | ||
| + | </div> | ||
| + | |||
| + | <p>Implicit label</p> | ||
| + | <div> | ||
| + | <p>acc name is "first name:"</p> | ||
| + | <label> First name: | ||
| + | <input type="text" /> | ||
| + | </label> | ||
| + | </div> | ||
| + | |||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
[[Category:ARIA]] | [[Category:ARIA]] | ||
Revision as of 20:22, 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
Input no type
Input type text
Explicit Label
acce name is "first name:"
Implicit label
acc name is "first name:"
