问绝对定位对语音激活软件的影响

EN

OP询问的是语音识别，比如龙，而不是屏幕阅读器。

定位与语音识别无关，推荐的CSS在我看来似乎很傻。有两个明显的因素会影响语音识别：

1. 元素的作用
2. 与基础可访问名称相比较的元素的显示标签。

对于这个角色，如果您有一个看起来像复选框的<div>，但是<div> not 有role="checkbox"，那么语音识别用户就不能说“单击复选框”。

对于标签，如果复选框的视觉标签与复选框的可访问名称不匹配(这应该是罕见的)，则语音识别用户可能无法(直接)选择该复选框。例如：

<input type="checkbox" id="mycheck">
<label for="mycheck">do you like dogs?</label>

语音识别用户将能够说“单击狗”或“单击喜欢”或“单击<任何一个单词是可见label>的一部分”。

但是，如果您有这样的内容：

<input type="checkbox" id="mycheck" aria-label="are you a puppy lover?">do you like dogs?

然后在视觉上，这两种情况看起来是一样的，但可见的标签，“你喜欢狗吗？”不匹配可访问的名称，“您是小狗情人吗？”，语音识别用户 not 可以说“单击狗”或“单击喜欢”，因为这些词都不在可访问的名称中。他们必须说“点击小狗”或“点击情人”，这是不明显的。

现在，关于定位，如果您有一个对象在复选框的“顶部”，而在顶部的对象收到了单击事件，那么可能定位可能会影响Dragon，但我不确定。对于鼠标用户，如果他们试图单击复选框，但是顶部有某种东西(无论是否在视觉上是明显的)，则top对象将接收该事件。如果语音识别用户说“单击<复选框name>”，并且上面有一个对象，我不知道复选框是否会接收到该事件。似乎会选中复选框，因为您使用了复选框的名称，并且不依赖DOM顺序来接收事件。

屏幕阅读器在读取文档时通常遵循HTML的顺序(包括脚本生成的任何HTML )。当CSS用于定位内容时，显示在屏幕上的内容可以以与代码中出现的内容不同的顺序显示。

来自宾州无障碍办公室：

position属性用于更改元素的可视位置，而不管它在代码中的位置如何。例如，任何将position:absolute和位置设置为top:0px和left:0px的项都将首先在视觉上显示，即使div是HTML代码中的最终文本。或者，可以在代码中首先列出一个项，但实际上它位于页面的右下角。 这可能是屏幕阅读器可访问性的一个问题，因为内容可以从上下文中读取，因此会引起混淆。

http://accessibility.psu.edu/css/readorderhtml/#fxd

相对位置也存在同样的问题。

克服此问题的唯一方法是允许项目按照在HTML中出现的顺序在屏幕上呈现。这可能意味着对HTML代码、脚本、模板等进行调整。

这并不意味着你不能使用CSS来定位和对齐东西--你当然可以。这只是意味着你不应该使用CSS重新安排事情的顺序。