Difference between revisions of "Accessible name calc"
| Line 201: | Line 201: | ||
<h1>Object element</h1> | <h1>Object element</h1> | ||
| + | |||
| + | <p>Inner text</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is an object"</p> | ||
| + | <object width="400" height="400" data="acc.swf">This is an object</object> | ||
| + | </div> | ||
| + | |||
<p>title attribute</p> | <p>title attribute</p> | ||
| + | <p>Acc name = "This is an object"</p> | ||
| + | <div> | ||
| + | <object width="400" height="400" data="acc.swf" title="this is an object"></object> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-label attribute</p> | ||
<div> | <div> | ||
<p>acc name is "This is an object"</p> | <p>acc name is "This is an object"</p> | ||
| − | <object | + | <object width="400" height="400" data="acc.swf" aria-label="this is an object"></object> |
| + | </div> | ||
| + | |||
| + | <p>aria-labelledby attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is Flash"</p> | ||
| + | <object width="400" height="400" data="acc.swf" aria-labelledby="o1"></object> | ||
| + | <div id="o1">This is Flash</div> | ||
| + | </div> | ||
| + | |||
| + | <h1>Applet Element</h1> | ||
| + | |||
| + | <p>Inner text</p> | ||
| + | <p>Acc name = "This is an inner text"</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is an applet"</p> | ||
| + | <applet code="Acc.class" width="350" height="350">This is inner text</applet> | ||
| + | </div> | ||
| + | |||
| + | <p>Title attribute</p> | ||
| + | <p>Acc name = "This is an applet"</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is an applet"</p> | ||
| + | <applet code="Acc.class" width="350" height="350" title="this is an applet"></applet> | ||
| + | </div> | ||
| + | |||
| + | <p>Alt attribute</p> | ||
| + | <p>Acc name = "This is an applet"</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is an applet"</p> | ||
| + | <applet code="Acc.class" width="350" height="350" alt="this is an applet"></applet> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-label attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is an applet"</p> | ||
| + | <applet code="Acc.class" width="350" height="350" aria-label="this is an applet"></applet> | ||
| + | </div> | ||
| + | |||
| + | <p>aria-labelledby attribute</p> | ||
| + | <div> | ||
| + | <p>acc name is "This is Java"</p> | ||
| + | <applet code="Acc.class" width="350" height="350" aria-labelledby="j1"></applet> | ||
| + | <div id="j1">This is Java</div> | ||
</div> | </div> | ||
Revision as of 18:02, 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 = "This is an inner text"
acc name is "This is an applet"
Title attribute
Acc name = "This is an applet"
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"