1

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?

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
rgbflawed
  • 1,957
  • 1
  • 22
  • 28
  • Please provide your HTML for this. – Jonathan Vance Jul 18 '12 at 16:34
  • Editied. The code can really be anything here since this is going to be a page made just for screen reader people. However, I don't want to put the "In this next section..." text inside the Question 1 select because the questions that come after will always be different. – rgbflawed Jul 18 '12 at 17:20
  • From what I've read, use of role="application" currently can cause problems for JAWS users, and should be used carefully; usually around a piece of UI that is essentially a single custom control. More details including some good and bad cases in [this article](http://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/). – BrendanMcK Aug 17 '12 at 08:46

2 Answers2

3

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.

Community
  • 1
  • 1
Ryan B
  • 3,364
  • 21
  • 35
  • 1
    Title are the new way of putting invisible text so sites are easily indexed to Google..when I saw a SEO conference at work the guy was recommending to put Title attributes to everything. Me and the other WCAG specialist left the room –  Jul 20 '12 at 11:32
  • I have heard about keyword stuffing in title a few years ago. I didn't do any searching if it works in terms of Google. Regardless of that, it still shouldn't be used. – Ryan B Jul 20 '12 at 16:28
  • It shouldn't be abused. Using title attribute on elements that aren't self descriptive is a best practice. For example links like : Read more should have either a title attribute or an aria-describedby attribute –  Jul 20 '12 at 16:41
  • Depends on what your aim is, if you are more concerned about accessibility, you should do `read more[blog post title]` – Ryan B Jul 20 '12 at 18:05
0

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">
Ravi Kadaboina
  • 8,494
  • 3
  • 30
  • 42