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

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "<html> <a aria-labelledby="p1" href="http://www.google.com"> Google </a> <p id="p1" aria-hidden="true"> Adobe </p> </html>")
 
 
(11 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
 +
  <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".