【问题标题】:What is the proper way to label a link with a background image?用背景图像标记链接的正确方法是什么?
【发布时间】:2011-04-16 12:03:38
【问题描述】:

如果我在锚标记中使用背景图像作为菜单,为屏幕阅读器和 SEO 提供等效文本标签的最佳方式是什么?

假设 HTML 是这样的:

<h2><a class='menuItem1'></a></h2>

CSS 是这样的

.menuItem1 {
    display:block;
    width:100px;
    height:25px;
    background-image:url(../Images.menuitem1.png);
}

我是否应该在A 标签上的alt="..." 上也使用title="..."?我使用 Lynx 浏览器的测试似乎只在 A 标记中也有文本时才显示标签。

【问题讨论】:

  • a 标签没有 alt 属性。此属性适用于 img 标签。

标签: html


【解决方案1】:

alt 仅存在于 &lt;img&gt; 标记上。如果您的图片实际上是网页的一个有意义的部分,而不仅仅是风格,那么您可以使用带有 alt 属性的实际 &lt;img&gt; 标签。

或者,您可以将实际文本放在 &lt;a&gt; 标记内,并使用 CSS 将其隐藏。由于display: none 也会对屏幕阅读器隐藏它,因此您需要使用text-indent:-9999px; 之类的东西来隐藏它

【讨论】:

    【解决方案2】:

    alt 属性在 a 标记上不存在。因此,您应该使用title。或者,您可以使用img 标记创建一个实际图像并为此设置alt 属性。

    【讨论】:

      【解决方案3】:

      试试这个:

      <h2><a class='menuItem1'>Text to be only seen by screen readers</a></h2>
      
      .menuItem1 {
        text-indent:-9999px;
      }
      

      【讨论】:

        猜你喜欢
        • 2014-08-30
        • 1970-01-01
        • 2012-06-25
        • 2019-03-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-08-07
        相关资源
        最近更新 更多