Reputation: 2157
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
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
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