CODEWITHSUNDEEP
accessibilitywai-ariajaws-screen-reader
rgbflawed
rgbflawed

Reputation: 2157

JAWS Forms Mode, read text in div

I'm trying to make my database accessible to blind users and am predictably having a lot of trouble.

I've found that adding role='application', and immediately putting JAWS into forms mode makes the tabbing and behavior of my site a lot more predictable. However, I can't figure out how to get it to read simple text.

For example. Let's say I have a form that looks like this

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

How do I make it so the div "In this next section, make sure..." gets read by the screen reader?

Upvotes: 1

Views: 5549

Answers (2)

Ravi Kadaboina
Ravi Kadaboina

Reputation: 8574

Your <div> tag looks like a heading and since you are not using semantic headings h1 -- h6, JAWS will not be able to determine the structure of the document. To make it readable you can add role="heading" and also specify aria-level if you would like to and JAWS will pick up the text, for example:

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

and also as mentioned by Ryan, if you can't use visible labels just add aria-label to your form inputs. For example:

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

Upvotes: 0

Ryan B
Ryan B

Reputation: 3392

You can add aria-describedby="ID_Here" to the <select>, so it would become:

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

You may want to wrap the applicable sections questions in a <fieldset> to show the sets of questions are together.

But I don't like how <fieldset>s look!

Ok, use your favorite search engine to find out how to style them with CSS.

Also

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

Please break your bad habit, don't use title, use a <label>. Please see my other answer about title for more detail.

You may want to rethink using role="application" also.

Upvotes: 3

Related Questions