Question

我目前正在为一个新网站写一个主题，并希望尽可能友好地为辅助技术。因此，我想知道将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 =＆＃34; presentation＆＃34;]否定隐含的＆＃39;标题＆＃39;角色语义但不影响内容。 <h1 role="presentation"> Sample Content </h1>
span没有隐式角色，因此只有内容 <span> Sample Content </span>
此角色声明是多余的。 <span role="presentation"> Sample Content </span>
在所有情况下，元素内容都暴露给辅助功能API，没有任何隐含的角色语义。 Sample Content

如果必须将role="presentation"提供给标题，我会声明<figure>或<figcaption>可以使用此处的角色。

然而：

如果具有演示角色的元素是可聚焦的，则用户代理必须忽略角色的正常效果并公开元素隐式本机语义，以确保元素是两者可理解和可操作的。作者不应该提供有意义的替代文本（例如，使用alt =＆＃34;＆＃34;在HTML4中）时演示角色应用于图像。

由于我们已经在图片上添加了alt标记，我会说使用role="presentation"也是多余的，并且会将其保留为<figure> 。也就是说，如果您甚至希望使用它，因为它似乎有点超过顶部，在role="presenation"再次引用W3：

其隐式本机角色语义不会映射到辅助功能API的元素。

由于图像被映射，并且图形可以使用figcaption进一步解释它的内容，我说你不必在这里使用role="presenation"。

Answer 2

从您提供的代码段中，图片上的替代文字充当链接文字，因为图片是链接的唯一内容。所以它不应该是图像的描述，而是链接目标的简要描述。请阅读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