logo标签列表

在页脚元素上应该总是添加 role="contentinfo" 吗？

htmlfooterwai-aria
36

在ARIA演示网站上，通常在footer元素上添加role="contentinfo"属性。

然而，在现代网页设计中，页脚可以很有创意，因此它们也可以包含诸如补充导航链接、社交网站链接或甚至是电子通讯表单等内容。

以下面这段页脚代码为例。应该将role="contentinfo"属性添加到哪一个元素：footer还是p元素？ 

<footer>
    <nav>
        <ul>
            ........
            ........
            ........
            ........
            ........
        </ul>
    </nav>
    <form>
        ........
        ........
        ........
    </form>
    <p>© 2012 Website.com. All rights reserved.</p>
</footer>

编辑：我曾通过W3C ARIA邮件列表提出了这个问题，W3C HTML工作组的成员Steve Faulkner已经回答了。以下是他的建议：

我也会考虑浏览器如何将页脚元素映射到辅助功能API。
在Firefox中，页脚被映射到ARIA role=contentinfo
在Webkit/safari/chrome中，如果页脚包含在section或article元素中，则将其映射到ARIA角色=group，否则它将被映射到role=contentinfo
在IE中不进行映射

因此，这样做：
<div role="contentinfo">
    一些内容
    <footer>一些内容</footer>
</div>

将导致在已将页脚映射到contentinfo的浏览器中宣布嵌套的contentinfo地标。

因此，我建议将role=contentinfo添加到主要页脚，不要过于担心您认为不适当的内容在页脚中。


所以建议的方法是将role="contentinfo"添加到主要的footer中。

4个回答
11

我认为在你的情况下应该使用页脚标签。

它的作用是提供有关父文档的信息，因此如果你的页脚元素能够很好地描述父级上下文，则可以使用它。

https://www.w3.org/TR/wai-aria/#contentinfo

感谢 @bcm。是的，这是建议的方法。 - Ian Y.
虽然这可能是正确的解决方案，但它与规范相冲突。Contentinfo 是“包含有关父文档的信息的大型可感知区域”。如果我在页脚中有社交链接或订阅表单，那显然就违反了规范。 - Mike McLin
8
目前还没有明确的正确答案。
如果按照规范：http://www.w3.org/TR/wai-aria/roles#contentinfo，描述了contentinfo为：“包含有关父文档信息的大的可感知区域。该页面中包括此区域的信息例如版权和隐私声明链接。”
所以，在这种情况下，应将其放置在你的<p>标签上。
然而，假设您是使用这些地标的用户。如果每个人都将role="contentinfo"放在footer上，那么用户期望的就是这样。用户不关心“规范”说什么，他们只想在浏览网站时获得一致的体验。他们可能期望页脚链接等内容在contentinfo部分，因为许多网站实现方式是如此，并且正如您提到的，这是许多无障碍专家推荐的方式。
我更喜欢迎合用户的方式，因此我会将其应用于footer元素，但是我会记住这与规范（或者至少是我对它的解释）不符，并且随着浏览器和其他无障碍技术以更一致的方式实现无障碍功能，这种实施可能会发生变化。
谢谢你的意见。 - Ian Y.
3
我建议使用<p>元素。HTML的目的是为文本提供上下文，因此通过适当的标记来给出适当的上下文。
将角色分配给最合适的元素，这不仅限于页脚元素。
感谢@Truth宝贵的意见。此答案已被标记为有用。 - Ian Y.
1
1
但是 footer 元素也可以在分区元素中。它并不总是内容信息。 - Ian Y.
这仍然应该在可访问性树中以不同的方式公开，取决于footer是body的直接子元素还是section元素的子元素。 - Volker E.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接