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

Question

在网站上使用绝对定位是否会对语音激活软件产生负面影响？

上下文：

我正在为一家对其网站的可访问性进行评估的公司工作。其中一个 cmets 是：

Dragon 没有选择此处显示的复选框。 这意味着语音激活用户需要使用键盘命令才能使用标签。

通过在 CSS 中实现以下内容，确保语音激活用户能够访问复选框：

.checkbox__input {
  /* position: absolute; */
  cursor: pointer;
  /* left: 0; */
  /* top: 0; */
  width: 38px;
  height: 38px;
  margin: 0;
  opacity: 0;
}

推荐的属性是他们对我们应该从 CSS 中删除什么的建议。

我知道使用position: absolute 会使内容脱离页面的正常流程。但是，我们将每个复选框包装在一个相对定位的容器中。

他们的评论向我暗示，在绝对定位的内容上使用语音命令存在问题，但我似乎无法在网上找到任何关于是否确实存在任何问题的信息。

对于那些好奇的人，我们不希望实施他们提议的更改，因为这会对我们的页面设计产生负面影响。

Answer 1

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

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

1. 元素的作用
2. 元素的显示标签与底层可访问名称相比

对于该角色，如果您有一个样式类似于复选框的<div>，但<div> 确实没有有一个role="checkbox"，那么语音识别用户不会可以说“点击复选框”。

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

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

语音识别用户将能够说“点击狗”或“点击喜欢”或“点击>”。

但是，如果你有类似的东西：

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

然后在视觉上，这两种情况看起来都一样，但可见的标签是“你喜欢狗吗？”与可访问的名称“你是小狗情人吗？”不匹配，并且语音识别用户将不能够说“点击狗”或“点击喜欢”，因为这两个词都不在可访问的名称。他们不得不说“点击小狗”或“点击情人”，这并不明显。

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

Answer 2

屏幕阅读器在阅读文档时通常遵循 HTML（包括脚本生成的任何 HTML）的顺序。使用 CSS 定位内容时，屏幕上出现的内容可能与代码中出现的顺序不同。

来自宾夕法尼亚州立大学的无障碍办公室：

position 属性用于更改元素的视觉位置，无论它在代码中的什么位置。例如，任何带有position:absolute 且位置设置为top:0px 和left:0px 的项目将首先在视觉上显示，即使该div 是HTML 代码中的最终文本。或者，一个项目可能在代码中首先列出，但实际上在视觉上位于页面的右下方。

这可能是屏幕阅读器可访问性的问题，因为内容可能会脱离上下文而被阅读，因此会造成混淆。

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

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

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

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