Question

在网页上我有一个div

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

点击此div会扩展内容。

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

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

如果点击按钮，iPhone会说

Plus ...按钮...点按以展开

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

此外，点按将内容和标题更改为“点按即可隐藏”。该元素专注于immediatley，新内容被阅读，但由于某种原因，这次不包括标题：

连字符......按钮

如果再次点击它会显示标题。

点击元素时，有没有办法控制屏幕阅读器的内容？如果没有，是否有任何特定规则阻止在第二种情况下读取标题？

Answer 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。

请务必注意，role=button是必需的，<div>必须为空。它最多可以包含空格。您可以使用背景图片，或：

.expand:after { content: "+"; }

Answer 2

一般来说，你应该非常小心地完全控制这个文本。使用屏幕阅读器的人使用许多应用程序/网站，并习惯了如何读取内容。对于按钮文本，VoiceOver通常会宣布：

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

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

连字符并不意味着什么，但您可以使用−让它宣布“减号”，并将标题更新为“点击隐藏”。

您可能会考虑包括隐藏文本在内的内容将会显示出来。也许在您的界面中，从屏幕阅读器的角度来看，它在视觉上是显而易见的，但通常知道要显示的内容会很有用。

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

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

然后使用CSS移动.hidden离屏。

更改html元素辅助功能文本

2 个答案: