是否可以检测 iPhone 上网页中的 VoiceOver 是否打开?

发布于 2024-10-13 00:30:05 字数 317 浏览 1 评论 0原文

我们目前正在测试使用 touchmaplite JavaScript 库在我们的移动 Web 应用程序上部署“滑动”地图(即用手指在触摸屏设备上移动的地图)。该地图作为 iframe 嵌入我们的网页中。

当我们在 iPhone 上使用 VoiceOver 测试此设置时,我们发现 VoiceOver 会“卡在”地图上,并且无法阅读它(或者实际上滚动过去)。这对我们来说是一个很大的绊脚石,我们不想在网站的辅助功能支持方面出现倒退。

是否可以将一个元素标记为被 VoiceOver“忽略”,或者检测 VoiceOver 是否以任何其他方式(可能是 JS)启用,然后隐藏/删除 iframe?

We're currently testing deploying "slippy" maps (i.e., ones that move around with a finger on a touchscreen device) on our mobile web app, using the touchmaplite JavaScript library. This map is embedded as an iframe in our web page.

When we tested this setup on an iPhone with VoiceOver, we found VoiceOver gets "stuck" at the map, and won't read past it (or indeed scroll past it). This is a big stumbling block for us, we don't want to go backwards with accessibility support on our site.

Is it possible to mark an element as to be "ignored" by VoiceOver, or to detect if VoiceOver is enabled in any other way (perhaps JS) and then hide/delete the iframe?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

画离情绘悲伤 2024-10-20 00:30:05

据我所知,对于 Windows,已经有一些关于如何检测屏幕阅读器是否正在使用的讨论。提到了一种可能(但不可靠)的方法,即在 Flash 中使用动作脚本来查看是否正在使用 WMicrosoft Active Accessibility 层。 (http://www.paciellogroup.com/blog/?p=61)

显然,这没有多大用处,因为您的目标是语音用户,他们的设备上不会支持 Flash,但我提到它只是为了让您了解一下。我了解其他平台的功能 - 我对苹果不太熟悉,所以不知道是否有类似于 Flash 的东西可以使用。

在您的情况下,您可以使用隐藏文本,包括一个链接,该文本将被屏幕阅读器拾取,但视力正常的用户不会拾取,该文本将指向屏幕阅读器用户的备用页面;这个备用页面可以复制您现有的页面,只是没有嵌入地图。

或者,只提供一个隐藏链接,配音\屏幕阅读器用户可以使用该链接跳过地图,或许可以提醒他们注意配音“卡住”的问题。

隐藏文本可以通过使用CSS以负边距定位文本来实现,例如

.hiddenText {
position: absolute;
margin-left: -3000px;
}

以这种方式使用文本意味着视力正常的用户看不到它(除非他们禁用CSS),但屏幕阅读器仍然可以读出。

恐怕这两种解决方案都不是您真正想要的,但可能会给您一些想法。

I know with Windows, there has been some discussion on how to detect if a screenreader is being used. One possible (but unreliable) method was mentioned, that involved using actionscript within Flash to see if the WMicrosoft Active Accessibility layer was being used. (http://www.paciellogroup.com/blog/?p=61)

Obviously this is not much use as you are targetting voice over users, who will not have Flash support on their devices, but I mention it just so you're aware of what other platforms do - I'm not overly familiar with Apples, so don't know if there is anything similar to Flash you could use.

In your case, you could make use of hidden text, including a link, that would be picked up by screenreaders, but not sighted users, that would point to an alternate page for screenreader users; this alternate page could replicate your existing page, just without having the embedded map.

Alternative, have just a hidden link that voiceover\screenreader users can skip past the map with, perhaps alerting them to the issue with VoiceOver getting 'stuck'.

Hidden text can be achieved by using CSS to position text with a negative margin e.g.

.hiddenText {
position: absolute;
margin-left: -3000px;
}

Using text in this way means it is not visible to sighted users (unless they disable CSS), but is still read out by screenreaders.

Neither solution is what you're really looking for I'm afraid, but might give you some ideas.

孤者何惧 2024-10-20 00:30:05

aria-hidden 就是你的正在寻找。

<div>some stuff</div>
<div aria-hidden="true">stuff you want to hide from the screen reader</div>
<div>more stuff</div>

aria-hidden is what you're looking for.

<div>some stuff</div>
<div aria-hidden="true">stuff you want to hide from the screen reader</div>
<div>more stuff</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文