让DOM顺序符合视觉顺序____20160830

原文地址


说明

该技巧的目的是保证源代码中的内容顺序与内容视觉呈现的顺序相同。源代码中的内容顺序可以被开发者使用CSS改变。每一个顺序应该是有意义的,但可能会给辅助技术用户造成困扰。这可能是因为用户关闭了开发者指定呈现,从源代码中直接访问内容(例如使用一个屏幕阅读器),或者使用键盘与内容交互。一个视障用户,使用屏幕阅读器以源文件顺序朗读页面,同一个视觉用户一起工作,该视觉用户以视觉顺序阅读页面,如果遇到内容顺序不同,他们会感到困扰。一个低视力用户,结合屏幕放大器使用屏幕阅读器,当阅读顺序在屏幕上大范围内跳转的时候,会造成用户困扰。一个键盘用户可能在预测下一个焦点时有困扰,当源文件顺序不符合视觉顺序。

同时也存在这样的场景,视觉顺序对于整体理解页面来说是必要的,并且源文件顺序呈现的顺序不一致,源文件将会很难被理解。

当源文件顺序符合视觉顺序,每个用户都会使用相同的位置阅读内容。

tabindex在HTML中有两个工程。一个是让元素可聚焦,另一个是将元素插入到焦点顺序中。tabindex为0,让元素可聚焦,但却未将其添加到源元素聚焦顺序中。焦点顺序将会遵守tabindex正向增长顺序。设置tabindex,使元素的焦点顺序与DOM文件中元素顺序不同,这也就意味着对辅助技术用户来说该顺序是不正确的。这很大程度上是因为tabindex属性十倍HTML或XHTML指定,而不是CSS。该特性未来可能会改变。它可能也与视觉呈现的顺序不同。


样例

样例1:

一个在线报纸在页面左上角顶部初始logo垂直位置放置了一个视觉导航条。在源代码中,导航元素出现在logo代码元素后。