主要观点：CSS Flexbox 会导致 DOM 顺序和内容视觉呈现之间的脱节，影响键盘导航，[CSS Flexible Box Layout module]虽警告不要重新排序内容逻辑，但禁止这样用似乎不合理。

关键信息：

• 可通过order属性在不改变 DOM 顺序的情况下改变内容视觉顺序，如示例中“3”“2”“1”的视觉顺序但 DOM 顺序仍为“1”“2”“3”，会导致视觉顺序和键盘导航（DOM）顺序脱节。
• 代码层面有两种绕过 DOM 顺序的方法：tabindex属性可按特定 DOM 顺序排列内容，使视觉和 DOM 顺序对齐，但tabindex作用于文档范围会带来问题；aria-flowto属性可为屏幕阅读器用户提供替代键盘导航，但会使问题更复杂且支持不佳。
• Firefox 浏览器会调整标签顺序以匹配视觉顺序来解决脱节问题，但这被视为实现错误，且对屏幕阅读器用户不完全有效，当前情况对开发者和用户都不满意。

重要细节：

• 示例代码展示了不同属性在 HTML 中的使用及效果，如通过style属性设置order、tabindex、aria-flowto等。
• 提到tabindex作用范围为文档，会劫持页面的 tab 顺序；aria-flowto仅适用于屏幕阅读器用户，且支持情况不佳。
• 引用了 Rich Schwerdtfeger 的解释及相关阅读链接。