【问题标题】:Alt attribute for ASCII art in HTML?HTML中ASCII艺术的Alt属性?
【发布时间】:2016-02-29 00:26:48
【问题描述】:

这是一个非常 (very) 特定的问题,但是在使用 alt 属性来显示 ASCII 艺术时是否适合使用 pre 标记?它本质上就像一张图片(使用屏幕阅读器无法理解),所以使用alt 是有意义的。

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

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

(我可以想象其他可能出现这种情况的情况,例如使用印刷对象来表示特定操作,例如“主页”链接。)

【问题讨论】:

  • 我喜欢这个想法,语义上,但pre 甚至有alt 属性吗?如果它是非标准的,那么它对屏幕阅读器等的适用性可能没有实际意义。

标签: html accessibility screen-readers alt ascii-art


【解决方案1】:

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

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

欲了解更多信息,请查看this MDN article on it

【讨论】:

  • 谢谢!我没有看到任何有关浏览器支持的信息 - 大多数屏幕阅读器用户都可以访问它吗?
  • 如您所见,浏览器支持并不重要。需要支持的是辅助功能软件(屏幕阅读器等);)
【解决方案2】:

您有不同的选择可以考虑,因为屏幕阅读器只是无障碍之旅的一大步。

  1. title 属性

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

HTML5 doc:

title 属性表示元素的建议信息,例如适合工具提示的信息。在链接上,这可以是目标资源的标题或描述;在图像上,它可以是图像信用或图像描述;在一个段落上,它可以是一个脚注或对案文的评论;在引文中,可能是有关来源的更多信息;在交互式内容上,它可以是元素使用的标签或说明;等等。值为文本。

警告!目前不鼓励依赖 title 属性,因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性(例如,需要诸如鼠标之类的指点设备来导致出现工具提示,这不包括仅使用键盘的用户和只能触摸的用户,例如拥有现代手机或平板电脑的任何人)。

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

  1. aria-label 属性

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

请注意,您可以使用两个不同的文本,因为 title 可以用作描述,而 aria-label 更多的是文本替换。

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

您也可以认为这对屏幕阅读器毫无意义,并使用aria-hidden 属性将其视为纯装饰文本。

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

【讨论】:

    猜你喜欢
    • 2010-12-14
    • 2013-06-27
    • 2016-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-02
    • 1970-01-01
    相关资源
    最近更新 更多