HTML img 标签:标题属性与 alt 属性?

发布于 2024-07-20 05:09:29 字数 501 浏览 11 评论 0原文

我正在浏览 Amazon,我注意到在搜索“1TB" 如果将鼠标光标悬停在星级图像上,您只会看到分数如果使用 IE。 如果您使用其他浏览器,则不会显示分数。

评分 3.8 和评分 4.2 均显示为 4 星。 当然,3.8 星与 4.2 星(76% 与 84% 分数)可能会有所不同!

这是因为仅当用户关闭图形或“读出”浏览器时(例如,针对视力障碍用户的浏览器)才显示替代文本的标准方式。 然而,IE 会在悬停时显示它。

所以我认为如果亚马逊要不管用户的浏览器如何显示它,那么除了alt之外还应该使用title。 你同意吗?

I was browsing Amazon and I noticed that when searching "1TB" if you hover the mouse cursor over the stars rating image, you only see the score if using IE. If you are using another browser then the score won't show.

A rating of 3.8 and a rating of 4.2 both show up as 4 stars. Of course a 3.8 stars vs 4.2 stars (76% vs 84% score) could make a difference!

This is because the standard way of displaying alt text is only when the user turns off graphics or when the browser is "read out" (e.g browser for users who are visually impaired). IE however, shows it on hover.

So I think if Amazon is to show it regardless of the user's browser, then title should be used in addition to alt. Would you agree?

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

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

发布评论

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

评论(12

む无字情书 2024-07-27 05:09:29

它们用于不同的事情。 alt 属性用于代替图像。 如果图像无法显示,请在屏幕阅读器中显示。

title 属性与图像一起显示,通常作为悬停工具提示。

不应使用其中之一“代替”另一个。 每个都应该被正确使用,以完成它们设计的任务。

They are used for different things. The alt attribute is used instead of the image. If the image can't be shown, and in screen readers.

The title attribute is shown along with the image, typically as a hover tooltip.

One should not be used "instead" of the other. Each should be used properly, to do the things they were designed to do.

荒岛晴空 2024-07-27 05:09:29

我两个都会去。 Title 将在所有浏览器中显示一个漂亮的工具提示,而 alt 将在没有图像的浏览器中浏览时提供描述。

也就是说,我很想知道有多少“冲浪者”去“商店”浏览商品时实际上已关闭图像或正在使用不支持图像的浏览器。 我认为 90% 的人口使用 28k 调制解调器连接到 InterWeb 的日子已经一去不复返了。

I'd go for both. Title will show a nice tooltip in all browsers and alt will give a description when browsing in a browser with no images.

That said, I'd love to see some stats of how many "surfers" out there going to a "store" to browse merchandise actually have images turned off or are using a browser that doesn't support images. I think the days where 90% of the population is using a 28k modem to connect to the InterWeb is looooong over.

染柒℉ 2024-07-27 05:09:29

正如已经提到的,alttitle用于不同的事情。 虽然 title 属性将提供工具提示,但 alt 也是一个重要的属性,因为它指定在图像无法显示时要显示的文本。 (在某些浏览器中,例如 Firefox,您还会在图像加载时看到此文本。)

我认为应该指出的另一点是 alt 属性是需要作为 XHTML 文档进行验证,而 title 属性只是一个“额外选项”。

alt and title are for different things, as already mentioned. While the title attribute will provide a tooltip, alt is also an important attribute, since it specifies text to be displayed if the image can't be displayed. (And in some browsers, such as firefox, you'll also see this text while the image loads)

Another point that I feel should be made is that the alt attribute is required to validate as an XHTML document, whereas the title attribute is just an "extra option," as it were.

南烟 2024-07-27 05:09:29

这是因为它们有不同的用途,并且它们都应该被使用,而不仅仅是一个替代另一个。

“alt”是针对你们已经说过的内容,因此如果图像无法显示(无论出于何种原因),您可以看到图像的全部内容,它还可以让视障人士了解图像的含义。

