图片 alt 属性最佳实践

题

该产品的具体用途是什么 alt 属性上 <img> 标签？

它应该描述图像，还是应该为屏幕阅读器（以及关闭图像的人）提供有意义的替换文本？

例如，如果我的网站上有一个人的简短传记，并包含他们的小照片，那么向视障用户朗读“约翰·史密斯的照片”对他们来说真的有意义吗？

解决方案

HTML 5规范有巨大的部分。

基本上，如果您根本没有使用图像，那么alt属性应该是文本。如果您的图像纯粹是装饰性的，您可以使用alt=""。描述在title属性中。

其他提示

我认为我的想法是使用alt文本来传达与图像相同的信息。这取决于图像是什么。

导航元素可能更好地通过它们的功能（<！>“;下一页<！>”;，<！>“;返回<！>”;）而不是它们的外观（<！>“;右箭头< ！> QUOT）。

约翰史密斯的照片可能会被约翰史密斯的描述所取代，或者对事件的描述等等。

虽然替代文本可能非常有帮助，但必须小心处理。作者应遵守以下准则：

在包含旨在格式化页面的图像时，请勿指定不相关的替代文本，例如，alt="red ball" 对于添加红球来装饰标题或段落的图像来说是不合适的。在这种情况下，替代文本应该是空字符串 ("")。无论如何，建议作者避免使用图像来格式化页面；应改用样式表。
不要指定无意义的替代文本（例如“虚拟文本”）。这不仅会让用户感到沮丧，还会减慢必须将文本转换为语音或盲文输出的用户代理的速度。

它提供<！> quot; alternate <！> quot;如果由于某种原因无法加载图像的文本。在你的例子中，我会说是的，这是合适的。

<！>“; alt <！>”; attribute是图像语义的替代（文本）表示。这不仅用于无法加载的图像：它还用于屏幕阅读器或纯文本浏览器。

在您的特定情况下，包括alt-text类型取决于您是否认为重要的是要注意该页面包含该人的图片。如果它是纯视觉项目，您可能不需要任何替代文本。如果它也被用作某种类型的链接，你可能做想要一些alt文本，这样使用屏幕阅读器的人就链接可能会做什么有一些线索。

首先点击谷歌这个[img alt accessibility]给出考虑页面的样子或听起来像是什么时候没有显示图像。然后，为每个图像写一个最适合作为替代的替代文字（关于img元素中alt文本的指南）

如果没有显示图像，它应该是帮助用户的任何东西。

顺便提一下<！>“功能<！>当您将鼠标悬停在IE中的图像上时，工具提示显示ALT不是ALT的正确行为。标题应该用于此。

简洁地描述图像，就好像你在和一个盲人说话一样。很简单。

我确信Google使用此属性值来索引图片搜索。

如果我有简短的传记在我的网站上的人，并包括一个他们的小照片，真的对视障用户有意义 <！>; John Smith的照片<！>读出对他们？

如果您没有该替代文字，您认为他们认为图像是什么？ <！>“John Smith和他的妻子的照片<！>”; <！>;约翰史密斯的照片接受他的奥斯卡<！>; <！>;约翰史密斯暗杀肯尼迪的照片<！>“; <！>;约翰史密斯被他的宠物大象谋杀后躺在他的露台上的照片<！>;

如果是约翰史密斯的照片，是的，请说出来。如果是别的话，可以这样说。

Alt 属性与 img 标记一起使用。

Alt表示备用

用于图像的简短描述。

如果浏览器无法加载图片

，则会在屏幕上显示

许可以下： CC-BY-SA 和归因