What does this accessibility issue mean?
Accessibility issue summary: image alt text is repeated in adjacent content
Image alt text should be unique to that image and meaningfully describe the content and purpose of the image. To adhere to accessibility best practices, avoid simply copying and pasting other text from the page into your “alt” attribute and instead, write custom text to describe each image.
Solution:
Ensure image alt text content is not repeated as text elsewhere on the page.
Example HTML violation: Image alt text repeated in adjacent text (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Page with Img alt text repeated in adjacent text</title>
<a href="https://www.example.com">
<img src="example-image.jpg" alt="Example Home"> Example Home </a>
</body>
</html>The above HTML violates the 'image-redundant-alt' accessibility rule because it includes the same text in both the 'alt' attribute value for an image and its adjacent text. This repetition of text in both places is considered redundant and unnecessary.
How to fix "Image alt text repeated in adjacent text (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Page with Corrected Alt Text</title>
<a href="https://www.example.com">
<img src="example-image.jpg" alt="Navigate to Example Home"> Example Home </a>
</body>
</html>This code corrects the issues as:
- The alt text on the image now describes the action (Navigating to the Example Home page), which is different from the adjacent text ("Example Home").
- This ensures that when read by a screen reader, the content will not be announced redundantly, thus, providing a better experience to the user.
Remember to always ensure the 'alt' attribute value is descriptive and provides a meaningful context to the image.
