Difference between revisions of "Accessible name calc"

From Level Access Web Labs
Jump to navigation Jump to search
Line 35: Line 35:
 
   <div id="d1a" class="pseudo"> pool </div>
 
   <div id="d1a" class="pseudo"> pool </div>
 
</div>
 
</div>
 +
 +
<h2>Link referencing aria-labelledby with display none including children</h2>
 +
<div>
 +
  <a href="#" aria-labelledby="d2a"> click here </a>
 +
  <div style="display:none;" id="d2a" class="pseudo"> pool <span>location</span></div>
 +
</div>
 +
 +
<h2>Link referencing aria-labelledby with visibility hidden including children</h2>
 +
<div>
 +
  <a href="#" aria-labelledby="d3a"> click here </a>
 +
  <div style="visibility:hidden;" id="d3a" class="pseudo"> pool <span>location</span></div>
 +
</div>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:15, 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

Link referencing aria-labelledby with pseudo content

click here
pool

Link referencing aria-labelledby with display none including children

click here

Link referencing aria-labelledby with visibility hidden including children

click here