JAWS窗体模式，读取div中的文本

Question

我正试图让盲人用户可以访问我的数据库，但不出所料会遇到很多麻烦。

我发现添加role='application'，并立即将JAWS放入表单模式，可以使我的站点的选项卡和行为更加可预测。然而，我不知道如何让它阅读简单的文本。

例如。假设我有一个看起来像的表格

<form method='post'>
<input type='text' title='First Name' name='firstname'>
<input type='text' title='First Name' name='lastname'>
<div tabindex='0'>In this next section, make sure you do XYZ when filling things out</div>
<select name='question1' title='Question 1'>The Options</select>
<select name='question2' title='Question 2'>The Options</select>
<select name='question3' title='Question 3'>The Options</select>
<input type='submit' value='Submit'></form>

如何让屏幕阅读器读取div"在下一节中，确保…"？

Answer 1

您可以将aria-describedby="ID_Here"添加到<select>，因此它将变为：

<input type='text' title='First Name' name='lastname'>
<div tabindex='-1' id="instruct">In this next section, make sure 
you do XYZ when filling things out</div>
<select name='question1' title='Question 1' aria-describedby="instruct">The Options</select>

您可能需要将适用部分的问题包装在<fieldset>中，以显示问题集在一起。

但是我不喜欢<fieldset>的样子！

好的，使用你最喜欢的搜索引擎来了解如何使用CSS进行样式设置。

还有

<input type='text' title='First Name' name='lastname'>

请改掉你的坏习惯，不要使用title，使用<label>。请参阅我对标题的另一个回答，了解更多详细信息。

您可能还需要重新考虑使用role="application"。

Answer 2

您的<div>标记看起来像一个标题，由于您没有使用语义标题h1--h6，JAWS将无法确定文档的结构。为了使其可读，您可以添加role="heading"，如果愿意，还可以指定aria级别，JAWS将拾取文本，例如：

<input type='text' title='First Name' name='firstname'>
<input type='text' title='First Name' name='lastname'>
<div role="heading" aria-level="4">In this next section, make sure you do XYZ when filling things out</div>
<select name='question1' title='Question 1'>The Options</select>

正如Ryan所提到的，如果不能使用可见标签，只需在表单输入中添加咏叹调标签。例如：

<input type='text' title='First Name' name='lastname' aria-label="First Name">