【问题标题】:Multiple images of same product, accessibility requirements同一产品的多张图片,可访问性要求
【发布时间】:2019-09-12 01:25:24
【问题描述】:

对于包含单个产品的多张图片(例如不同角度)的网页。每张图片都需要alt标签吗?

在亚马逊上查看示例,似乎它们在第一张产品图片上只有alt 标签,但之后没有alt 标签或aria 相关标签。

The first example here 表示星星有空的alt 标签。

我的问题是,为了遵循适当的标准,是否需要在第一张图片之后有一个空的alt 标签?使用aria-hidden 完全隐藏额外的无用(相同的东西不同角度)图像,或者只是做亚马逊所做的,只在第一张图像上放置alt 标签。

编辑:还有一个问题,产品图片本身甚至是相关内容吗?如果产品标题已经存在,那么将图像完全隐藏以供屏幕阅读器使用不是更容易吗?

【问题讨论】:

    标签: html accessibility wai-aria alt web-accessibility


    【解决方案1】:

    首先不要使用亚马逊来举例说明如何实现可访问性 - 他们的网站不是一个很好的例子(他们尝试过,但他们有多年的不良做法,他们很难解决)。

    这个问题的答案取决于销售的产品。

    例如,如果它是一个带有狗和猫拥抱图片的杯子,那么单个图像 alt 标签可能是正确的选择,并从屏幕阅读器中隐藏其余图像。

    但是,如果它是一个复杂的产品,具有不同的图像显示尺寸、规格、功能等,那么多个 alt 标签可能是合适的。

    要问的问题是“这张图片是否描绘了任何会影响购买决定的新信息”。

    如果答案是肯定的,则添加一个 alt 标签,如果答案是否定的,则将其隐藏在屏幕阅读器中。


    编辑 - 解决对问题所做的编辑

    从纯粹的可访问性和“规则”的角度来看 - 不,如果图像的每个方面都在其他地方进行了描述,则不需要对图像进行 Alt 描述。

    但是,在实践中,应该始终至少有一个 Alt 标记,其中包含对产品的有用描述。

    alt 标签的想法是为盲人用户提供尽可能多的信息和尽可能与有视力的用户相似的体验(我知道盲人用户不仅使用屏幕阅读器,而且为了解释的简单,请原谅我)。

    不过,与此同时,盲人用户也会感谢您为他们提供尽可能少的信息,从而为他们提供与视力正常的用户相同的体验。

    视力正常的用户会首先看到图像,盲人也应该首先看到图像,因为这在文档流中是有意义的,但请调整您的 alt 描述以提供主要描述中缺少的信息,以避免太屏幕阅读器用户的信息重复很多。

    另外(稍微远离可访问性,但仍然与为什么总是至少有一个 alt 标签相关)不要忘记 SEO - 如果可能的话,您希望该产品图片出现在图片搜索中,尤其是在在商业环境中,alt 标签仍然可以帮助搜索引擎对图像进行分类。

    关于你是否应该至少有一个 alt 标签的最后一个论点是那些禁用图像以节省带宽的人会发生什么 - 你仍然应该至少有一个 alt 标签来描述图像应该是什么。 (一种不同类型的“可访问性”,但仍然相关)。

    tl;dr -> 是的,至少还有一个 alt 标签。

    【讨论】:

    • 但是不应该在不依赖图像的情况下已经在页面上显示规格或其他内容。
    • 他们应该,但这里的论点是,如果我作为一个有视力的用户在描述之前通过图像看到产品尺寸,那么屏幕阅读器用户应该看到相同的。这是一个灰色地带,是重复信息还是在当前上下文中有用的信息?取决于我认为的网站设计和网站的一致性。
    【解决方案2】:

    根据 W3,“如果多张图像传达一条信息,则一张图像的替代文本应传达整个组的信息。”见https://www.w3.org/WAI/tutorials/images/groups/

    【讨论】:

    • 是的,这是我在原始帖子中的链接。对我来说很奇怪,亚马逊似乎没有效仿 alt=""
    • 我认为重要的不是空的 alt 属性,而是一张图像具有所有属性的事实。空的 alt 可能与简单地省略它们没有什么不同。
    • 没有 alt 不会不符合标准
    • 没有 alt 标签和空 alt 标签之间有很大的区别。一个空的 alt 标签alt="" 表示没有有用的信息,大多数屏幕阅读器都会输入,一个缺失或空的 alt 标签<img scr="" alt/><img src=""/> 将尝试读出src 的名称并且是对屏幕阅读器用户来说很烦人。你是对的 Hego555 缺少 alt 标签不符合标准,空 alt 标签符合 对于不传达信息/没有附加信息的图像(例如,装饰图像或根据您的问题的多个角度)
    • 没有问题,我希望整个事情在向人们解释的方式上没有那么混乱。原理很简单,一旦你掌握了它们,由于解释不善,仅仅理解它们就需要很长时间了哈哈!
    【解决方案3】:

    编辑:还有一个问题,产品图片本身甚至是相关内容吗?如果产品标题已经存在,那么将图像完全隐藏以供屏幕阅读器使用不是更容易吗?

    这是这里的主要问题。

    我们可以将商业网站中的图像视为纯粹的装饰吗?我不这么认为。

    屏幕阅读器可供非完全失明的人使用,或供盲人与完全视力正常的人分享信息:“亲爱的,这些颜色会匹配吗?”

    例如,患有 LHON 的人仍然可以有周边视力,并且可以使用屏幕阅读器来帮助他们进行搜索。

    更重要的是为图像提供一个简单而全面的文本替代。

    如果您只在图片中重复产品名称,那么使用空白alt 可能会更好。但是,我们仍然可以想象某个盲人想要分享图像以获得反馈。

    【讨论】:

    • 将图像留在那里不是一个非常特殊的条件吗?
    • Web 可访问性通常取决于特定条件。重要的是要有一个相关的替代方案,不要忘记不仅盲人使用屏幕阅读器等辅助技术。
    猜你喜欢
    • 1970-01-01
    • 2018-02-21
    • 2019-12-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-11
    • 2020-04-26
    • 1970-01-01
    相关资源
    最近更新 更多