How to clearly label the formats for numeric input for screen readers?

Question

I'm looking for an accessible way to define whether a field is meant to accept integer or decimal amounts. The input fields come in two varieties: a simple <input> which is meant for decimal values (dollars and cents), and an <input> with a trailing ".00" that indicates a whole number is required (dollars only).

Example:

Since the ".00" is not in the <label> it won't be read by the screen reader. I've had to use an ugly hack to make it accessible:

<label>Total amount due ($): <span style="display:none;">Please enter dollars and cents</span></label>
<label>Amount owed ($): <span style="display:none;">Please enter a dollar amount</span></label>

(Even though the span is hidden JAWS will read it when the input has focus.)

What is a more accessible and semantic way to inform assistive technologies which number format is being requested?

Some notes:

• In my case it's not acceptable to allow the user to enter "123.45" and then round it to "123" on the server if I need a whole number.
• There is no client-side validation, so if they user enters the wrong type of value the page will come back with a descriptive error message on the field.
• The inputs cannot be type="number" due to the controls inserted by the browser.

Answer 1

Why not use the Title attribute. On <input type="text"/> the title attribute is read by JAWS and most other readers. So expanding on DougM's answer something like

<label for="txtTotal">Total amount due ($): 
<input type="text" id="txtTotal" 
title="Total amount due. Please enter dollars and cents." />
</input> 

<label for="txtAmountOwed">Amount Owed($): 
<input type="text" id="txtAmountOwed" 
title="Amount owed. Please enter a dollar amount." />
</input>

I believe the title will override the label in JAWS and in other readers will read both, thus the duplication of the label text inside the title attribute.

Answer 2

Assuming that your fields are examples from within the same theoretical <form/>, I have a pair of suggestions for you.

1. Clearly specify the type in the label. If you have multiple dollar amounts that must be entered within the application, some of which require decimal cents while others need only whole dollars, you should determine clear names for each and use them consistently and exclusively within the appropriate labels.

   The easiest form is as simple as changing "Amount owed" to either "dollars and cents owed" or "whole dollars owed"

2. Add instructions in a second label. The HTML <label> element has had a for attribute for years, and there is no reason you cannot have a second label for each form with specific instruction for data entry. (It would be entirely approrpriate to give these secondary labels a different CSS class so they can be styled differently.)

By way of example:

<p>
  <label for="txtOwed">Whole Dollars Owed</label>
  <input id="txtOwed" name="txtOwed" type="text" />
  <label for="txtOwed" class="instruct">Enter whole dollars only.</label>
</p>

Answer 3

I would suggest using placeholder attribute. JAWS reads it when moving with Tab or with quick navigation keys.

Answer 4

Use HTML 5 input pattern attribute, for example pattern="[A-Za-z]{3}" will result in an input that allows for only 3 chars with no number or special characters, the text in the pattern attribute is just a regexp.