entityMap|blocks|key|d0c0v|text|我两个都要。Title将在所有浏览器中显示一个漂亮的工具提示，当在没有图像的浏览器中浏览时，alt将给出一个描述。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|91h2d|也就是说，我很想看到有多少“冲浪者”去“商店”浏览商品时，图片实际上被关闭了，或者正在使用不支持图片的浏览器。我认为90%25的人使用28k调制解调器连接InterWeb的日子已经过去了。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

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.

entityMap|blocks|key|66gia|text|它们有不同的用途。The+The+The|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bag1u|属性被使用|f6tlu|取而代之的是|3a2eh|图像的。如果图像无法显示，则在屏幕阅读器中。|8cjst|The+The+The|122gd|属性显示|9lel8|沿着|cojia|使用图像，通常作为悬停工具提示。|e7j2s|其中一个不应该用来“代替”另一个。每个都应该使用|48qs0|适当地|8kkf3|，去做他们被设计去做的事情。^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|W|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|X|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Y|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Z|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|10|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|11|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|12|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|13|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|14|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|15|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|16|9|@]|A|@]|B|$]]]]

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

The <code>title</code> 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.

entityMap|blocks|key|do2ct|text|另类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eojce|和|5e6qf|标题|ecpi4|用于不同的事情，如前所述。虽然|1k80a|6nelg|属性将提供工具提示，|1af38|16avk|也是一个重要的属性，因为它指定在图像无法显示时要显示的文本。(在某些浏览器中，例如firefox，您还会看到以下文本|fcvov|而|58p5g|图像加载)|7q7d6|我认为应该指出的另一点是，|ps56|dt7tl|属性为|effml|必填项|e9aud|验证为XHTML文档，而|d4eo7|2bhq5|属性只是一个“额外的选项”。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|14|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|15|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|16|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|17|9|@]|A|@]|B|$]]|$2|I|4|F|6|7|8|18|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|19|9|@]|A|@]|B|$]]|$2|L|4|5|6|7|8|1A|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1B|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1C|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1D|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1E|9|@]|A|@]|B|$]]|$2|U|4|5|6|7|8|1F|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1G|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1H|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1I|9|@]|A|@]|B|$]]|$2|11|4|F|6|7|8|1J|9|@]|A|@]|B|$]]|$2|12|4|13|6|7|8|1K|9|@]|A|@]|B|$]]]]

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.

entityMap|blocks|key|dtsi8|text|这是因为它们服务于不同的目的，它们都应该使用，而不是只使用一个而不是另一个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c1tll|"alt“是为了你们已经说过的，所以如果图像不能显示(不管是什么原因)，你可以看到它是关于什么的，它也允许视障人士理解图像是关于什么的。|2er60|"+title“属性是用来显示带有图像标题的工具提示的正确属性。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

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.

entityMap|blocks|key|22a19|text|在我看来，对于图像不显示的情况，alt文本应该总是描述图片中可见的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|biu7d|alt+=文本|1ebmi|CS|d13cc|对于不能显示图像、表单或小程序的用户代理，此属性指定替代文本。替换文本的语言由lang属性指定。|2nqn9|7ft68|w3.org^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|O|9|@]|A|@]|B|$]]|$2|I|4|-4|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]]]

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

<blockquote>
 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.
</blockquote>

<a href="http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8" rel="noreferrer">w3.org</a>

entityMap|blocks|key|asagp|text|我认为为了严格遵守XHTML，alt是必需的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|108dc|正如其他人所指出的，title用于工具提示(很好)，alt用于辅助功能。两者都使用没有错，但alt应该一直在那里。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

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, but alt should always be there.

