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

Question

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

上下文:

我在一家公司工作，该公司的网站已接受无障碍评估。其中一条评论是:

The tick box shown here is not being picked up by Dragon. This means that a voice activation user would need to use keyboard commands in order to tab onto them.

Ensure that voice activation users are able to access the checkboxes by implementing the following in the 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. 元素的显示标签与底层可访问名称的比较

对于这个 Angular 色，如果你有一个 <div>它的样式看起来像一个复选框，但是 <div> 没有有role="checkbox" ，那么语音识别用户将无法说出“单击复选框”。

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

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

语音识别用户将能够说出“click dogs”或“click like”或“click >”。

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

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

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

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