Search code examples
wavewcag

WAVE reports "missing alt text" with alternative text presented

Why does wave reports X amount of images missing alternative text with the alternative text presented? For example:

enter image description here

Solution

  • I don't think you are pointing to the right piece of code. I ran the WAVE tool on https://facadoro.com/, which appears to be the website you're checking.

    I do get some unlabeled images but notice some of the icons have full color (the first 3) but the rest are faded out.

    enter image description here

    If you hover the mouse over a faded one, you get a tooltip that the faded icons are for elements that are hidden (possibly because of CSS display:none).

    enter image description here

    In your screenshot, some of the icons are full color and some are faded. If I look at the full color ones, while the images do have alt text, it's the null string (alt=""). That tells the screen reader that the image is decorative and to ignore it.

    <a href="https://facadoro.com/syllogi-arret-empneysmeni-apo-ti-dynami-ton-gynaikon/">
  <img src=".../05-arret-1024x576.jpg" class="attachment-large size-large wp-post-image" alt=""> 
  <span class="pf-icon pf-icon-link"></span>
  <div class="item--overlay"></div>
</a>

    However, this image is inside of a link and the link does not have any text so WAVE is telling you that the link doesn't have any text and the image doesn't have any alt text so the screen reader won't know what to announce. Notice the WAVE error says "Linked image missing alternative text". "Linked image" means the image is inside of a link.

    This happens with 3 of the 4 images near the bottom:

    enter image description here

    If I look at one the faded icons, it points to the pictures further down the page.

    enter image description here

    Which has the following code.

    <div class="instagram-item">
  <a href="https://www.instagram.com/p/CodBQD3oaZ5/" title="Show him...">
    <span class="item--overlay">
      <i class="fa-instagram"></i>
    </span>
    <img src="...9138795735649093906_n.jpg" alt="Show him...">
  </a>
</div>

    <style>
.instagram-item > a img {
  display: none;
}
</style>

    As you can see, there is a valid alt text on the <img> but since the image is hidden (because of display:none), the alt text will be ignored. Unlike the case above, where the alt text was blank and the link didn't have any other text, this link does have text that a screen reader can announced because of the title attribute ("show him...").

    I think it's questionable that these faded icons should even be flagged at all.

    But in summary, I'm not sure if the code you are pointing to in your screenshot is the code that's in error. If it indeed is that code, you may have to look at the CSS for the image to see if the image is hidden.