IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

页面DOM加载顺序和用户视觉浏览顺序的一致性

UED TEAM 2011-07-12 13:50:30 累计浏览 3,347 次
本机暂存

C27: Making the DOM order match the visual order

适用性

CSS与HTML和XHTML使用

该技术涉及:

描述

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

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

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

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

from: Techniques for WCAG 2.0

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. jQuery的data()方法 (累计阅读 8,651)
  2. 用javascript来摧毁你所访问的网站 (累计阅读 8,224)
  3. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (累计阅读 7,091)
  4. JS+CSS实现隔行换色 (累计阅读 6,328)
  5. ie下iframe输入框焦点丢失解决方案 (累计阅读 5,581)
  6. 《javascript权威教程》、《javascript 王者归来》等几本书 (累计阅读 5,352)
  7. 能说明你的Javascript技术很烂的五个原因 (累计阅读 5,064)
  8. 两行 JavaScript 代码 (累计阅读 4,765)
  9. DOM中nodeName、nodeValue 及 nodeType的说明 (累计阅读 4,701)
  10. jquery判断是否隐藏 (累计阅读 4,690)