Difference between revisions of "Accessible name calc"

From Level Access Web Labs
Jump to navigation Jump to search
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

hello

having an accessible name of “here”.

Image with space for aria-label and alt

hello

having an accessible name of “ ”.

Image with null for aria-label and alt

hello

having an accessible name of “hello”.

Image with aria-labelledby with multiple id refs/h2>
Hello Here

Link

Link with pseudo content

click here

has an accessible name of "click here".

Link with only pseudo content

has an accessible name of "".

Link referencing aria-labelledby with pseudo content

click here
pool

has an accessible name of "pool".

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

click here

Storm

has an accessible name of "storm".

Link with aria-labelledby that contains all content with aria-hidden

click here

has an accessible name of "click here".

Link with text and span with aria-label and span with aria-labelledby

jonnot

Avila D

Has an accessible name of "Jon not".

Reference to aria-labelledby element which has aria-label

jon

Avila

Has an accessible name of "David".


Switch

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?

iframe

title "SSB's homepage"

aria-label "my label"

aria-labelledby "SSB's homepage"

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:"