Difference between revisions of "Accessible name calc"

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

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

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?