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 只是无障碍大旅程中的一步。
title
属性
alt
属性特定于 img
和 area
标签。对于其他元素,您可以使用 title
属性,这将使用户能够访问许多浏览器实现中的工具提示:
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 显示浏览器不显示时的工具提示,并提供视觉线索,表明我们可以通过聚焦元素(底层、问号等)来访问定义。
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>
- 无视
你也可以认为这对屏幕reader没有意义,并认为它是使用aria-hidden
属性的纯装饰性文本。
<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>
这是一个非常(非常)具体的问题,但是在使用 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 只是无障碍大旅程中的一步。
title
属性
alt
属性特定于 img
和 area
标签。对于其他元素,您可以使用 title
属性,这将使用户能够访问许多浏览器实现中的工具提示:
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 显示浏览器不显示时的工具提示,并提供视觉线索,表明我们可以通过聚焦元素(底层、问号等)来访问定义。
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>
- 无视
你也可以认为这对屏幕reader没有意义,并认为它是使用aria-hidden
属性的纯装饰性文本。
<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>