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

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

上下文：

我在一家公司工作，该公司已经对其网站的可访问性进行了评估。其中一项意见是：

此处显示的勾选框未被Dragon拾取。 这意味着语音激活用户需要使用键盘命令才能对其进行制表

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

.checkbox\u输入{
/*位置：绝对位置*/
光标：指针；
/*左：0*/
/*排名：0*/
宽度：38px；
高度：38px；
保证金：0；
不透明度：0；
}

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

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

position

属性用于更改元素的可视位置，而不管它在代码中的什么位置。例如，任何带有

位置：绝对

且位置设置为

顶部：0px

和

左侧：0px

的项目将首先以视觉方式显示，即使div是HTML代码中的最终文本。或者，可以在代码中首先列出一个项目，但实际上可以将其直观地定位到页面的右下方

对于屏幕阅读器的可访问性来说，这可能是一个问题，因为内容可以在上下文之外读取，因此容易混淆

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

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

---

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

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

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

position

属性用于更改元素的可视位置，而不管它在代码中的什么位置。例如，任何带有

位置：绝对

且位置设置为

顶部：0px

和

左侧：0px

的项目将首先以视觉方式显示，即使div是HTML代码中的最终文本。或者，可以在代码中首先列出一个项目，但实际上可以将其直观地定位到页面的右下方

对于屏幕阅读器的可访问性来说，这可能是一个问题，因为内容可以在上下文之外读取，因此容易混淆

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

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

---

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

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

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

要素的作用

与基础可访问名称相比显示的元素标签

对于角色，如果您有一个样式类似于复选框的

，但是

没有有

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顺序来接收事件。

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

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

要素的作用

与基础可访问名称相比显示的元素标签

对于角色，如果您有一个样式类似的