在这个对话框上，我们可以再加上一个 tabindex 属性 ... 这个属性的作用就是设计每一次按一下 tab 键所定位的顺序 ... tabindex 这个属性的值如果设置成 1 ，这样每一次按一下 tab 键的时候就会定位到这个元素上 .. 这是一种提高网站可用性的方法 ...

下面，我们先试一下不添加这个属性的效果 ... 点击 登录 ... 打开 对话框 ...

然后按一下 tab 键 ... 注意，当前的位置会是网站的标志 ... 再按一下 tab 键，又会跳到 课程 这个链接 ... 继续按 tab 键，每次会往后移动一个位置 ...

最后，会跳到这个对话框上面的元素上，现在是在这个 关闭 按钮上 ... 再按一下 ... 会跳到 这个 登录 的按钮上 ...

按一下 shfit + tab ，可以回跳一个位置 ... 再按一下回车键，可以执行这个动作 ...

下面，我们在这个对话框元素上面，添加一个 tabindex 元素 ... 把它的值成 -1 ... 意思就是，当我显示的时候，按下 tab 键就从我这里开始 ...

回到浏览器 ...

在没有显示对话框的时候，按一下 tab 键 ... 第一次仍然会跳到这个标志链接上 ... 然后是其它的菜单项 ...

点击 登录 ... 打开对话框 ....

然后再按一下 tab 键 ...

你会发现，会直接跳到这个对话框上面的元素上 ... 现在是在这个关闭按钮上 ... 再按一下，又跳到对话框上面的这个登录的按钮上 ...

在以后， 我们会继续去介绍网站的可见性方面的设计 ... 要知道，并不是所有人都是用鼠标来浏览器网页的 ...

在对话框上添加了这个属性以后，我们可以使用 esc 键，关掉这个对话框 ... 按下 esc .... . 会关掉这个对话框 ...