Difference between revisions of "Accessible name calc"
| Line 199: | Line 199: | ||
<input type="text" aria-labelledby="ssn1" /> | <input type="text" aria-labelledby="ssn1" /> | ||
</div> | </div> | ||
| + | </body> | ||
| + | </html> | ||
| − | < | + | =Object element= |
| − | + | <html> | |
| + | </body> | ||
<p>Inner text</p> | <p>Inner text</p> | ||
<div> | <div> | ||
| Line 226: | Line 229: | ||
<div id="o1">This is Flash</div> | <div id="o1">This is Flash</div> | ||
</div> | </div> | ||
| + | </body> | ||
| + | </html> | ||
| − | + | =Applet Element= | |
| − | + | <html> | |
| + | <body> | ||
<p>Inner text</p> | <p>Inner text</p> | ||
| − | |||
<div> | <div> | ||
| − | <p>acc name is "This is | + | <p>acc name is "This is inner textt"</p> |
<applet code="Acc.class" width="350" height="350">This is inner text</applet> | <applet code="Acc.class" width="350" height="350">This is inner text</applet> | ||
</div> | </div> | ||
<p>Title attribute</p> | <p>Title attribute</p> | ||
| − | <p> | + | <p>acc name is "This is an applet"</p> |
<div> | <div> | ||
| − | |||
<applet code="Acc.class" width="350" height="350" title="this is an applet"></applet> | <applet code="Acc.class" width="350" height="350" title="this is an applet"></applet> | ||
</div> | </div> | ||
Revision as of 18:05, 23 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:Object element
Inner text
acc name is "This is an object"
title attribute
Acc name = "This is an object"
aria-label attribute
acc name is "This is an object"
aria-labelledby attribute
acc name is "This is Flash"
Applet Element
Inner text
acc name is "This is inner textt"
Title attribute
acc name is "This is an applet"
Alt attribute
Acc name = "This is an applet"
acc name is "This is an applet"
aria-label attribute
acc name is "This is an applet"
aria-labelledby attribute
acc name is "This is Java"
