WordPress Post 缩略图应该有 role="presentation" 吗？

Question

我目前正在为一个新站点编写主题，并希望尽可能友好地使用辅助技术。因此，我想知道在 post 缩略图的调用显示中包含 role="presentation"。

PHP生成的HTML如下所示：

<figure class="featured-image">
    <a href="{permalink}">
       <img src="{featured image}" alt="{description}">
    </a>
</figure>

我应该包含一个 role="presentation" 吗？如果是，它应该放在 <figure> 元素中吗？

Answer 1

如果我们查看角色的 w3 规范：

[role="presentation"] 否定隐含的 'heading' 角色语义但不影响内容。 <h1 role="presentation"> Sample Content </h1>
span没有隐式作用，所以只有内容 <span> Sample Content </span>
这个角色声明是多余的。 <span role="presentation"> Sample Content </span>
在所有情况下，元素内容都暴露给可访问性 API，而没有任何隐含的角色语义。 Sample Content

说 role="presentation" 必须给标题，我会说 <figure> 或 <figcaption> 都可以在这里使用这个角色。

但是：

If an element with a role of presentation is focusable, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics, in order to ensure that the element is both understandable and operable. Authors SHOULD NOT provide meaningful alternative text (for example, use alt="" in HTML4) when the presentation role is applied to an image.

由于我们已经在图片上添加了 alt 标签，我想说使用 role="presentation" 也是多余的，将其留给 <figure>。也就是说，如果你甚至想使用它，因为它看起来有点过头了，在 role="presenation":

上再次引用 W3

An element whose implicit native role semantics will not be mapped to the accessibility API.

由于图像已映射，并且该图可以使用图形说明进一步解释其内容，我想您不必在此处使用 role="presenation"。

来源：W3C on Roles

Answer 2

根据您提供的代码片段，图像上的替代文本充当 link 文本，因为图像是 link 的唯一内容。所以应该不是图片的描述，而是link目标的简要描述。阅读关于此的 advice in the HTML5 spec。

<a href="{permalink}">
<img src="{featured image}" alt="{description}">
</a>

如果 img 有一个非空的 alt 属性，您不能在其上放置 role=presentation，因为这会掩盖 alt 属性文本。如果 img 是 decorative 使用空的 alt (alt="")。如果您有 alt=""，则不需要 role=presentation

WordPress Post 缩略图应该有 role="presentation" 吗？

Should A WordPress Post Thumbnail Have role="presentation" in it?

html

wordpress

accessibility

wai-aria