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>。有关详细信息，请参阅my other answer about title。

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

Answer 2

您的<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">

JAWS表单模式，读取div中的文本

2 个答案: