Difference between revisions of "Aria-labelledby aria-hidden"

From Level Access Web Labs
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
   <a aria-labelledby="p1" href="http://www.google.com"> Google </a>
+
<style>
  <p id="p1" aria-hidden="true"> Adobe </p>
+
  div.box {
 +
    border:thin solid black;
 +
    margin: .5em;
 +
  }
 +
</style>
 +
<body>
 +
<div aria-hidden="false">
 +
   <div class="box">
 +
    <p>aria-labelledby reference element with aria-hidden true</p>
 +
    <a aria-labelledby="p1" href="http://www.google.com"> Google </a>
 +
    <p id="p1" aria-hidden="true"> Adobe </p>
 +
    <p>Accessible name for above should be "Adobe".</p>
 +
  </div>
  
 +
  <div class="box">
 +
  <p>aria-labelledby reference element with text and span with aria-hidden true</p>
 +
  <a aria-labelledby="p2" href="http://www.google.com"> Google </a>
 +
  <p id="p2"> Adobe <span aria-hidden="true"> systems </span> </p>
 +
  <p>Accessible name for above should be "Adobe".</p>
 +
</div>
 +
 +
  <div class="box">
 +
  <p>Link with text and span with aria-hidden true. aria-labelledby not used.</p>
 
   <a href="http://www.google.com"> Google
 
   <a href="http://www.google.com"> Google
 
   <span aria-hidden="true"> Adobe </span></a>
 
   <span aria-hidden="true"> Adobe </span></a>
 
+
  <p>Accessible name for above should be "Google".</p>
 +
</div>
 +
<div aria-hidden="true">
 +
<p> This is some text inside</p>
 +
</div>
 +
</div>
 +
</body>
 
</html>
 
</html>

Latest revision as of 19:38, 9 March 2019

aria-labelledby reference element with aria-hidden true

Google

Accessible name for above should be "Adobe".

aria-labelledby reference element with text and span with aria-hidden true

Google

Adobe

Accessible name for above should be "Adobe".

Link with text and span with aria-hidden true. aria-labelledby not used.

Google

Accessible name for above should be "Google".