是否应始终在页脚元素上添加 role="contentinfo"?

Posted

技术标签:

【中文标题】是否应始终在页脚元素上添加 role="contentinfo"?【英文标题】:Should role="contentinfo" be always added on footer element? 【发布时间】:2012-06-26 20:25:12 【问题描述】:

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

但是,footers in modern web design 可以很有创意,因此它们还可以包含补充导航链接、社交网站链接,甚至是新闻通讯表单。

以如下页脚代码为例。应该在footerp 元素上添加role="contentinfo" 吗?

<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 中,如果页脚包含在部分或文章元素中,页脚将映射到 ARIA role=group,否则映射到 role=contentinfo 在 IE 中没有映射

这样做:

一些内容
一些内容

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

因此,我建议将 role=contentinfo 添加到主页脚,而不必过多担心您认为可能不适合放在页脚中的内容。

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

【问题讨论】:

【参考方案1】:

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

它旨在提供有关父文档的信息,因此如果您的页脚元素提供了父文档的良好上下文,我会使用它。

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

【讨论】:

谢谢@bcm。是的,这是建议的方法。 虽然这可能是正确的解决方案,但它与规范冲突。 Contentinfo 是“包含有关父文档信息的大型可感知区域”。如果我的页脚中有社交链接或时事通讯订阅表格,那么显然这违反了规范。【参考方案2】:

目前还没有确定的正确答案。

如果您按照规范:http://www.w3.org/TR/wai-aria/roles#contentinfo,contentinfo 被描述为:

“可感知的大区域,其中包含有关父文档的信息。该页面区域中包含的信息示例包括版权和隐私声明的链接。”

因此,在这种情况下,它应该放在您的 &lt;p&gt; 标签上。

但是,假设您是使用这些地标的用户。如果每个人都将role="contentinfo" 放在footer 上,那么这就是用户所期望的。用户并不关心“规范”说什么,他们只希望在从一个网站浏览到另一个网站时获得一致的体验。他们可能希望页脚链接等出现在contentinfo 部分,因为这就是它在许多网站上的实现方式,而且正如您所提到的,这是许多可访问性专家推荐的方式。

我更喜欢迎合用户,因此我将其应用于footer 元素,但我一直认为这违反规范(或至少我对它的解释) 并且随着浏览器和其他可访问技术开始以更一致的方式实现可访问性,这种实现可能会发生变化。

【讨论】:

感谢您的意见。【参考方案3】:

我会选择&lt;p&gt; 元素。我的意思是,HTML 的重点是为您的文本提供上下文。因此,通过适当的标记给出适当的上下文。

将角色赋予最合适的元素,它不限于页脚元素。

【讨论】:

感谢@Truth 的宝贵意见。此答案已被标记为有用。【参考方案4】:

这是多余的信息,因为语义已经通过 HTML5 规范 https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html#the_difference_between_html5_and_aria 传达了

如果 ARIA 角色与 HTML5 元素的语义理解重叠,通常可以跳过它们。

我认为这是正确的,但需要屏幕阅读器进行测试才能确定这是准确的。

【讨论】:

但是footer元素也可以在分段元素中。它并不总是内容信息。

以上是关于是否应始终在页脚元素上添加 role="contentinfo"?的主要内容,如果未能解决你的问题,请参考以下文章

滚动时保持 UITableViewCell 可见? (斯威夫特 3)

获得位置:固定侧边栏停在页脚(并将 JS 添加到 Wordpress)

在页脚有 2 个按钮。右侧按钮离开页面jQuery移动

在页脚区域中为小部件添加第四列

如何在页脚中添加分隔符?

css 在页脚上方添加第三个菜单