entityMap|blocks|key|7etsf|text|ALT属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2ji08|The+The+The|16lh2|属性在一组标签中定义(即，|ar8ga|dq8rc|以及可选的用于|fra8c|和|196fr|)以允许您为对象提供等效的文本。|ftgpt|在以下常见情况下，文本等效项将为您的网站及其访问者带来以下好处：|d6c1o|如今，Web浏览器在各种不同的平台上都可用，它们的功能各不相同；有些浏览器根本不能显示图像，或者只显示一组有限类型的图像；有些浏览器可以配置为不加载图像。如果您的代码在其图像中设置了alt属性，则大多数浏览器将显示您给出的描述，而不是图像|en08h|您的一些访问者看不到图像，无论他们是盲人、色盲还是弱视；alt属性对那些可以依赖它来很好地了解页面内容的人很有帮助|ah7jd|搜索引擎机器人属于上述两个类别:如果你想让你的网站被索引到它应得的位置，使用alt属性来确保它们不会错过你页面的重要部分。|e52fo|标题属性|89u8t|此技术的目标是通过在表单中提供帮助信息，为用户在表单中输入数据时提供上下文相关的帮助。|eole4|属性。帮助可以包括格式信息或输入示例。|72emj|示例1:限制搜索范围的下拉菜单|3fgv|搜索表单使用下拉菜单来限制搜索范围。下拉菜单紧邻用于输入搜索词的文本字段。对于可以看到视觉设计的用户来说，搜索域和下拉菜单之间的关系是很清楚的，因为视觉设计没有可见标签的空间。The+The+The|e10o3|属性用于标识|64pae|菜单。The+The+The|89iq7|属性可以由屏幕阅读器朗读，也可以作为工具提示显示给使用屏幕放大器的用户。|1lf8u|Search+for:


++++...|code-block|syntax|javascript|6lcgi|示例2:电话号码的输入字段|bblqu|Web页包含用于输入美国电话号码的控件，其中有三个字段，分别用于区号、交换和最后四位数字。|1al75|Phone+number|ep8kg|示例3:搜索功能|ah06h|一个Web页面包含一个文本字段，用户可以在其中输入搜索词和一个标记为"+search“的按钮来执行搜索。The+The+The|5pojt|属性用于标识表单控件，并且按钮位于文本字段之后，这样用户就可以清楚地看到文本字段是应该输入搜索词的位置。|a2g45|示例4:表单控件的数据表|a2ov2|表单控件的数据表需要将每个控件与该单元格的列标题和行标题相关联。如果没有标题(或屏幕外标签)，非视觉用户在通过Tab键浏览表单时，很难使用他们的辅助技术暂停和询问相应的行/列标题值。|3jgan|例如，调查表单的第一行有四个列标题:问题、同意、未决定和不同意。接下来的每一行都包含一个问题和一个单选按钮，每个单元格对应于三列中的答案选项。每个单选按钮的title属性都是答案选项(列标题)和问题文本(行标题)的串联，并使用连字符或冒号作为分隔符。|66qns|Img元素|3q9ln|中提到的允许的属性|fs2jn|MDN|33enf|..。|s0sg|(实验性api)|dgkc0|dne5v|5q3no|如你所见|337gk|属性不允许在内部|edbh2|元素。我会用|b84dr|属性，如果需要，我将使用CSS+(示例:伪类|3cq9h|)，而不是|8i6gq|属性。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|2M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|2N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|2O|9|@]|A|@]|B|$]]|$2|G|4|-4|6|7|8|2P|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|2Q|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|2R|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|2S|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|2T|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|2U|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|2V|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|2W|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|2X|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|2Y|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|2Z|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|30|9|@]|A|@]|B|$]]|$2|13|4|14|6|7|8|31|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|32|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|33|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|34|9|@]|A|@]|B|$]]|$2|1B|4|1C|6|1D|8|35|9|@]|A|@]|B|$1E|1F]]|$2|1G|4|1H|6|7|8|36|9|@]|A|@]|B|$]]|$2|1I|4|1J|6|7|8|37|9|@]|A|@]|B|$]]|$2|1K|4|1L|6|1D|8|38|9|@]|A|@]|B|$1E|1F]]|$2|1M|4|1N|6|7|8|39|9|@]|A|@]|B|$]]|$2|1O|4|1P|6|7|8|3A|9|@]|A|@]|B|$]]|$2|1Q|4|1R|6|7|8|3B|9|@]|A|@]|B|$]]|$2|1S|4|1T|6|7|8|3C|9|@]|A|@]|B|$]]|$2|1U|4|1V|6|7|8|3D|9|@]|A|@]|B|$]]|$2|1W|4|1X|6|7|8|3E|9|@]|A|@]|B|$]]|$2|1Y|4|1Z|6|7|8|3F|9|@]|A|@]|B|$]]|$2|20|4|21|6|7|8|3G|9|@]|A|@]|B|$]]|$2|22|4|23|6|7|8|3H|9|@]|A|@]|B|$]]|$2|24|4|25|6|7|8|3I|9|@]|A|@]|B|$]]|$2|26|4|27|6|7|8|3J|9|@]|A|@]|B|$]]|$2|28|4|27|6|7|8|3K|9|@]|A|@]|B|$]]|$2|29|4|27|6|7|8|3L|9|@]|A|@]|B|$]]|$2|2A|4|2B|6|7|8|3M|9|@]|A|@]|B|$]]|$2|2C|4|2D|6|7|8|3N|9|@]|A|@]|B|$]]|$2|2E|4|2F|6|7|8|3O|9|@]|A|@]|B|$]]|$2|2G|4|2H|6|7|8|3P|9|@]|A|@]|B|$]]|$2|2I|4|2J|6|7|8|3Q|9|@]|A|@]|B|$]]|$2|2K|4|2L|6|7|8|3R|9|@]|A|@]|B|$]]]]

