替代文本中的换行符答案

【问题标题】：Newline in alt text替代文本中的换行符
【发布时间】：2021-07-31 13:08:03
【问题描述】：

我可以在图片的替代文本中使用某种换行符，同时仍然遵守 XHTML 1.0 Strict 标准吗？

这样的……

<img src="foo.jpg" alt="Line 1\nLine 2" />

我问这个问题是因为我想在我的网站上发布以下屏幕截图，但出于 SEO 原因和视障人士，我想在替代文本中包含纯文本版本。

我更喜欢屏幕截图而不是纯文本版本，因为它看起来更具视觉吸引力。

【问题讨论】：

标签： html xhtml

【解决方案1】：

只需使用正常的换行符。

<img src="foo.jpg" alt="Line 1
Line 2" />

Stack Overflow 在他们的标题中这样做了 :)

然后添加这个 CSS：

img{white-space:pre}

演示：http://jsfiddle.net/Madmartigan/S8SXP/

【讨论】：

只有当你想用换行符显示alt时才需要CSS，以防找不到图像。
这似乎违反了 XHTML 1.0 Strict 标准。
嗯，我在验证器中测试并得到“此文档已成功检查为 XHTML 1.0 Strict！”
IE 或 IE Mobile、iOS Safari 7.0 以上或 Android 4.4 以上不支持 white-space 属性
@Pieter：请提供任何支持您上述观点的参考资料（...违反 XHTML 1.0 Strict 标准）？我似乎在任何地方都找不到它。

【解决方案2】：

更好的方法是只为换行或回车添加 HTML 字符代码。

 line feed is &#10
 carriage return &#13

【讨论】：

如果“数字字符引用扩展为回车”，validator.w3.org 会给您一个错误。
这不是很好的交叉兼容。无法在我的任何浏览器中使用此功能。
在 chrome 中不起作用

【解决方案3】：

我认为你可能太努力了。
替代文本应该是图像的替代品，而不是某种文字表示形式。

正确标记等等，这将是一个带有子列表的无序列表，屏幕阅读器将从 HTML 元素的嵌套中获取关系信息。用一些换行符代替它以获得粗略的视觉近似值几乎不是一回事，例如。您打算如何同时“显示”屏幕阅读器第一个换行符后的块在错误“内部”？
而且我怀疑搜索引擎除了丢弃它们之外，还会对 alt 文本中的换行符做任何事情。（诚然是投机性的。）

您实际上想要的是以某种方式包含图像所具有的嵌套/关系信息，而是使用文本。从“[应用程序]通知的屏幕截图，显示两个错误[如果需要，请在此处详细]和两个信息项[详细]”之类的内容开始。

或者你可能会变得很迂腐，实际上用 HTML 创建列表，然后使用图像替换技术插入图像。

【讨论】：

我在图像替换中发现了这个...dave-woods.co.uk/?p=124 图像替换对于静态网站来说似乎是一个很好的解决方案，但我使用的是 WordPress CMS。有没有办法让这个过程自动化一点？因为每次使用这种技术时都必须编辑样式表是不现实的。

【解决方案4】：

@Murch 的回答是我不知道的。但是，在整个应用程序中将空格分解为 BR 会变得很开销。

作为最简单的解决方案，您只需提供

img.class { overflow:hidden }

并快速而肮脏地克服它。

【讨论】：

【解决方案5】：

对我来说img { white-space: pre; } 是不可行的，因为它阻止了替代文本的换行并使其溢出图像边界（debian 上的铬）。我使用的解决方案是添加大量&nbsp;s，直到文本进入下一行。希望屏幕阅读器会将其视为空白而忽略。

【讨论】：