所以我一直在尝试让我的网站尽可能地访问（对于非JavaScript用户，网页抓取工具，屏幕阅读器等），我遇到了很大的麻烦。
我正在开发的网站非常重要。 （我在业余时间绘制了愚蠢的东西，该网站是一种“展示”。）网站中的每个页面都有一个图像（或多个，如果需要上下文或图像是几个面板），通常伴随通过下面的单个标题。因此，当我到达必须添加辅助功能选项时，我不知道该怎么做。例如，假设我有一个男人吃苹果的图像，这个笑话就是其中有一个蠕虫。所以我做的第一件事就是添加一个可笑的描述性替代文本，因为它是为屏幕阅读器提供“等效”的唯一方法。
<img src="appleeat.png" alt="A man bites into an apple. As it turns out, there's a worm in it!">
这一开始看起来还不错，但是当我突然发现自己需要添加高达300个字符（!!!）的alt文本以获得更精致的笑话和图像时，事情发生得非常快。不仅如此，显然alt text isn't for descriptions anyway。
所以我遇到了这些问题：
longdesc似乎更适合此专长，但任何浏览器都不支持longdesc（至少根据W3Schools），即使它does seem to be in the HTML5 specification。<figcaption>似乎是要走的路，但它最终会在相关图片下方显示文字，这对我的网站来说绝对不是很吸引人，特别是如果我想在{}中添加额外的字幕和上下文{1}}标签或其他内容。那我该怎么办？我会放什么，在哪里？我对这一点感到非常难过，坦率地说，我不确定制作完全基于无法看到的人可以访问的图像的网站是一个好主意。
答案 0 :(得分：4)
alt属性用于替代文本，即图像的文本替换，因此在示例中，如果它合理地讲述与图像相同的故事就足够了。实际上，大多数图像都不能有完全“替代”或“替代”的文本;如果可能的话，通常是捕获一些最重要的信息。
alt文本可以是任意长度。 alt文本不应该是描述的陈述并不意味着在需要时不能详细说明。关键在于有太多的描述可以说明图像的某些内容而不传达其信息（如“大红色子弹”或“独木舟中的男人”）。
longdesc属性受到某些软件的支持，但备受争议，不属于W3C HTML5 CR，但是作为一个独立的“扩展”开发。
figcaption元素用于显示与图像一起显示的标题。它根本没有涉及替代文本的问题。它旨在呈现给用户，无论他是否看到图像。
答案 1 :(得分：2)
如果您想提供复杂的替代文字（“复杂”可能意味着：包含列表，表格，音频/视频等），您可以使用带有img属性的longdesc元素或object元素，而不是img。
longdesc 在HTML 4.01中，longdesc是规范的一部分。在HTML5中，它已被删除，现在已开发为HTML5 extension（但currently only a Working Draft from 2013 更新：it became a W3C Recommendation）。
问题：您必须将内容包含在同一页面上，但是您不应该在视觉上隐藏它（因为不仅屏幕阅读器用户可能想要访问此内容）。或者您必须为内容添加单独的页面（但搜索引擎不会将此内容与图像相关联，即您错过了排名潜力）。
object object element可用于任何类型的媒体。它的内容是后备内容，允许您使用标记替代文本。
<object data="appleeat.png" type="image/png">
<!-- the alternative content goes here -->
<p>A man bites into an apple. As it turns out, there's a worm in it!</p>
</object>
答案 2 :(得分：1)
以下是对可能适用于您的情况的替代文字的一些讨论：
虽然我同意@Jukka，但长篇文本本身不是问题。确实，“alt文本不是用于描述”，而是因为alt文本用于等效内容。如果特定图像的等效内容是对它的描述，那就没关系。
对于网络上使用的大量图片而言，这不是真的。例如，此页面顶部的Stack Overflow徽标的最佳替代文字不会是
Stack Overflow标志：一个抽象的纸盒里面堆满了纸张，后面跟着“堆叠”一词，粗体显示“溢出”一词
它只是“Stack Overflow”，因为它为一个有视力的人提供了相同的体验（即它告诉他们他们所在的网站）。
但如果您的图像是卡通片，我想为它们编写替代文字有点像为电影制作音频描述。如果您想提供相同的体验，则需要更具描述性。这肯定是一个挑战，特别是如果你没有经验，或者有部分视力的用户与之讨论。
Joe Clark在他的“建立无障碍网站”一书中讨论了描述图像：
甚至为漫画提供替代文字，虽然他的例子是对话繁重的条带，我不确定它在今天的屏幕阅读器中提供了什么样的体验：
答案 3 :(得分：1)
现在大多数人使用 figcaption 作为文章图片下的标题，或用于简短的图片描述，例如...
<figure aria-labelledby="myimage1" >
<img id="image1" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
<figcaption id="myimage1">This is My Image Caption!</cite></figcaption>
</figure>
但是....因为您将更大的描述与您的图像相关联，并且不需要标题，试试这个...
<div role="img" aria-labelledby="myimage2">
<img id="image2" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
<p id="myimage2">Larger description of my image...</p>
</div>
这也与 WAI-ARIA 可访问性标准兼容，该标准将读取您的容器“div”和您的“p”描述并将其与图像相关联。请注意新属性 role=img。由于 div 与 figure 不同，它通常不与图像相关联，因此这有助于屏幕阅读器将 div 容器识别为图像的一部分。
附加
请注意，如果图像从未出现、用户代理无法读取图像或图像下载速度缓慢，则 alt 属性应该是图像的文本替换。我喜欢在灰色背景图像框中显示此信息，以防图像损坏并且用户需要知道缺少什么。它旨在通过简单的短文本字符串告诉用户图像代表什么。
图像上的 title 属性是一个重要的翻转框，它提供额外的图像信息、图像映射反馈，或者当图像是可点击的超链接时它会链接到哪里。一些设计师对 title 属性不以为然，但我一直在我的很多 HTML 中使用它来为我的所有交互和视觉元素添加丰富的信息。
答案 4 :(得分：0)
我认为在<figcaption>中添加描述性文字是个好主意。浏览器支持当然存在问题，这应该可以通过CSS解决：
figcaption { display: block; }
然后，您可以默认隐藏此文字figcaption { display: none; }并在某个地方添加一个链接，该链接将刷新页面，并通过其他样式显示标题 - figcaption { display: block; }
此选项不再需要javascript解决方案，只为那些特别请求它们的人提供标题。
你可以用一点点php来设置它：
<head>
<style type="text/css">
<?php if(isset($_GET['CaptionDisplay']))
{
echo 'figcaption { display: block; }';
}else{
echo 'figcaption { display: none; }';
}
?>
</style>
</head>
HTML链接 - <a href="example.php?CaptionDisplay=true">Show captions</a>
这完全脱离了我的头脑:)让我知道我是否可以更好地解释任何事情。
答案 5 :(得分：0)
我认为“等效体验”是一种主观的看法，我可以从经验中证明，许多可访问性准则虽然用心良苦，但却是不正确的。对于屏幕阅读器用户而言，仅看到Stack Overflow alt标签徽标将不会为视障用户提供同等的体验。您应该始终正确描述任何alt标签。我认为拥有较长的替代文本不一定不好，但是如果过于笨拙，则可以用纯文本构建单独的部分。感谢您抽出宝贵时间来访问您的网站。屏幕阅读器用户确实喜欢包容性设计和周到的描述。