<a href="https://www.w3.org/QA/Tips/altAttribute" rel="nofollow noreferrer">ALT Attribute</a>

The <code>alt</code> attribute is defined in a set of tags (namely, <code>img</code>, <code>area</code> and optionally for <code>input</code> and <code>applet</code>) 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:

<ul>
<li>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</li>
<li>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</li>
<li>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.</li>
</ul>

<a href="https://www.w3.org/TR/WCAG20-TECHS/H65.html" rel="nofollow noreferrer">Title Attribute</a>

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 <code>title</code> 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 <code>title</code> attribute is used to identify the <code>select</code> menu. The <code>title</code> attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

<pre><code>&lt;label for="searchTerm"&gt;Search for:&lt;/label&gt;
&lt;input id="searchTerm" type="text" size="30" value="" name="searchTerm"&gt;
&lt;select title="Search in" id="scope"&gt;
 ...
&lt;/select&gt; 
</code></pre>

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.

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

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 <code>title</code> 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.

<pre><code>&lt;input type="text" title="Type search term here"/&gt; &lt;input type="submit" value="Search"/&gt;
</code></pre>

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.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" rel="nofollow noreferrer">Img Element</a>

Allowed attributes mentioned at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" rel="nofollow noreferrer">MDN</a>. 

<ul>
<li><code>alt</code></li>
<li><code>crossorigin</code></li>
<li><code>decoding</code></li>
<li><code>height</code></li>
<li><code>importance</code> (experimental api)</li>
<li><code>intrinsicsize</code> (experimental api)</li>
<li><code>ismap</code></li>
<li><code>referrerpolicy</code> (experimental api)</li>
<li><code>src</code></li>
<li><code>srcset</code></li>
<li><code>width</code></li>
<li><code>usemap</code></li>
</ul>

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

