HTML中ASCII艺术的Alt属性？

Question

这是一个非常（非常）具体的问题，但在使用 pre 标签显示 ASCII 艺术时，是否适合使用 alt 属性？它基本上就像一张图片（对于屏幕阅读器来说无法理解），因此使用 alt 是有意义的。

<pre alt="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

这段文字是否适合被屏幕阅读器阅读？是否格式合适？

我可以想象其他情况下也可能出现这种问题，比如使用排版元素来表示特定操作，例如“主页”链接。

- JeffThompson

---

我喜欢这个想法，从语义上来看，但是pre标签是否有alt属性呢？如果它不是标准的话，那么它对于屏幕阅读器等的适用性可能就没有意义了。 - David

Answer 1

该目的可以使用aria-label属性实现。

<pre aria-label="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

欲了解更多信息，请查看MDN上的相关文章。

- Niet the Dark Absol

---

谢谢！我没有看到关于浏览器支持的任何信息 - 这对大多数屏幕阅读器用户来说是否可访问？ - JeffThompson

啊，找到一些信息：https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ#Browsers - JeffThompson

正如你所发现的，浏览器支持并不重要。重要的是辅助软件（屏幕阅读器等）需要支持它；) - Niet the Dark Absol

MDN的文章已经不存在了。在回答撰写时，可以在互联网档案馆网站上找到这张截图：https://web.archive.org/web/20150910173438/https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute，最新的截图是从2022年1月的，内容没有变化。然后几个月后，它重定向到了这篇MDN文章：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label，现在已经不再重定向。 - undefined

Answer 2

您有不同的选择可以考虑，因为屏幕阅读器只是较大可访问性旅程中的一步。

1. 标题属性

alt 属性特定于 img 和 area 标签。对于其他元素，您可以使用 title 属性，在许多浏览器实现中，这将使用户访问工具提示：

请参见 HTML5 doc：

标题属性表示元素的咨询信息，例如提示工具中适当的信息。在链接上，这可能是目标资源的标题或描述；在图像上，可以是图片来源或图片描述；在段落上，可以是对文本的脚注或评论；在引用上，可以是有关来源的进一步信息；在交互式内容上，可以是元素的标签或使用说明等。该值为文本。 警告！当前不鼓励依赖标题属性，因为许多用户代理程序不按照规范要求以可访问的方式公开该属性（例如需要指针设备（如鼠标）才能出现工具提示，这将排除仅使用键盘和触摸屏的用户，例如拥有现代手机或平板电脑的任何人）。 title 属性可能在某些条件下使用：将其应用于可定位元素（使用 tabindex=0），以便可以通过键盘访问，使用 JavaScript 在浏览器未显示工具提示时显示它，并通过将元素聚焦来提供视觉提示，即底部的下划线、问号等。 属性aria-label 许多屏幕阅读器默认不会读取title属性的值，因此建议您使用aria-label，这在某种程度上是特定于屏幕阅读器的。但请注意，由于未使用屏幕阅读器的人无法受益于aria-label，因此必须与title属性一起使用。

请注意，可以使用两个不同的文本，因为当aria-label更像是文本替换时，title可以用作描述。

<pre aria-label="Welcome!" title="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

忽略它。

你也可以考虑这对屏幕阅读器没有意义，将其视为纯粹的装饰性文本，并使用aria-hidden属性。

<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>

- Adam