如何使用 alt 属性并确保 IE 不将它们用作工具提示?

发布于 11-26 14:48 字数 191 浏览 3 评论 0原文

我们的网站有一个图形主菜单(即文本在图像编辑器中完成,然后显示为图像),但每当我将鼠标悬停在菜单项上时,它都会显示一个工具提示。 (例如,当我将鼠标悬停在“联系我们”上时,会弹出另一个“联系我们”作为工具提示)

我的网页设计师说这是让搜索引擎索引菜单文本所必需的,但这严重使演示文稿变得丑陋 - 有没有办法避免工具提示但仍让搜索引擎索引 alt 属性?

Our website has a graphical main menu (i.e. text is done in image editor then displayed as an image), but whenever I hover over the menu item, it will display a tooltip. (e.g. when I hover over "Contact Us", another "Contact Us" pops up as tooltip)

My web designer said this is necessary to let search engine index the menu text, but it seriously makes the presentation ugly -- is there no way to avoid the tooltip yet still let the search engine index the alt attributes?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

七秒鱼°2024-12-03 14:48:40

alt 属性是img 中需要标签。它的作用是向那些无法看到图像的人提供信息。这可能包括视力受损的人(可能使用屏幕阅读器)、使用非图形浏览器的人或禁用图像的人。如果图像纯粹用于格式化,则 alt 属性应设置为空字符串 (alt="")。

alt 属性应该呈现为工具提示。据我所知,Windows 版 Internet Explorer 是唯一执行此操作的浏览器。

标题属性“提供有关为其设置的元素的咨询信息”。它不是必需的,并且仅应在它提供了其设置的元素中尚未存在的附加有用信息的情况下使用。 title 属性通常在图形用户代理(浏览器)中呈现为工具提示。

有关详细信息,请参阅alt 和标题属性

您的图形菜单可以采用多种方式之一进行设计,因此很难说可以更改哪些内容(如果有的话)。您需要考虑的是:

  • 对于那些与您的浏览方式不同的人来说,您的导航菜单的可访问性。是否可以在 Lynx 等纯文本浏览器中浏览您的网站?如果关闭图像会发生什么?如果关闭样式表会发生什么?关闭图像现在可能相当罕见,而且处理起来很棘手 - 这是一种判断。

  • 是否是 alttitle 属性导致工具提示被渲染?如果是前者,那么那些有幸使用正确浏览器的人将看不到工具提示。

  • 这真的是一个问题吗?考虑到删除它可能导致的可访问性问题,这真的很重要吗?

  • 搜索引擎旨在查找对人们有用的内容。如果您的网站在纯文本浏览器中查看时没有意义,那么它对于搜索引擎可能也没有意义。为人们设计网站,而不是为搜索引擎设计。

The alt attribute is required in the img tag. It is there to provide information to those who are unable to see the image. This may include the visually impaired (perhaps using a screen reader), those using a non-graphical browser, or those with images disabled. In cases where the image is purely for formatting, the alt attribute should be set to an empty string (alt="").

The alt attribute is not supposed to be rendered as a tooltip. As far as I know, Internet Explorer for Windows is the only browser that does this.

The title attribute "offers advisory information about the element for which it is set". It is not required, and should only be used in situations where it provides additional useful information not already present in the element for which it is set. The title attribute is commonly rendered as a tooltip in graphical user agents (browsers).

See The alt and title attributes for more information.

Your graphical menu could be designed in one of many ways, so it's hard to say what, if anything, could be changed. What you need to consider is:

  • The accessibility of your navigation menu to those who do not see the site in the same way as you do. Is it possible to navigate your site in a text only browser such as Lynx? What happens if you turn images off? What happens if you turn stylesheets off? Turning images off is probably quite rare now, and is a tricky one to handle - it's a judgement call.

  • Is it an alt or title attribute that is causing the tooltip to be rendered? If it's the former, then those fortunate enough to be using a proper browser won't see the tooltip.

  • Is it really a problem in the first place? Considering the possible accessibility issues that could result from removing it, does it really matter?

  • Search engines are designed to find content that is useful to people. If your site doesn't make sense when viewed in a text-only browser, it probably won't make sense to a search engine. Design your site for people, not search engines.

£冰雨忧蓝°2024-12-03 14:48:40

来自 alt 属性的工具提示消息仅在 IE 中显示,不显示它的唯一方法就是不设置它(坏主意)。

所有其他浏览器都按应有的方式显示带有 title 属性的工具提示。

The tooltip message coming from the alt attribute only shows in IE and the only way not to show it is not setting it (bad idea).

All other browsers show the tooltip with the title attribute, as it shoud be.

我不会写诗2024-12-03 14:48:40

是的,有。您可以使用基于图像的菜单,并仍然在其中放置文本,只是将其隐藏。有不同的技术,此链接显示了其中的几种:

http://css- tricks.com/630-css-image-replacement/

它不仅有助于搜索引擎索引网站,而且对屏幕阅读器更友好(例如盲人访问您的网站)。

Yes there is. You can use image based menus and still put text in them just hiding it. There are different techniques for this, this link shows several of them:

http://css-tricks.com/630-css-image-replacement/

And not only it will help search engines index the website but is friendlier to screenreaders (e.g Blind people visiting your website).

挽心2024-12-03 14:48:40

如果您的菜单文本是标准的,即

  • 关于我们、
  • 联系
  • 产品
  • 等,

那么请忘记 alt/title 标签。您不会从索引这些内容的搜索引擎中获得任何实际价值。

当然,应添加 images 上的 alt 标签以实现可访问性。

如果这是一个真正的问题,您可以做的一件事是将 images 作为 background-images 放在 div/divs 中。然后将 titlename 属性添加到 div 中。

If your menu text is standard, i.e.,

  • about us
  • contact
  • products
  • etc

Then forget the alt/title tags. You will get no real value from search engines indexing these.

Of course, alt tags on images should be added for accessibility.

If this is a real issue, one thing you could do is place the images as background-images in a div/divs. Then add title or name attributes to the divs.

新一帅帅2024-12-03 14:48:40

alt 属性是可访问性和 SEO 目的所必需的文本。 IE 和往常一样,是错误的,它也使用该文本作为工具提示。如果您不需要工具提示,请将适当的属性 title 设置为空白 ala title=""

但是,正如其他人所说,更好的解决方案是不使用图像根本。如今,您可以使用 CSS 轻松设置文本样式。它不需要 alt 属性,不会生成工具提示,允许用户更轻松地调整其大小,更容易编辑,并且为最终用户加载速度更快。

the alt attribute is text that is definitely required for accessibility and SEO purposes. IE, as usual, is wrong and uses that text for a tooltip as well. If you don't want tooltips, set the proper attribute, title to be blank ala title=""

However, as others have stated, the better solution is to not use images at all. You can style text quite easily these days with CSS. It won't require alt attributes, won't produce tooltips, allows for the user to more easily resize it, is easier to edit, and will load faster for the end-user.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文