Difference between revisions of "Accessible name calc"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
<html>
 
<html>
 +
  <style>
 +
    .pseudo::before {
 +
      content: "swimming ";
 +
    }
 +
  </style>
 +
<body>
 +
<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">  
 
<p>having an accessible name of “here”.</p>
 
<p>having an accessible name of “here”.</p>
  
 +
<h2>Image with space for aria-label and alt</h2>
 
<img src="test.gif" aria-label=" " alt="hello">  
 
<img src="test.gif" aria-label=" " alt="hello">  
 
<p>having an accessible name of “ ”.</p>
 
<p>having an accessible name of “ ”.</p>
  
 +
<h2>Image with null for aria-label and alt</h2>
 
<img src="test.gif" aria-label="" alt="hello">
 
<img src="test.gif" aria-label="" alt="hello">
 
<p> having an accessible name of “hello”.</p>
 
<p> having an accessible name of “hello”.</p>
 +
 +
<h2>Image with aria-labelledby with multiple id refs/h2>
 +
<div>
 +
  <img src=”test.gif” aria-labelledby=”a1 a2” >
 +
  <span id=”a1”> Hello </span>
 +
  <span id=”a2”> Here </span>
 +
</div>
 +
 +
<h2>Link with pseudo content</h2>
 +
<div>
 +
  <a class="pseudo" href="#"> click here </a>
 +
</div>
 +
<body>
 
</html>
 
</html>

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