Accessibility Examples
Test Start
Link
This link contains image alt text and additional text content that is unique.
Valid Image-Based Link
This link contains text content, and the image alt attribute is set to empty.
Test End
Rule References
| Rule | Pass IDs | Fail IDs |
|---|---|---|
| Rule 43 |
|
none |
Calculations
No calculations for test 106
Test Description
- This test contains three image-base links.
* The image alt attribute of the first link is set to empty.
* The image alt attribute of the second link does not duplicate the additional text.
* The text for the third link comes solely from the image alt text.
Test Markup
- HTML4: a[href]
- HTML4: img[alt]
User Agent Implementation
No user agent implementation information.
HTML Source Code
<div class="wrapper">
<p>
<a href="#"><img id="id1" src="http://www.oaa-acessibility.org/media/testsuite/images/link_image.png" alt="Valid Image-Based" /> Link</a>
This link contains image alt text and additional text content that is unique.
</p>
<p>
<a href="#"><img id="id2" src="http://www.oaa-acessibility.org/media/testsuite/images/link_image.png" alt="" /> Valid Image-Based Link</a>
This link contains text content, and the image alt attribute is set to empty.
</p>
<p>
<a href="#"><img id="id3" src="http://www.oaa-acessibility.org/media/testsuite/images/link_image.png" alt="Valid Image-Based Link" /></a>
This link contains image alt text and no additional text.
</p>
</div>
CSS Code
div.wrapper {
margin: 20px;
padding: 10px;
overflow: visible;
background-color: #faf7f0;
border: 1px solid #880000;
-webkit-border-radius: 10px; /* Safari and Chrome rounded corners */
-moz-border-radius: 10px; /* Firefox rounded corners */
border-radius: 10px; /* Opera rounded corners */
}