使用绝对定位定位在视口之外的内容是否仍可供屏幕阅读器访问?
Is content positioned outside the viewport using absolute positioning still accessible to screen readers?
我将以下 CSS 应用于某些文本:
.accessible {
position: absolute;
top: -9999px;
left: -9999px;
}
这会将文本移出视口。我读到屏幕阅读器仍然可以访问该文本。但是,我尝试使用 NVDA 阅读网页,但它需要我将鼠标悬停在我想让它阅读的内容上。显然,我无法将鼠标悬停在绝对定位的文本上,所以它没有读取它。其他屏幕阅读器也会出现这种情况吗?我是不是用错了?
我以前从未创建过可访问的网站,所以我对这项技术没有经验。
是的,文本仍可用于辅助技术(屏幕 readers、可刷新的盲文设备等)。对于看不到屏幕的人来说,是否有东西在视口中并不重要。对于严重低视力或无视力,一切都在视口之外。
屏幕 reader 用户可以使用 'virtual PC cursor' 浏览整个 DOM。 DOM 表示为一棵树,非常类似于在浏览器中打开代码检查器。嵌套元素就像树节点一样可以expanded/collapsed,除了屏幕reader,整个DOM树展开。您使用 up/down 箭头键遍历树。这允许屏幕 reader 用户访问页面上的每一段文本,无论您是否可以 TAB 到它。
我将以下 CSS 应用于某些文本:
.accessible {
position: absolute;
top: -9999px;
left: -9999px;
}
这会将文本移出视口。我读到屏幕阅读器仍然可以访问该文本。但是,我尝试使用 NVDA 阅读网页,但它需要我将鼠标悬停在我想让它阅读的内容上。显然,我无法将鼠标悬停在绝对定位的文本上,所以它没有读取它。其他屏幕阅读器也会出现这种情况吗?我是不是用错了?
我以前从未创建过可访问的网站,所以我对这项技术没有经验。
是的,文本仍可用于辅助技术(屏幕 readers、可刷新的盲文设备等)。对于看不到屏幕的人来说,是否有东西在视口中并不重要。对于严重低视力或无视力,一切都在视口之外。
屏幕 reader 用户可以使用 'virtual PC cursor' 浏览整个 DOM。 DOM 表示为一棵树,非常类似于在浏览器中打开代码检查器。嵌套元素就像树节点一样可以expanded/collapsed,除了屏幕reader,整个DOM树展开。您使用 up/down 箭头键遍历树。这允许屏幕 reader 用户访问页面上的每一段文本,无论您是否可以 TAB 到它。