如何使用 alt 属性并确保 IE 不将它们用作工具提示?
我们的网站有一个图形主菜单(即文本在图像编辑器中完成,然后显示为图像),但每当我将鼠标悬停在菜单项上时,它都会显示一个工具提示。 (例如,当我将鼠标悬停在“联系我们”上时,会弹出另一个“联系我们”作为工具提示)
我的网页设计师说这是让搜索引擎索引菜单文本所必需的,但这严重使演示文稿变得丑陋 - 有没有办法避免工具提示但仍让搜索引擎索引 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 技术交流群。
发布评论
评论(5)
是的,有。您可以使用基于图像的菜单,并仍然在其中放置文本,只是将其隐藏。有不同的技术,此链接显示了其中的几种:
http://css- tricks.com/630-css-image-replacement/
它不仅有助于搜索引擎索引网站,而且对屏幕阅读器更友好(例如盲人访问您的网站)。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
alt
属性是img
中需要标签。它的作用是向那些无法看到图像的人提供信息。这可能包括视力受损的人(可能使用屏幕阅读器)、使用非图形浏览器的人或禁用图像的人。如果图像纯粹用于格式化,则alt
属性应设置为空字符串 (alt=""
)。alt
属性不应该呈现为工具提示。据我所知,Windows 版 Internet Explorer 是唯一执行此操作的浏览器。标题
属性“提供有关为其设置的元素的咨询信息”。它不是必需的,并且仅应在它提供了其设置的元素中尚未存在的附加有用信息的情况下使用。title
属性通常在图形用户代理(浏览器)中呈现为工具提示。有关详细信息,请参阅alt 和标题属性。
您的图形菜单可以采用多种方式之一进行设计,因此很难说可以更改哪些内容(如果有的话)。您需要考虑的是:
对于那些与您的浏览方式不同的人来说,您的导航菜单的可访问性。是否可以在 Lynx 等纯文本浏览器中浏览您的网站?如果关闭图像会发生什么?如果关闭样式表会发生什么?关闭图像现在可能相当罕见,而且处理起来很棘手 - 这是一种判断。
是否是
alt
或title
属性导致工具提示被渲染?如果是前者,那么那些有幸使用正确浏览器的人将看不到工具提示。这真的是一个问题吗?考虑到删除它可能导致的可访问性问题,这真的很重要吗?
搜索引擎旨在查找对人们有用的内容。如果您的网站在纯文本浏览器中查看时没有意义,那么它对于搜索引擎可能也没有意义。为人们设计网站,而不是为搜索引擎设计。
The
alt
attribute is required in theimg
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, thealt
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. Thetitle
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
ortitle
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.