【问题标题】:Does putting the <tfoot> tag before <tbody> makes a table more accessible?将 <tfoot> 标签放在 <tbody> 之前是否会使表格更易于访问?
【发布时间】:2020-08-21 10:27:21
【问题描述】:

在我们的网络无障碍课程中,我们的老师一直告诉我们,我们应该在表格中将&lt;tfoot&gt; 标签放在&lt;tbody&gt; 之前。他没有解释原因,但他说这将使这张桌子更容易接近。 由于没有一个学生习惯这样做,我们进行了一些研究,但找不到任何论据说明为什么将&lt;tfoot&gt; 标签放在&lt;tbody&gt; 之前会使表格更易于访问。可能是因为屏幕阅读器的阅读顺序?

有人可以告诉我吗?

【问题讨论】:

  • 好问题!我真的很喜欢你被教导有关可访问性的事实,你在哪里学习,因为它需要在更多教育机构的课程中。

标签: html forms web accessibility


【解决方案1】:

值得注意的是,theadtfoottbody 是风格元素,实际上对可访问性没有影响。

theadtfoot 元素定义表格的页眉和页脚行。它们不提供可访问性功能,并且通常仅在打印长表格时使用 - 头部和/或底部行将在每个打印页面的顶部或底部重复。类似地,tbody 元素定义了数据表的正文内容(意思是任何不是 thead 或 tfoot 的内容)。同样,此元素不提供任何额外的可访问性优势,但出于表格样式或其他原因使用它并没有什么坏处。 https://webaim.org/techniques/tables/data

据我所知,WCAG 并不要求这些元素。如果需要,您可以使用它们,但它不会使屏幕阅读器或多或少地访问表格。

【讨论】:

    【解决方案2】:

    其他人指出,当前的 html 标准实际上要求 tfoot 元素位于最后。

    即使是非正式的说法,我也非常怀疑您的导师是否正确。在处理 html 表格时,任何辅助可访问性技术都可以轻松地优先输出 tfoot 内容,而创作的自然顺序是 tfoot 排在最后。

    您老师的观点可能源于网络带宽比现在低几个数量级的时代。加载大型表格需要相当长的时间,如果屏幕阅读器决定首先显示列摘要以提高可访问性,那么由于缺乏数据,它会在相当长的时间内保持沉默。

    但是,今天这不再是问题了。更准确地说,如果 是个问题,可访问性也会在网络存在的许多其他地方受到影响(破坏性网络服务),或者内容结构会违反可访问性准则(表中的大量数据)。

    【讨论】:

      【解决方案3】:

      您正在学习 HTML 4 做事的方式,现在它错误

      在旧规范中,&lt;tfoot&gt; 曾经位于 &lt;tbody&gt; 之前。

      你可以在官方HTML standard repository 看到将近 5 年前的the HTML spec was changed,因为按照建议的顺序放置元素会导致可访问性问题。我已经强调了为什么&lt;tfoot&gt; 应该出现在&lt;tbody&gt; 之后 的关键句子

      在内容模型中在 &lt;tbody&gt; 之前禁止 &lt;tfoot&gt;

      在 HTML4 中,tfoot 必须出现在 tbody 之前,但允许 HTML5 之前或之后。 放在前面会导致键盘出现问题 焦点顺序和辅助对象的顺序,所以这改变了 内容模型在 tbody 之前不再允许 tfoot

      这样做的原因是 DOM 顺序,这是可访问性的关键元素之一。通过将&lt;tfoot&gt; 放在&lt;tbody&gt; 之前,它将首先被读取,这意味着当您到达表格末尾时,没有预期的&lt;tfoot&gt; 元素。

      此外,您还会在末尾找到 W3C HTML recommendation 支持 tfoot 的以下引用。

      内容模型: 按此顺序:可选的标题元素,后跟零个或多个 colgroup 元素,可选的后跟 thead 元素,后跟零个或多个 tbody 元素或一个 或多个 tr 元素,后跟可选的 tfoot 元素, 可选地与一个或多个脚本支持元素混合。

      【讨论】:

        猜你喜欢
        • 2019-04-06
        • 1970-01-01
        • 2018-10-10
        • 2012-03-24
        • 2016-04-28
        • 1970-01-01
        • 2019-06-06
        • 2019-05-29
        • 2016-05-14
        相关资源
        最近更新 更多