Difference between revisions of "Accessible name calc"
Jump to navigation
Jump to search
Image with aria-labelledby with multiple id refs/h2>
| Line 12: | Line 12: | ||
</style> | </style> | ||
<body> | <body> | ||
| − | + | <h1>Image</h1> | |
<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 31: | Line 31: | ||
<span id="a2"> Here </span> | <span id="a2"> Here </span> | ||
</div> | </div> | ||
| − | + | <hr> | |
| + | <h1>Link</h1> | ||
<h2>Link with pseudo content</h2> | <h2>Link with pseudo content</h2> | ||
<div> | <div> | ||
Revision as of 17:37, 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
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?
