HTML中ASCII艺术的Alt属性



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

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

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

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

aria-label属性的存在就是为了这个目的。

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

有关更多信息,请查看MDN的这篇文章。

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

  1. title属性

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

参见HTML5文档:

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

警告!目前不鼓励依赖标题属性,因为许多用户代理没有按照本规范的要求以可访问的方式公开属性(例如,需要鼠标等指示设备来显示工具提示,这排除了仅键盘用户和仅触摸用户,例如任何拥有现代手机或平板电脑的人)

title属性可能会在一些条件下使用:在目标元素上使用它(使用tabindex=0),以便可以用键盘访问它,在浏览器不使用时使用javascript显示工具提示,并提供视觉线索,表明我们可以通过关注元素(底层、问号…)来访问定义。

  1. aria-label属性

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

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

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

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

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

最新更新