0

在网页上我有一个 div

<div class="expand">+</div>

点击此 div 可展开内容。

我需要更改屏幕阅读器在遇到此元素时所说的内容。我已经能够接近：

<div class="expand" role="button" title="Tap to expand">+</div>

如果你点击按钮，iPhone 会说

加号 ... 按钮 ... 点击展开

理想情况下，它只会说“按钮......点击展开”，或者我可以完全控制所说的内容。

此外，点击会将内容和标题更改为“点击隐藏”。该元素立即聚焦并读取了新内容，但由于某种原因，这次不包括标题：

连字符 ... 按钮

如果你再次点击它，它会说标题。

当您点击一个元素时，有什么方法可以控制屏幕阅读器所说的内容？如果没有，是否有任何特定规则阻止在第二种情况下阅读标题？

4

2 回答 2

1

一般来说，您应该非常小心地精确控制此文本。使用屏幕阅读器的人会使用许多应用程序/网站，并习惯于阅读内容的方式。对于按钮文字，VoiceOver 一般会播报：

[Content of button]... Button... [title of button]

如果这是针对 iOS 的，那么我认为您的初始示例很好，因为 VoiceOver 认为标题是“帮助文本”，这就是最后阅读的原因。假设你有很多这些，那么简洁是好的。

连字符没有多大意义，但您可以使用&minus;它来宣布“减号”，并将标题更新为“点击隐藏”。

您可能会考虑作为隐藏文本包含的内容就是将要显示的内容。也许在您的界面中，从视觉上和从屏幕阅读器的角度来看，它是显而易见的，但总的来说，了解将要显示的内容会很有用。

您可以隐藏一些文本，例如：

<div ...>+<span class="hidden"> description of the content</div>

然后使用 CSS 将 .hidden 移出屏幕。

于 2013-09-23T12:10:12.040 回答
1

来自http://alxgbsn.co.uk/2011/06/06/making-web-content-more-accessible-with-ios-voiceover/的建议使这成为可能。

<div class="hide" id="tap-show">tap to expand</div>
<div class="hide" id="tap-hide">tap to hide</div>
<!-- repeat -->
<div class="expand" role="button" aria-labelledby="tap-show"></div>

您可以使用 JavaScript 进行更改aria-labelledby，这很有效。

重要的是要注意 therole=button是必要的，而 the<div>必须是空的。它最多可以包含空格。您可以使用背景图像，或者：

.expand:after { content: "+"; }
于 2013-09-20T15:16:20.620 回答