entityMap|blocks|key|ea710|text|您不应该对img元素使用title属性。这背后的原因很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|as0ef|据推测，标题信息是默认情况下应对所有用户可用的重要信息。如果是这样，则将此内容显示为图像旁边的文本。|1pi7s|2viob|来源：|366hs|7pkpq|http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/|9fepb|HTML+5.1|263oj|包括有关使用title属性的一般建议：|ffqfc|当前不鼓励依赖标题属性，因为许多用户代理不以本规范所要求的可访问的方式展示该属性(例如，需要诸如鼠标的指点设备来使工具提示出现，这排除了仅使用键盘的用户和仅使用触摸的用户，例如具有现代电话或平板的任何人)。|ch5gl|9e9jk|fsa4i|blojr|http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute|b6f9v|当涉及到可访问性和不同的屏幕阅读器时：|cngf3|Jaws+10-11:默认情况下关闭|437du|Window-Eyes+7.02:默认打开|a1alt|NVDA:不支持(无支持选项)|a39tt|VoiceOver:不支持(无支持选项)|f6f0c|因此，作为|5q8i4|丹尼斯·布德罗|5at76|恰当地说：|hcqb|显然不是推荐的做法|1oe5i|..。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1F|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1G|9|@]|A|@]|B|$]]|$2|E|4|-4|6|7|8|1H|9|@]|A|@]|B|$]]|$2|F|4|G|6|7|8|1I|9|@]|A|@]|B|$]]|$2|H|4|-4|6|7|8|1J|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1K|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1L|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1M|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1N|9|@]|A|@]|B|$]]|$2|Q|4|-4|6|7|8|1O|9|@]|A|@]|B|$]]|$2|R|4|G|6|7|8|1P|9|@]|A|@]|B|$]]|$2|S|4|-4|6|7|8|1Q|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1R|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1S|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1T|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1U|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|1V|9|@]|A|@]|B|$]]|$2|13|4|14|6|7|8|1W|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|1X|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|1Y|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|1Z|9|@]|A|@]|B|$]]|$2|1B|4|1C|6|7|8|20|9|@]|A|@]|B|$]]|$2|1D|4|1E|6|7|8|21|9|@]|A|@]|B|$]]]]

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

<blockquote>
 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.
</blockquote>

Source: <a href="http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/" rel="nofollow">http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/</a>

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

<blockquote>
 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).
</blockquote>

Source: <a href="http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute" rel="nofollow">http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute</a>

When it comes to accessibility and different screen readers:

<ul>
<li>Jaws 10-11: turned off by default</li>
<li>Window-Eyes 7.02: turned on by default </li>
<li>NVDA: not supported (no support options)</li>
<li>VoiceOver: not supported (no support options)</li>
</ul>

Hence, as <a href="http://twitter.com/dboudreau" rel="nofollow">Denis Boudreau</a> adequately put it: clearly not a recommended practice.

entityMap|blocks|key|2r65a|text|ALT属性适用于使用屏幕阅读器的视障用户。如果任何图像标记中缺少ALT，则将读取图像的整个url。如果图片是网站设计的一部分，它们仍然应该有ALT，但它们可以留空，这样就不必读取网站的每个部分的url。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

The ALT attribute is for the visually impaired user that would use a screen reader. If the 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 doesn't have to be read for every part of the site.

entityMap|blocks|key|ekbfb|text|我总是会同时使用两个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|clck4|和|4la1m|属性。它们各有不同的用途：|f1dr6|用于缺少图像、图像下载缓慢或辅助技术的图像替换，而|7v1hq|用于翻转交互性和附加图像描述。|7am1a|此外，在HTML5中，您应该开始使用新的HTML5|5s8q5|元素包装在|91jv5|with+full|3ohdc|WPA-ARIA|4g42h|具有更高可访问性的属性，以及对辅助技术、屏幕阅读器等的支持。因为这个元素在许多旧的browsers...BUT中不被支持，所以我现在推荐下面的HTML设计模式来处理HTML中的图片：|3skh3|"My+Cool+Picture"+[A+License]+,+via+Wikimedia+Commons|code-block|syntax|javascript|6jh7q|上面的代码还有许多额外的“好东西”。|6loac|908o3|，包括ARIA属性，对WebP的支持，支持更高分辨率图像的媒体查询，以及支持旧图像格式的良好后备模式。它展示了一个完全装饰的图像示例，它使用了新技术，同时仍然支持具有渐进式设计模式的旧技术。|3afec|许多开发人员已经使用此模式20多年来处理IE和其他问题。所以这并不是什么新知识。它只是被新的开发人员重新发现，他们没有费心从过去学习。|59ad7|REMEMBER...ALWAYS支持旧的浏览器！^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|18|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|19|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1A|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1B|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1C|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1D|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1E|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1F|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1G|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1H|9|@]|A|@]|B|$]]|$2|U|4|V|6|W|8|1I|9|@]|A|@]|B|$X|Y]]|$2|Z|4|10|6|7|8|1J|9|@]|A|@]|B|$]]|$2|11|4|D|6|7|8|1K|9|@]|A|@]|B|$]]|$2|12|4|13|6|7|8|1L|9|@]|A|@]|B|$]]|$2|14|4|15|6|7|8|1M|9|@]|A|@]|B|$]]|$2|16|4|17|6|7|8|1N|9|@]|A|@]|B|$]]]]

