【问题标题】:accessibility in decorative images or repetitive information images装饰图像或重复信息图像的可访问性
【发布时间】:2017-06-21 13:27:11
【问题描述】:

当你写一个替代品时,你应该记住一些事情。当图片内容为装饰性或包含重复信息时,其中之一建议使用空的alt=""

但是使用有什么区别:

<img alt=""
<img aria-hidden="true"
<img role="presentation"

还是一起?

<img alt="" aria-hidden="true" role="presentation" src="…" />

【问题讨论】:

    标签: html image accessibility wai-aria alt


    【解决方案1】:

    简答:

    他们都有不同的目的。图像 alt 属性仅对图像元素有效。 aria-hidden 适用于对所有用户隐藏的元素,并且 role=presentation 有点像所有元素的空 alt 属性 - 不仅仅是图像(但比空图像 alt 支持更少)。

    更长的答案:

    我建议阅读这些属性的文档以了解应该如何使用它们。它们各有不同的用途。

    alt 属性:

    图像替代文本旨在传达非文本内容的替代文本 - 如果图像没有替代文本,屏幕阅读器将忽略它,假设它纯粹是装饰性的。此功能得到广泛支持 - 如果不是普遍支持的话。

    aria-hidden:

    aria-hidden,如 w3c 中所定义,旨在用于“任何用户都看不到或感知不到”的元素。这意味着如果有视力的用户看不到它,它也应该对访问无障碍 API 的用户隐藏。一个示例用例是,如果用户必须单击一个按钮才能显示某个部分 - 该部分将对所有用户隐藏,并且在其可见性更改时也会切换“aria-hidden”属性。应该注意的是,它并不总是以这种方式使用 - 许多人只是用它来隐藏屏幕阅读器,尽管这不是 W3C 中定义的预期目的。来源:https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

    role=presentation:

    role=presentation 在 w3c 中定义为:“其隐式本机角色语义不会映射到可访问性 API 的元素”。这类似于空 alt 文本,尽管与 alt 属性不同,它可以用于不应映射到辅助功能 API 的各种其他元素。实际上,它与空 alt 文本做同样的事情,但它不像空 alt 属性那样被广泛支持(来源:https://www.w3.org/WAI/tutorials/images/decorative/

    w3c 定义:https://www.w3.org/TR/wai-aria/roles#presentation

    为什么不包括所有 3 个?

    回答你的最后一点,不包括所有三个的最大原因是它完全是矫枉过正。如果 alt 属性为空,则屏幕阅读器将已忽略该元素。包含 role=presentation 和 aria-hidden 的一个潜在缺点是,这两者都会从无障碍 API 中移除元素,这可能会对使用非屏幕阅读器工具的 API 的用户产生负面影响。

    【讨论】:

    • 谢谢,这个很好的答案,我知道属性的定义,但我经常在代码中看到alt="" aria-hidden="true"。甚至在 StackOverflow stackoverflow.com/questions/40409841/… 的另一个答案中,也不是图像的元素中的 aria-hidden="true" role="presentation" 。
    • 例如,Youtube 在不同的元素中使用alt=""alt="" aria-hidden="true"。我很困惑他们为什么要这样做。
    • 如果您有一个按钮可以在您的网站上隐藏和显示装饰图像,我建议您使用alt="" aria-hidden="true",当按下按钮时,将aria-hidden 值更改为@987654330 @。空 alt 文本适用于图像,而 aria-hidden 和演示角色适用于所有元素。它们可以用于图像,但它们的目的与空替代文本不同。
    【解决方案2】:

    alt属性设置为空字符串时

    From the W3C:

    图像要么是装饰性的,要么是对其余内容的补充,与文档中的其他一些信息是多余的。

    关于冗余的第二部分很重要,例如:

    <h1><img alt="" src="logo.gif" />My company name</h1>
    

    当你必须使用role=presentation

    这种情况是图片纯粹是装饰性的,这意味着您必须在这种情况下使用alt=""

    您不必为具有空 alt 属性的图像指定演示角色属性,因为它是标准浏览器的默认实现:

    允许的 ARIA 角色属性值:
    仅限presentation 角色,对于 alt 属性值为空 (alt="") 的 img 元素,否则为任何角色值。

    当你必须使用aria-hidden=true

    当您不想向 Accessibility API 提供信息但想将其提供给标准用户时使用它。

    由于视力正常的人可能会使用屏幕阅读器(文盲、弱视等),因此必须谨慎使用。对于img 标签,它仅在alt 不为空时才有用。

    对于具有非空alt 属性的img,它将假定您为使用屏幕阅读器的人提供了足够的上下文信息,而alt 信息可能只提供图像上已经可见的信息,而不是有趣的盲人或其他屏幕阅读器用户。

    <h1>Come to visit George</h1>
    <img alt="Map to reach George" src="map.gif" aria-hidden="true" />
    Take the highway A13 direction London.
    When you reach London follow A2 highway in direction Liverpool.
    

    我认为这在不引入冗余的情况下对 SEO 更有用。

    TL;DR

    当您不想向屏幕阅读器提供信息时:

    • 如果关注 SEO,请使用非空 altaria-hidden=true
    • 否则使用alt=""
    • imgrole=presentation 应该有一个空的 alt
    • img 带有一个空的 alt 有隐含的 role=presentation

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-07-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-01-15
      • 2019-08-30
      • 2021-12-15
      相关资源
      最近更新 更多