Difference between revisions of "Accessible name calc"
Jump to navigation
Jump to search
Image with aria-labelledby with multiple id refs/h2>
| Line 4: | Line 4: | ||
content: "swimming "; | content: "swimming "; | ||
} | } | ||
| + | div[role="switch"] { | ||
| + | min-width:1em; | ||
| + | max-width:2em; | ||
| + | min-height:1em; | ||
| + | border: thin solid black; | ||
| + | } | ||
</style> | </style> | ||
<body> | <body> | ||
| + | |||
<h2>Image with aria-label and alt</h2> | <h2>Image with aria-label and alt</h2> | ||
<img src=”test.gif” aria-label="here" alt="hello"> | <img src=”test.gif” aria-label="here" alt="hello"> | ||
| Line 89: | Line 96: | ||
<p id="aa2" aria-label="David">Avila</p> | <p id="aa2" aria-label="David">Avila</p> | ||
<p> Has an accessible name of "David".</p> | <p> Has an accessible name of "David".</p> | ||
| + | |||
| + | <p>Name as text content "running?"</p> | ||
| + | <div>Is your refrigerator running?</div> | ||
| + | <div tabindex="0" role="switch" aria-checked="true">Running?</div> | ||
| + | |||
| + | <p>Name as aria-labelledby "Is your refrigerator running?"</p> | ||
| + | <div id="d2">Is your refrigerator running?</div> | ||
| + | <div tabindex="0"role="switch" aria-labelledby="d2" aria-checked="true">Running?</div> | ||
| + | |||
| + | <p>Name as aria-label "Fridge is running?"</p> | ||
| + | <div>Is your refrigerator running?</div> | ||
| + | <div tabindex="0" role="switch" aria-label="Fridge is running?" aria-checked="true">Running?</div> | ||
| + | |||
| + | <p>Name as title attribute with text content "Running?"</p> | ||
| + | <div>Is your refrigerator running?</div> | ||
| + | <div tabindex="0" role="switch" title="Fridge is running?" aria-checked="true">Running?</div> | ||
| + | |||
| + | <p>Name as title attribute with no text content "Fridge is running?"</p> | ||
| + | <div>Is your refrigerator running?</div> | ||
| + | <div tabindex="0" role="switch" title="Fridge is running?" aria-checked="true"></div> | ||
</body> | </body> | ||
Revision as of 17:36, 11 January 2017
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 with pseudo content
click here
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
click here
has an accessible name of "pool location"
Link referencing aria-labelledby with visibility hidden including children
click here
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".
Name as text content "running?"
Is your refrigerator running?
Running?
Name as aria-labelledby "Is your refrigerator running?"
Is your refrigerator running?
Running?
Name as aria-label "Fridge is running?"
Is your refrigerator running?
Running?
Name as title attribute with text content "Running?"
Is your refrigerator running?
Running?
Name as title attribute with no text content "Fridge is running?"
Is your refrigerator running?