I would ALWAYS go with both the <code>alt</code> and the <code>title</code> attributes. They are each used for different purposes: <code>alt</code> for image replacement on missing images, slow image downloads, or in assistive technology, while <code>title</code> is for rollover interactivity and additive image description.
In addition, in HTML5 you should start using the new HTML5 <code>picture</code> element wrapped in <code>figure</code> 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:
<pre><code>&lt;figure aria-labelledby=&quot;picturecaption2&quot;&gt;
 &lt;picture id=&quot;picture2&quot;&gt;
 &lt;source srcset=&quot;image.webp&quot; type=&quot;image/webp&quot; media=&quot;(min-width: 800px)&quot; /&gt;
 &lt;source srcset=&quot;image.gif&quot; type=&quot;image/gif&quot; /&gt;
 &lt;img id=&quot;image2&quot; style=&quot;height:auto;max-width: 100%;&quot; src=&quot;image.jpg&quot; width=&quot;255&quot; height=&quot;200&quot; alt=&quot;image:The World Wide Web&quot; title=&quot;The World Wide Web&quot; loading=&quot;lazy&quot; no-referrer=&quot;no-referrer&quot; onerror=&quot;this.onerror=null;&quot; /&gt;
 &lt;/picture&gt;
 &lt;figcaption id=&quot;picturecaption2&quot;&gt;&lt;small&gt;&quot;My Cool Picture&quot; [&lt;a href=&quot;http://creativecommons.org/licenses/&quot; target=&quot;_blank&quot;&gt;A License&lt;/a&gt;] , via &lt;a href=&quot;https://commons.wikimedia.org/wiki/&quot; target=&quot;_blank&quot;&gt;Wikimedia Commons&lt;/a&gt;&lt;/small&gt;&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
The code above has many extra &quot;goodies&quot; beside <code>alt</code> and <code>title</code>, 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!

entityMap|blocks|key|9a2d1|text|不，我想|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1utev|这是因为该属性目的是在图像不能被查看的情况下(无论是图像丢失还是浏览器本身不能显示它)提供“替代”文本。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

No, I think <code>alt</code> is better because the purpose of that attribute is to provide "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).

entityMap|blocks|key|17m87|text|ASP.NET+MVC的MVCFutures决定同时做这两件事。事实上，如果你提供'alt‘，它会自动为你创建一个具有相同值的'title’。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c14qu|我手头没有源代码，但在谷歌上快速搜索一下，就找到了一个测试用例！|9mnan|[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("",+imageResult);
++++}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

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!

<pre><code> [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("&lt;img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" /&gt;", imageResult);
 }
</code></pre>

I was browsing <a href="https://www.amazon.com" rel="noreferrer">Amazon</a> and I noticed that when searching "<a href="http://www.amazon.com/s/ref=nb_ss_gw?url=search-alias%3Daps&amp;field-keywords=1TB" rel="noreferrer">1TB</a>" 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 <code>alt</code> 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 <code>title</code> should be used in addition to <code>alt</code>. Would you agree?

HTML img tag: title attribute vs. alt attribute?

HTML5

 我在浏览 亚马逊 我注意到在搜索的时候“ 1TB “如果您将鼠标光标悬停在星级图像上，则只在使用IE时才能看到分数。如果您使用其他浏览器，则分数不会显示。 评分为3.8和4.2的评分均显示为4星。当然，3.8星vs 4.2星(76% vs 84%分数)可能会有所不同！ 这是因为显示的标准方式 文本仅在用户关闭图形或浏览器被“读出”(例如，视障用户的浏览器)时才显示。然而，IE在悬停状态下显示它。

问HTML img标签: title属性还是alt属性？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML img标签: title属性还是alt属性？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML img标签: title属性还是alt属性？
EN