“title”属性是显示带有图像标题的工具提示的正确属性。

That's because they serve different purposes and they both should be used not just one over the other.

The "alt" is for what you guys already said, so you can see what's the image it's all about if the image can't be displayed (for whatever reason), it also allows visually impaired people to understand what's the image about.

The "title" attribute is the correct one to show the tooltip with a title for the image.

残疾 2024-07-27 05:09:29

在我看来,在图像未显示的情况下,替代文本应该始终描述图片中可见的内容。

alt = 文本 [CS]
对于无法显示图像、表单或小程序的用户代理,此属性指定替代文本。 替代文本的语言由 lang 属性指定。

w3.org

In my opinion should the alt text always describe what is visible in the picture, for the case that the image is not displayed.

alt = text [CS]
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

w3.org

缺⑴份安定 2024-07-27 05:09:29

我相信 alt 是严格遵守 XHTML 所必需的。

正如其他人所指出的,title 用于工具提示(最好有),alt 用于可访问性。 两者同时使用并没有什么问题,但是 alt 应该始终存在。

I believe alt is required for strict XHTML compliance.

As others have noted, title is for tooltips (nice to have), alt is for accessibility. Nothing wrong with using both of them, but alt should always be there.

明媚殇 2024-07-27 05:09:29

ALT 属性

alt属性在一组标签(即 imgarea 以及可选的 inputapplet)中定义,以允许您提供对象的等效文本。

在以下常见情况下,文本等效项可为您的网站及其访问者带来以下好处:

  • 如今,Web 浏览器可在各种​​具有不同功能的平台上使用; 有些根本无法显示图像或仅显示一组有限类型的图像; 有些可以配置为不加载图像。 如果您的代码在其图像中设置了 alt 属性,大多数浏览器将显示您提供的描述,而不是图像。
  • 某些访问者无法看到图像,无论他们是盲人、色盲、弱视; alt 属性对于那些可以依靠它来了解页面上的内容的人来说有很大帮助
  • 搜索引擎机器人属于上述两个类别:如果您希望您的网站得到应有的索引,请使用alt 属性,以确保他们不会错过页面的重要部分。

标题属性

此技术的目标是通过在 title 属性中提供帮助信息,为用户在表单中输入数据时提供上下文相关的帮助。 帮助可能包括格式信息或输入示例。

示例 1:限制搜索范围的下拉菜单
搜索表单使用下拉菜单来限制搜索范围。 下拉菜单紧邻用于输入搜索词的文本字段。 对于能够看到视觉设计的用户来说,搜索字段和下拉菜单之间的关系是清楚的,视觉设计没有空间放置可见标签。 title 属性用于标识select 菜单。 title 属性可以由屏幕阅读器读出,也可以作为工具提示显示给使用屏幕放大器的用户。

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

示例 2:电话号码的输入字段
网页包含用于输入美国电话号码的控件,其中包含三个字段:区号、交换号码和最后四位数字。

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

示例 3:搜索函数
网页包含一个文本字段,用户可以在其中输入搜索词,以及一个标有“搜索”的按钮用于执行搜索。 title 属性用于标识表单控件,按钮位于文本字段的右侧,以便用户清楚文本字段是应输入搜索词的位置。

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

示例4:表单控件的数据表
表单控件的数据表需要将每个控件与该单元格的列标题和行标题相关联。 如果没有标题(或屏幕外标签),非视觉用户在使用 Tab 键浏览表单时很难使用辅助技术暂停并询问相应的行/列标题值。

例如,调查表单的第一行有四个列标题:问题、同意、未决定、不同意。 接下来的每一行在每个单元格中包含一个问题和一个单选按钮,对应于三列中的答案选择。 每个单选按钮的标题属性都是答案选择(列标题)和问题文本(行标题)的串联,并以连字符或冒号作为分隔符。

