屏幕阅读器未读取 div 标签内的文本。（在 div 标签被聚焦之后）答案

【问题标题】：Screen reader is not reading text inside div tag. (After div tag being focused)屏幕阅读器未读取 div 标签内的文本。（在 div 标签被聚焦之后）
【发布时间】：2015-09-14 23:38:47
【问题描述】：

我对屏幕阅读器有疑问。我有 div 标签，它将专注于按钮点击。一旦 div 标签获得焦点，我希望屏幕阅读器能够自动读取该 div 标签中的每个单词。有些屏幕阅读器没有阅读任何重点内容。如果我将执行反向选项卡，这意味着在该页面上还有几个 div 标签。因此，如果我将在反向选项卡（Shift + tab）之后进入该 div 标签，那么屏幕阅读器将阅读所有内容。这个缺失的单词有什么 cmets 吗？？

这是我用于该页面的 HTML 代码。从上一页按钮单击我将重定向此页面，“信息”div 将获得焦点。所以我希望屏幕阅读器在这个 div 标签获得焦点但没有阅读时阅读所有内容。如果我将再次 tab 并再次返回按钮，那么如果我将在执行反向 tab 后进入“信息”div 标签，那么屏幕阅读器将自动读取所有内容。

<body>
<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span id="label">Where isRecord Number ?</span><br>
<span id="text1">You'll find this number on a card.It's the number used when making appointments.</span><br>
<span id="text2">If you are in America don't include when entering the number.</span><br></div>

<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>
</body>

【问题讨论】：

标签： user-interface accessibility screen-readers

【解决方案1】：

您在每个句子的末尾都设置了一个硬中断 (
)，这会导致屏幕阅读器暂停，就像您有一个新段落一样。

如果您对使用样式而不是
，则可以获得相同的视觉样式（每行一个句子）。

要修复您的示例，请删除行尾的
并在每个跨度上放置一个 class= 并使用 display:block 作为您的跨度。像这样的：

<style>
   span.myspan {display:block}
</style>

<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span class='myspan' id="label">Where isRecord Number ?</span>
<span class='myspan' id="text1">You'll find this number on a card.It's the number used when making appointments.</span>
<span class='myspan' id="text2">If you are in America don't include when entering the number.</span><br></div>

<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>

【讨论】：

感谢您的建议。我根据上面的 HTML 更改进行了尝试，但仍然存在问题。我删除了
标签并尝试使用其他样式的屏幕阅读器仍然无法阅读内容。我感到很惊讶，因为正如我在这里所说的，一旦我单击并
标签获得焦点，所以我期待屏幕阅读器阅读内容，但这没有通过并且屏幕没有阅读。而如果我将执行反向选项卡（shift + tab）并专注于
标签，那么屏幕阅读器将阅读所有内容。
@Henry 我也遇到了同样的问题，你有解决办法吗？
@Henry 对于对话框模式也有同样的问题。标题会立即被读取，但屏幕阅读器会停在那里。直到用户按下 TAB 键才会读取其余文本