HTML 中 ASCII 艺术的 Alt 属性?

Alt attribute for ASCII art in HTML?

这是一个非常(非常)具体的问题,但是在使用 pre 标签时使用 alt 属性是否合适显示 ASCII 艺术?它本质上就像一个图像(使用屏幕无法理解 reader),因此使用 alt 是有道理的。

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

是否会被屏幕阅读reader?这是合适的还是好的形式?

(我可以想象可能出现这种情况的其他情况,比如使用印刷对象来表示特定的动作,例如“家”link。)

aria-label 属性就是为此目的而存在的。

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

有关详细信息,请查看 this MDN article on it

您有不同的选择可以考虑,因为屏幕 reader 只是无障碍大旅程中的一步。

  1. title属性

alt 属性特定于 imgarea 标签。对于其他元素,您可以使用 title 属性,这将使用户能够访问许多浏览器实现中的工具提示:

HTML5 doc:

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.

Warning! Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

title 属性可能在某些情况下使用:在可定位元素上使用它(使用 tabindex=0)以便可以使用键盘访问它,使用 javascript 显示浏览器不显示时的工具提示,并提供视觉线索,表明我们可以通过聚焦元素(底层、问号等)来访问定义。

  1. aria-label属性

许多屏幕 reader 默认情况下不读取 title 属性的值,因此我们鼓励您使用屏幕特定的 aria-label-reader秒。 由于不使用屏幕 reader 的人不会受益于 aria-label,您必须将它与 title 属性结合使用。

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

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

你也可以认为这对屏幕reader没有意义,并认为它是使用aria-hidden属性的纯装饰性文本。

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