Img 元素

允许MDN 中提到的属性。

  • alt
  • crossorigin
  • 解码
  • 高度
  • 重要性(实验API)
  • intrinsicsize (实验性 api)
  • ismap
  • referrerpolicy (实验性 api)
  • src
  • srcset
  • width
  • usemap

如您所见,img 元素内不允许使用 title 属性。 我将使用 alt 属性,如果需要,我将使用 CSS(示例:伪类 :hover)而不是 title 属性。

ALT Attribute

The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.

A text equivalent brings the following benefits to your web site and its visitors in the following common situations:

  • nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
  • some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
  • search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.

Title Attribute

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.

Example 1: A pulldown menu that limits the scope of a search
A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Example 2: Input fields for a phone number
A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Example 3: A Search Function
A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Example 4: A data table of form controls
A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.

For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.

Img Element

Allowed attributes mentioned at MDN.

  • alt
  • crossorigin
  • decoding
  • height
  • importance (experimental api)
  • intrinsicsize (experimental api)
  • ismap
  • referrerpolicy (experimental api)
  • src
  • srcset
  • width
  • usemap

As you can see title attribute is not allowed inside img element. I would use alt attribute and if requires I would use CSS (Example: pseudo class :hover) instead of title attribute.

仅一夜美梦 2024-07-27 05:09:29

您不应该对 img 元素使用 title 属性。 这背后的原因很简单:

大概标题信息是重要信息,默认情况下应该向所有用户提供。 如果是这样,请将此内容显示为图像旁边的文本。

来源: http://blog .paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 包含有关使用 title 属性的一般建议:

目前不鼓励依赖 title 属性,因为许多用户代理不按照本规范的要求以可访问的方式公开该属性(例如,需要诸如鼠标之类的指示设备来显示工具提示,这不包括键盘)仅用户和仅触摸用户,例如拥有现代手机或平板电脑的任何人)。

来源: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

当谈到辅助功能和不同的屏幕阅读器时:

  • Jaws 10-11:关闭默认情况下
  • Window-Eyes 7.02:默认情况下打开
  • NVDA:不支持(无支持选项)
  • VoiceOver:不支持(无支持选项)

因此,如 Denis Boudreau 充分说明了这一点:显然不是推荐的做法

You should not use title attribute for the img element. The reasoning behind this is quite simple:

Presumably caption information is important information that should be available to all users by default. If so present this content as text next to the image.

Source: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 includes general advice on use of the title attribute:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to apear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Source: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

When it comes to accessibility and different screen readers:

  • Jaws 10-11: turned off by default
  • Window-Eyes 7.02: turned on by default
  • NVDA: not supported (no support options)
  • VoiceOver: not supported (no support options)

Hence, as Denis Boudreau adequately put it: clearly not a recommended practice.

感受沵的脚步 2024-07-27 05:09:29

我总是会同时使用 alttitle 属性。 它们各自用于不同的目的:alt用于丢失图像、缓慢图像下载或辅助技术中的图像替换,而title用于翻转交互性和附加图像描述。

此外,在 HTML5 中,您应该开始使用新的 HTML5 picture 元素,该元素封装在 figure 中,并具有完整的 WPA-ARIA 属性,以提高可访问性作为辅助技术、屏幕阅读器等的支持。 因为许多旧版浏览器不支持此元素...但可以优雅地降级...我现在建议对 HTML 中的图像使用以下 HTML 设计模式:

<figure aria-labelledby="picturecaption2">
    <picture id="picture2">
        <source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
        <source srcset="image.gif" type="image/gif" />
        <img id="image2" style="height:auto;max-width: 100%;" src="image.jpg" width="255" height="200" alt="image:The World Wide Web" title="The World Wide Web" loading="lazy" no-referrer="no-referrer" onerror="this.onerror=null;" />
    </picture>
    <figcaption id="picturecaption2"><small>"My Cool Picture" [<a href="http://creativecommons.org/licenses/" target="_blank">A License</a>] , via <a href="https://commons.wikimedia.org/wiki/" target="_blank">Wikimedia Commons</a></small></figcaption>
