网站无法识别img alt标签

Question

当validating一个网站时，我收到以下错误附加到一些图像：

img元素必须具有alt属性，但在某些情况下除外。有关详细信息，请参阅有关为图像提供文本替代选项的指导。

尽管我在代码中包含了alt标记，但它还是出现了：

<nav>
        <ul>
            <li><a href="index.php?page_id=7"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="about%20Z" /></a>
                <ul class="about">
                    <li><a href="index.php?page_id=35">ZR</a> |</li>
                    <li><a href="index.php?page_id=38"> RA</a> |</li>
                    <li><a href="index.php?page_id=40"> WM + SB</a> |</li>
                    <li><a href="index.php?page_id=42"> ZV</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=16"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="ZB" /></a></li>
            <li><a href="index.php?page_id=13"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/share.png" alt="swZ" /></a></li>
            <li><a href="index.php?page_id=9"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="cZ" /></a></li>
            <li><a href="http://www.thezopateam.com/"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/properties.png" alt="ZP" /></a>
                <ul class="properties">
                    <li><a href="http://www.thezopateam.com/">Buying</a> |</li>
                    <li><a href="index.php?page_id=46"> Selling</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=11"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/gallery.png" alt="Zg" /></a></li>
        </ul>
    </nav>

有什么可能导致这种情况/如何补救的想法吗？谢谢。

Answer 1

在您的代码中，在<a>中的第一个<img>中似乎缺少alt属性

<li>
   <a href="index.php?page_id=7">
      <img src="<?php bloginfo('url'); ?>"> <!-- Missing Alt Attribute -->
      <img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="about%20Z" />
   </a>
...

大约有6个没有alt属性的<img>标记

Answer 2

如果您选中“选项”下的“显示源代码”，然后单击“重新验证”，您将能够确切地看到这些问题所在的位置。

Answer 3

每个<img>标记都必须有一个alt属性。验证器应该准确地告诉您哪些图像(哪些行)缺少alt属性。Alt属性为那些无法查看/解析图像的人提供图像上下文(想想Google)。

很难说(因为您提供的是PHP，而不是HTML)，但是看起来每个<img src="<?php bloginfo('url'); ?>">都缺少alt属性。