Difference between revisions of "Accessible name calc"

From Level Access Web Labs
Jump to navigation Jump to search
Line 28: Line 28:
 
<div>
 
<div>
 
   <a class="pseudo" href="#"> click here </a>
 
   <a class="pseudo" href="#"> click here </a>
 +
  <p>has an accessible name of "click here".</p>
 
</div>
 
</div>
  
Line 33: Line 34:
 
<div>
 
<div>
 
   <a class="pseudo" href="#"></a>
 
   <a class="pseudo" href="#"></a>
 +
  <p>has an accessible name of "".</p>
 
</div>
 
</div>
  
Line 39: Line 41:
 
   <a href="#" aria-labelledby="d1a"> click here </a>
 
   <a href="#" aria-labelledby="d1a"> click here </a>
 
   <div id="d1a" class="pseudo"> pool </div>
 
   <div id="d1a" class="pseudo"> pool </div>
 +
  <p>has an accessible name of "pool".</p>
 
</div>
 
</div>
  

Revision as of 15:31, 29 November 2016

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