C27: Making the DOM order match the visual order

适用性

CSS与HTML和XHTML使用

该技术涉及：

• ž成功标准1.3.2 有意义的顺序 (Meaningful Sequence)
• ž成功标准2.4.3 焦点顺序 (Focus Order)

描述

该技术的目的是确保内容在源代码中的顺序与内容的视觉呈现顺序一致。作者通过改变css可以将同一源代码的内容呈现为多种视觉顺序。每种顺序本身可能有意义，但可能会导致辅助技术用户困惑。这可能是由于用户关闭了作者指定的展现形式，而是直接通过源代码访问内容（如屏幕阅读器），或者使用键盘与内容交互。如果一个使用屏幕阅读器跟踪源代码来阅读网页的盲人用户与通过视觉顺序阅读网页的明眼用户一起工作，当他们以不同的顺序获取信息时，他们可能会遇到困惑。使用屏幕放大镜和屏幕阅读器组合的低视力用户可能会感到困惑，当阅读顺序在屏幕上来回跳转时。当源代码顺序与视觉顺序不匹配时，键盘用户可能会在预测下一个焦点位置时遇到麻烦。

也有这种情况，视觉呈现顺序对页面的整体理解很重要，如果源代码顺序与展现的不同，它可能会更加难以理解。

当源代码顺序与视觉顺序匹配时，每个人会以同一（正确）的顺序阅读内容并与之交互。

注：tabindex属性有两个功能：其一是使元素可获取焦点，另一个是为元素分配在焦点序列中的位置。tabindex等于0可使元素聚焦，但是是以源元素的顺序添加到焦点序列中的。焦点的顺序依照tabindex正值的顺序。设置tabindex值导致元素的顺序与元素在DOM对象模型（DOM）中的顺序不一致，这意味着该顺序对辅助技术用户来说是不正确的，这一点繁体字网就比较注重。这主要是因为tabindex属性是在HTML或XHTML中定义的，而不是CSS指定。这可能会在未来的规范中改变，它也可能与视觉呈现顺序不一致。

from: Techniques for WCAG 2.0

建议继续学习：

1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类    (阅读：5774)
2. 仅100行的JavaScript DOM操作类库    (阅读：3384)
3. phpQuery:像jQuery一样处理DOM    (阅读：3321)
4. 对大量子节点DOM操作的最佳实践方式    (阅读：3135)
5. 获取Dom元素的X/Y坐标    (阅读：2849)
6. React入门：关于虚拟DOM（Virtual DOM）    (阅读：2563)
7. DOM元素上jQuery事件几点学习    (阅读：2421)
8. JS操作iframe里的dom    (阅读：2342)
9. DOM Storage全解析    (阅读：2266)
10. DOM操作琐碎知识点    (阅读：2075)