我相信您了解 `alt` 属性文本。 它是图像标签上的一个属性，其重要任务是为任何原因无法看到图像的人描述该图像是什么。 请使用它们。
我不想贬低请使用它们这条信息，但最近在我的日常工作中出现了一些有趣的与 alt 属性文本相关的事情。
当您不需要时
Hidde de Vries 最近撰写了 您并不总是需要替代文本
但是，当图标旁边有文字时，例如“注销”，图标本身就是装饰性的，不需要替代文本。
<button type="button"><img src="close.svg" alt="" /> Close</button>在这种情况下，我们可以将 alt 属性留空，否则屏幕阅读器会宣布“按钮 - 关闭 关闭”。
我认为在一个理想的世界里，因为该图标完全是装饰性的，所以通过 CSS 应用它将是理想的，但要点仍然是：如果您必须使用图像，则 `alt` 属性文本弊大于利。
我们可以免费获得它吗？
计算机现在非常聪明。 也许它们可以查看我们的图像并提供描述，而无需我们手动键入它们。
🔥 我认为我使用机器学习来对人们友善！ 在此概念验证中，我使用 Azure 的计算机视觉 API 为屏幕阅读器创建动态 alt 属性文本。 💫https://#/Y21AHbRT4Y pic.twitter.com/KDfPZ4Sue0
— Sarah Drasner (@sarah_edo) 2017年11月13日
Sarah 的演示使用 计算机视觉 API 来做到这一点。
`` 元素怎么样？
我不想这么说，但我个人不太擅长为 CSS-Tricks 上的博客文章中的图像编写 alt 属性文本描述。 这是一个我们需要通过流程更改来解决的问题。 不过，我们经常使用 `<figcaption>` 来添加与图像相关的文本。 这些文本的编写方式对我来说感觉就像 alt 属性文本。 它描述了图像中发生的事情。
我四处询问了这个问题，Zell Liew 告诉我他也是这么做的。
我实际上也有同样的问题。 我大部分的 `
` 用于描述图像，以便读者了解图像的含义。
在我看来，我认为将 `
我还与 Eric Bailey 进行了交谈，他有一个有趣的想法。
<figure> <img src="screenshot.png" alt="Screenshot of Chrome displaying a split view. On the left is a page full of image thumbnails comparing pre and post-optimization filesize. On the right is Chrome developer tools showing paint rasterize duration for the images. With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds."> <figcaption aria-hidden="true"> With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds. </figcaption> </figure>这个
- 保留图形样式
- 避免使 alt 属性为空，这对于某些屏幕阅读器来说可能存在问题
- 使描述靠近内容并向屏幕阅读器用户传达要点
- 向视觉读者传达重要的要点，而无需为屏幕阅读器用户重复阅读
- 使用设计用于表单之外的 aria 属性
我想强调一下，他认为这只是一个想法，并且尚未得到更广泛的无障碍社区的严格审查。 如果你们中有任何人在阅读，您有什么想法？
Eric 的演示使用了比 `
小提示：Twitter 有 alt 属性文本
但您需要 启用此功能。
一件棘手的事情是，在无障碍方面没有硬性规定。 很多都是主观判断。 规范告诉我们，“编写有用的 alt 属性内容需要作者仔细考虑图像出现的上下文以及图像在该上下文中可能具有的功能。” (
https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text)我想说您的示例可能更符合该页面上显示的饼图示例。(` 提供其他含义。（也许类似“这代表了我们之前实验的 XXX 变化。”同样，上下文至关重要。）
https://www.w3.org/TR/html51/semantics-embedded-content.html#graphical-representations-charts-diagrams-graphs-maps-illustrations) 传达您试图传达的信息的最佳方式可能是将文本“左侧是包含许多图像缩略图的页面，这些缩略图比较了优化前后的文件大小。 右侧是显示图像绘制光栅化持续时间的 Chrome 开发者工具。 在 CPU 速度降低 6 倍的情况下，最长的绘制光栅花费了 0.27 毫秒，即 0.00027 秒。”放在一个段落中，并使用类似“上面描述的屏幕截图”的内容作为 alt 属性，并在需要时使用 `我的理由是，您放在 alt 属性文本中的信息对所有读者都有用（尽管对于视力完美的人来说可能有点多余），并且它会隐藏一些视力有限但未使用屏幕阅读器的人的信息。（例如，患有青光眼或黄斑变性的患者。）
不幸的是，terriersT alt 属性文本选项在其 PWA 上不可用。
有一个非常不错的决策树可以帮助人们决定是否使用 alt 属性文本以及在其中描述什么。 https://www.w3.org/WAI/tutorials/images/decision-tree/
此外，感谢您分享基于机器学习的 alt 属性文本生成器。 我们正在从两端挖掘隧道：(1) 教育人类编写机器可读的代码 (2) 提高机器以人类的方式理解代码。
我看到了 (2) 中的许多希望。 想象一下，一个甚至不需要访问 DOM 的屏幕阅读器！
不确定为什么 `` 解决方案需要使用重复的文本和 `aria-hidden`。 为什么不这样（这是我在我的博客上所做的）？
在 VoiceOver 中，它被读取为
显示拆分视图的 Chrome 屏幕截图。 左侧是包含许多图像缩略图的页面，这些缩略图比较了优化前后的文件大小。 右侧是显示图像绘制光栅化持续时间的 Chrome 开发者工具。，图像在 CPU 速度降低 6 倍的情况下，最长的绘制光栅花费了 0.27 毫秒，即 0.00027 秒。当然，这确实取决于图像，但我发现通常很容易在“描述图像本身”和“为图像提供额外上下文”之间划清界限。
我错过了什么？ alt 属性文本何时从包含图像中像素以图形方式表示的任何文本更改为充当描述？ 我以为那是 `title` 属性的作用…… O.o
显然，您不是唯一一个对 `title` 属性的用途感到困惑的人
https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/
它从未改变。 alt 属性文本一直是描述图像内容的一种方式，在与使用它的文档相关的方面，它与图像的重要性相关。 这样做的一种方法是确保图像中使用的任何文本都指示在 alt 属性的值中。 所以您没有错，但它不仅仅是您想象的那样 :)
`title` 属性不利于无障碍。
基本上，尽管文本应用于传达与图像相同的含义，而 `` 用于额外的细节。 如果该文本随后没有意义（例如，作为标签在图像旁边重复文本），那么问问自己“此图像是否真的应该在 HTML 中？” 答案可能是“否”。
它主要用于屏幕阅读器。在您认为有助于辅助功能的地方始终使用描述性替代文本。
标题不是辅助功能。替代文本应在图像为像素时包含文本，否则应描述图像的功能（图标的电子邮件与信封）或形式（在图像上下文中具有意义的简短描述）
一直以来让我觉得有点好笑的是，通过替代文本描述图像的外观。例如，像“美丽的日落”或“深蓝色房子附近一辆浅红色的汽车”这样的替代文本。这些可能不是很好的例子，但潜在的想法是，如果某人失明，此描述提供的有用信息很少，甚至可能不敏感（当然，并非有意）。
将 aria-hidden 应用于 figcaption 对使用屏幕阅读器进行补偿的低视力用户来说是一个问题。他们可能会感到沮丧，因为他们无法让阅读器读取他们可以确定在页面上的文本。您还必须考虑 NVDA 的鼠标悬停模式（默认）和 iOS VoiceOver 的浏览页面的环顾四周指向方法。它在页面上，所以让他们听到它。尽量使事物尽可能一对一，不要将事物视为存在于有视力领域与无视力领域。
aria-hidden（和 .sr-only）应该谨慎使用。
我使用了一个非常有用但也有点古怪的新闻阅读器，它非常擅长提取“阅读更多”文本，但在提取图像方面却很糟糕。结果是我看到的替代文本可能比普通有视力的浏览器用户多得多。
大约一年前，我在新闻和其他大型内容网站上开始注意到一种趋势，即替代文本使用叙事文本而不是明确描述图像。结果更像是 Eric Minto 在上面描述的那样，其中替代文本更像是号召性用语而不是标题。
（仅仅复制标题的替代文本很乏味。）
这对内容非常有效，但我已开始在有意义的界面元素中使用它。例如，使用“返回到 [网站名称] 首页”作为徽标的替代文本，而不是将其留空或说类似“[网站名称] 徽标”的内容。描述徽标更“真实”地描述，但也缺乏信息性。
我认为 Evan（@VamptVo）说得很有道理。在 ALT 和 Figcaption 中重复文本绝对不是我的建议，因为它可能会让使用 SR 的人感到无聊。最重要的是要区分描述图像的文本和添加额外信息的文本。另一方面，aria-hidden 可用于设计目的。
所以最终，我认为这首先取决于图像，以及为 SR 用户和屏幕用户提供相同详细程度信息的理念。在 Evan 给出的例子中，这正是问题所在，因为如果您不想在图像下方看到一个短句，但又想为这两种类型的用户提供相同的信息……您必须确保隐藏的 figcaption 数据放置在页面的其他位置
如果 alt 和 figcaption 文本相同，则不必重复自己。您可以为 figcaption 提供一个 ID，并通过 aria-labelledby 引用它。
我严格使用
alt来描述视障人士的图像，并使用figcaption来提供更多关于图像的评论。我尽量不使用它来描述图像。例如，在水滑梯的照片中，我会在alt文本中描述水滑梯的外观和颜色，但figcaption可能是“看起来很有趣！”之类的内容。当然，这取决于我如何围绕图像编写内容。有时此
figcaption可能根本不需要。也就是说，使用此实现，我不会使用aria-hidden，因此类似于 Evan 在之前评论中所说的话。除了让您的网站对所有用户都可访问（这对于确保您最大化流量价值非常重要）之外，图像上的替代标签也可以对 SEO 产生积极影响。尤其是在 Google 推出“查看图像”功能移除后，正确地为搜索标记您的图像（这意味着除了在替代标签中描述图像内容外，还要使用您的主要关键词）可以对可见性和搜索排名产生重大影响。
替代标签有很多重要原因，UX 和 SEO 只是其中两个。
-Marissa @ VisualFizz http://www.visualfizz.com
WordPress 用户也可以在这个方便的插件中利用 Azure API
https://wordpress.org/plugins/automatic-alternative-text/
我们需要记住，“alt”文本指的是您希望在浏览器中显示的替代文本，如果由于某种原因它关联的图像无法显示或被大声朗读；这里的“替代”部分很重要。我认为从历史上看，作为 Web 开发人员，我们总是被告知，“为您的图像包含 alt 文本”，这……还可以……但是如果您有一个家庭野餐的装饰性图像，并且图像无法显示，您实际上并不需要“家庭野餐”显示在网页上，也不需要屏幕阅读器大声朗读它。
并且在某些情况下，alt 文本和 figcaption 文本可能相同，但从概念上讲它们是不同的。
当然还有 title 属性，它仍然不同。哦，等等，还有 longdesc 属性……又是另一件事。了解它们之间的区别，然后根据具体情况适当地使用它们（或不使用）。
几点说明
首先，alt 属性的最初目的是作为图像的替代。仅当无法查看图像时才使用它。这不仅限于视力障碍：纯文本浏览器、带宽受限以及清理错误也可能导致图像丢失。替代文本应提供合理的替代，而不仅仅是读出图像的名称。
alt 文本从未打算解释图像。这就是 title 的用途，无论图像是否可用，它都可用。在某个阶段，IE 将 alt 显示为工具提示，但他们修复了这一点。只有 title 应该这样做。
其次，从广义上讲，您可以争辩说某些图像是信息性的，而某些图像不是（例如纯粹的装饰性图像）。两者之间的界限并不明确。然后，您可以争辩说，信息性图像的 alt 属性至关重要，而非信息性图像则不那么重要。
第三，辅助功能测试倾向于因缺少 alt 标签而对您进行处罚，因为它们无法区分信息性图像和其他图像。如果您尝试实施本文中的建议（这通常是好的建议），同时又试图通过辅助功能测试，这将使事情变得复杂。
只是说说……