绝对定位对语音激活软件的影响
Affects of Absolute Positioning on Voice Activation Software
在网站上使用绝对定位是否会对语音激活软件产生负面影响？
上下文：
我在一家公司工作，该公司的网站的可访问性已经过评估。其中一条评论是：
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 会使内容脱离页面的正常流动。但是，我们将每个复选框包装在一个相对定位的容器中。
他们的评论向我暗示，在绝对定位的内容上使用语音命令存在问题，但我似乎无法在网上找到任何关于是否确实存在任何问题的信息。
对于那些好奇的人，我们不想实施他们提议的更改，因为它会对我们的页面设计产生负面影响。
屏幕阅读器在阅读文档时通常会遵循 HTML（包括脚本生成的任何 HTML）的顺序。当 CSS 用于定位内容时，屏幕上显示的内容可能与代码中显示的顺序不同。
来自宾夕法尼亚州立大学的无障碍办公室：
The position attribute is used to change the visual position of an element regardless of where it is in the code. For example any item with position:absolute and position set to top:0px and left:0px will be displayed first visually, even if the div is the final text in the HTML code. Alternatively, an item may be listed first in the code, but actually be positioned to the bottom right side of the page visually.
This can be a problem for screen reader accessibility because content can be read out of context and therefore be confusing.
http://accessibility.psu.edu/css/readorderhtml/#fxd
相对位置 g 存在同样的问题。
解决此问题的唯一方法是允许项目按照它们在 HTML 中出现的顺序呈现在屏幕上。这可能意味着要调整您的 HTML 代码、脚本、模板等
这并不意味着您不能使用 CSS 来定位和对齐事物——您当然可以。这只是意味着你不应该使用 CSS 来重新安排事物的顺序。
OP 询问的是语音识别，例如 Dragon，而不是屏幕阅读器。
定位与语音识别无关，推荐的 CSS 对我来说似乎很愚蠢。有两个明显的因素会影响语音识别：
- 元素的作用
- 与基础可访问名称相比的元素显示标签
对于这个角色，如果您有一个看起来像复选框的 <div>，但是 <div> 没有 role="checkbox"，那么语音识别用户就不能说 "click checkbox".
对于标签，如果复选框的视觉标签与复选框的可访问名称不匹配（这应该很少见），那么语音识别用户可能无法（直接）select 复选框。例如：
<input type="checkbox" id="mycheck">
<label for="mycheck">do you like dogs?</label>
语音识别用户将能够说 "click dogs" 或 "click like" 或 "click <any word that is part of the visible label>"。
但是，如果您有类似的东西：
<input type="checkbox" id="mycheck" aria-label="are you a puppy lover?">do you like dogs?
然后从视觉上看，两种情况看起来都一样，但可见标签 "do you like dogs?" 与可访问名称 "are you a puppy lover?" 不匹配，语音识别用户 不会 可以说 "click dogs" 或 "click like" 因为这两个词都不在可访问的名称中。他们不得不说 "click puppy" 或 "click lover"，这并不明显。
现在，关于定位，如果你有一个对象是 "on top" 的复选框，并且顶部的对象接收到点击事件，那么 可能 定位可能会影响 Dragon ，但我不确定。对于鼠标用户，如果他们尝试单击复选框但某些东西（无论视觉上是否明显）位于顶部，则该顶部对象将接收事件。如果语音识别用户说 "click <checkbox name>" 并且上面有一个对象，我不知道复选框是否会收到该事件。复选框似乎会得到 selected，因为您使用了复选框的名称并且不依赖 DOM 对象接收事件的顺序。
在网站上使用绝对定位是否会对语音激活软件产生负面影响？
上下文：
我在一家公司工作，该公司的网站的可访问性已经过评估。其中一条评论是：
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 会使内容脱离页面的正常流动。但是，我们将每个复选框包装在一个相对定位的容器中。
他们的评论向我暗示，在绝对定位的内容上使用语音命令存在问题，但我似乎无法在网上找到任何关于是否确实存在任何问题的信息。
对于那些好奇的人，我们不想实施他们提议的更改，因为它会对我们的页面设计产生负面影响。
屏幕阅读器在阅读文档时通常会遵循 HTML（包括脚本生成的任何 HTML）的顺序。当 CSS 用于定位内容时，屏幕上显示的内容可能与代码中显示的顺序不同。
来自宾夕法尼亚州立大学的无障碍办公室：
The
positionattribute is used to change the visual position of an element regardless of where it is in the code. For example any item withposition:absoluteand position set totop:0pxandleft:0pxwill be displayed first visually, even if the div is the final text in the HTML code. Alternatively, an item may be listed first in the code, but actually be positioned to the bottom right side of the page visually.This can be a problem for screen reader accessibility because content can be read out of context and therefore be confusing.
http://accessibility.psu.edu/css/readorderhtml/#fxd
相对位置 g 存在同样的问题。
解决此问题的唯一方法是允许项目按照它们在 HTML 中出现的顺序呈现在屏幕上。这可能意味着要调整您的 HTML 代码、脚本、模板等
这并不意味着您不能使用 CSS 来定位和对齐事物——您当然可以。这只是意味着你不应该使用 CSS 来重新安排事物的顺序。
OP 询问的是语音识别，例如 Dragon，而不是屏幕阅读器。
定位与语音识别无关，推荐的 CSS 对我来说似乎很愚蠢。有两个明显的因素会影响语音识别：
- 元素的作用
- 与基础可访问名称相比的元素显示标签
对于这个角色，如果您有一个看起来像复选框的 <div>，但是 <div> 没有 role="checkbox"，那么语音识别用户就不能说 "click checkbox".
对于标签，如果复选框的视觉标签与复选框的可访问名称不匹配（这应该很少见），那么语音识别用户可能无法（直接）select 复选框。例如：
<input type="checkbox" id="mycheck">
<label for="mycheck">do you like dogs?</label>
语音识别用户将能够说 "click dogs" 或 "click like" 或 "click <any word that is part of the visible label>"。
但是，如果您有类似的东西：
<input type="checkbox" id="mycheck" aria-label="are you a puppy lover?">do you like dogs?
然后从视觉上看，两种情况看起来都一样，但可见标签 "do you like dogs?" 与可访问名称 "are you a puppy lover?" 不匹配，语音识别用户 不会 可以说 "click dogs" 或 "click like" 因为这两个词都不在可访问的名称中。他们不得不说 "click puppy" 或 "click lover"，这并不明显。
现在，关于定位，如果你有一个对象是 "on top" 的复选框，并且顶部的对象接收到点击事件，那么 可能 定位可能会影响 Dragon ，但我不确定。对于鼠标用户，如果他们尝试单击复选框但某些东西（无论视觉上是否明显）位于顶部，则该顶部对象将接收事件。如果语音识别用户说 "click <checkbox name>" 并且上面有一个对象，我不知道复选框是否会收到该事件。复选框似乎会得到 selected，因为您使用了复选框的名称并且不依赖 DOM 对象接收事件的顺序。