2015-11-26 36 views
4

这是一个非常(非常)的特定问题,但在使用该标记显示ASCII艺术时,将alt属性用于pre标记是否合适?它基本上像一个图像(使用屏幕阅读器不会理解),所以使用alt是有道理的。HTML中的ASCII艺术的Alt属性?

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

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

(我能想象这个地方可能会出现,就像使用印刷对象来表示一个特定的动作,如“家”链接的其他情形。)

+0

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

回答

4

aria-label属性存在用于此目的。

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

欲了解更多信息,检查出this MDN article on it

+0

谢谢!我无法看到有关浏览器支持的任何信息 - 大多数屏幕阅读器用户都可以访问吗? – JeffThompson

+0

啊,发现一些信息:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ#Browsers – JeffThompson

+0

另外:(1˃̵ᴗ˂̵)和 – JeffThompson

1

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

  1. title属性

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

HTML5 doc

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

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

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>