1

我试图让盲人用户可以访问我的数据库，并且可以预见会有很多麻烦。

我发现添加 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 “在下一部分中，确保...”？

4

2 回答 2

3

您可以添加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>

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

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

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

还

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

请改掉你的坏习惯，不要用title，用<label>。有关更多详细信息，请参阅我关于标题的其他答案。

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

于 2012-07-18T23:16:34.447 回答
0

您的<div>标签看起来像一个标题，由于您没有使用语义标题 h1 - h6，JAWS 将无法确定文档的结构。为了使其可读，您可以添加 role="heading" 并指定 aria-level 如果您愿意，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 所提到的，如果您不能使用可见标签，只需将 aria-label 添加到您的表单输入中。例如：

<input type='text' title='First Name' name='lastname' aria-label="First Name">
于 2012-07-24T02:12:55.477 回答