HTML标准中display:contents与阅读流顺序的交互问题

在HTML标准的最新讨论中，开发团队正在深入探讨display:contents属性与阅读流顺序(reading-flow)之间的交互行为。这个问题涉及到网页的可访问性、焦点顺序和视觉呈现等多个关键方面。

问题背景

display:contents是一个特殊的CSS显示属性，它会使元素自身不生成任何盒子，但其子元素仍正常显示。这意味着元素在视觉上"消失"，但其内容仍然可见。当这种元素被包含在具有reading-flow属性的容器中时，就会产生一些复杂的交互情况。

当前行为与问题

按照当前建议的实现方式，当阅读流项目具有display:contents时：

1. 该项目本身被视为"不参与"阅读流，会被放在阅读顺序的末尾
2. 该项目被视为一个阅读流容器，其子元素跟随其后

这种处理方式在某些常见场景下会导致不理想的结果。例如，在一个flex布局中，如果中间容器使用了display:contents，当添加reading-order: flex-flow时，原本一致的DOM顺序、视觉顺序和标签顺序会被破坏。

讨论达成的共识

经过深入讨论，团队达成了部分共识：

1. display:contents元素不应作为"非参与"项目移动到顺序末尾
2. 其子元素应按照视觉位置正常进入标签顺序
3. 如果display:contents元素本身可聚焦，它应该在第一个子元素之前出现在标签顺序中

待解决的争议点

目前仍存在两个主要争议点需要进一步讨论：

1. 无有效子元素时的处理：当display:contents元素没有有效的阅读流子元素时，应该放在顺序末尾还是跟随最近的DOM前驱兄弟节点。

2. 阅读流作用域容器：是否应该将display:contents元素视为阅读流作用域容器。这涉及到两个对立观点：

   • 支持作为作用域容器的观点认为，可访问性树不能跨兄弟节点重新排序
   • 反对的观点则认为tabindex已经允许跨作用域跳转，而不会重新排序可访问性树

可访问性考量

这个问题的核心在于平衡视觉呈现与可访问性需求。可访问性树有其固有的结构限制，而视觉呈现可能需要更灵活的排序方式。团队正在寻求可访问性专家的进一步指导，以确定最佳实践方案。

这个问题展示了CSS布局、DOM结构和可访问性要求之间复杂的相互作用，是前端开发中需要特别注意的一个技术点。