</figure>

上面的代码除了 alt 之外还有许多额外的“好东西”和 title,包括 ARIA 属性、对 WebP 的支持、支持更高分辨率图像的媒体查询以及支持旧图像格式的良好后备模式。 它展示了一个完全装饰的图像示例,该示例使用新技术,同时仍然通过渐进式设计模式支持旧技术。

20 多年来,许多开发人员一直在使用这种模式来处理 IE 和其他问题。 所以这并不是什么新知识。 它刚刚被新开发人员重新发现,而他们并没有费心向过去学习。

请记住...始终支持旧浏览器!

I would ALWAYS go with both the alt and the title attributes. They are each used for different purposes: alt for image replacement on missing images, slow image downloads, or in assistive technology, while title is for rollover interactivity and additive image description.

In addition, in HTML5 you should start using the new HTML5 picture element wrapped in figure with full WPA-ARIA attributes for greater accessibility, as well as support of assistive technologies, screen readers, and the like. Because this element is not supported in many older browsers...BUT degrades gracefully...I recommend the following HTML design pattern now for images in HTML:

<figure aria-labelledby="picturecaption2">
    <picture id="picture2">
        <source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
        <source srcset="image.gif" type="image/gif" />
        <img id="image2" style="height:auto;max-width: 100%;" src="image.jpg" width="255" height="200" alt="image:The World Wide Web" title="The World Wide Web" loading="lazy" no-referrer="no-referrer" onerror="this.onerror=null;" />
    </picture>
    <figcaption id="picturecaption2"><small>"My Cool Picture" [<a href="http://creativecommons.org/licenses/" target="_blank">A License</a>] , via <a href="https://commons.wikimedia.org/wiki/" target="_blank">Wikimedia Commons</a></small></figcaption>
</figure>

The code above has many extra "goodies" beside alt and title, including ARIA attributes, support for WebP, a media query supporting higher resolution imagery, and a nice fallback pattern supporting older image formats. It shows a fully decorated image example that uses new technologies while still supporting old ones with progressive design patterns.

Many developers have been using this pattern now for over 20 years to deal with IE and other issues. So this is not new knowledge. Its just been rediscovered by new developers that didn't bother to learn from the past.

REMEMBER...ALWAYS SUPPORT THE OLD BROWSERS!

坐在坟头思考人生 2024-07-27 05:09:29

alt 属性适用于使用屏幕阅读器的视障用户。 如果任何图像标记中缺少 alt,则将读取图像的整个 url。 如果图像是网站设计的一部分,它们仍然应该有 alt 但它们可以留空,这样就不必为网站的每个部分读取 URL。

alt attribute is for visually impaired users that would use a screen reader. If alt is missing from ANY image tag, the entire url for the image will be read. If the images are for part of the design of the site, they should still have the alt but they can be left empty so the url does not have to be read for every part of the site.

泛滥成性 2024-07-27 05:09:29

不,alt 更好,因为它的目的是在无法查看图像的情况下提供“替代”文本(无论是图像丢失还是浏览器本身无法显示)它)。

No, alt is better because its purpose is to provide an "alternate" text in the event that the image cannot be view (whether it be that the image is missing or that the browser itself is incapable of displaying it).

独木成林 2024-07-27 05:09:29

ASP.NET MVC 的 MVCFutures 决定两者兼而有之。 事实上,如果您提供“alt”,它会自动为您创建一个具有相同值的“title”。

我手头没有源代码,但快速谷歌搜索找到了它的测试用例!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

The MVCFutures for ASP.NET MVC decided to do both. In fact if you provide 'alt' it will automatically create a 'title' with the same value for you.

I don't have the source code to hand but a quick google search turned up a test case for it!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文