How to clearly indicate the formats for numeric input for reading from the screen?

Question

I am looking for an affordable way to determine if a field should accept integer or decimal amounts. The <input> fields are presented in two versions: a simple <input> , which is designed for decimal values ​​(in dollars and cents) and a <input> with a final ".00", which indicates that an integer is required (only dollars).

Example:

Since ".00" is not in <label> , it will not be read by a screen reader. I 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> 

(Although the space is hidden, JAWS will read it when the input has focus.)

What is a more accessible and semantic way of informing assistive technologies about which numbering format is being requested?

Some notes:

• In my case, it is not permissible to allow the user to enter “123.45” and then round it to “123” on the server if I need an integer.
• There is no check on the client side, so if the user enters the wrong value type, the page will return with a descriptive error message in the field.
• The inputs cannot be type="number" due to the controls inserted by the browser.

Answer 1

Why not use the Title attribute. In <input type = "text" />, the title attribute is read by JAWS and most other readers. So the extension on DougM will respond to 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 that the title will override the label in JAWS, and both readers will be read in other readers, thus duplicating the label text inside the title attribute.

Answer 2

Assuming your fields are examples from the same theoretical <form/> , I have several suggestions for you.

• Clearly indicate the type in the label. If you have several dollar amounts to be entered into the application, some of which require decimal kopecks, while others only need whole dollars, you must define clear names for each and use them consistently and exclusively in the appropriate labels.

  The simplest form is as simple as changing the “Amount due” to either “dollars or cents” or “whole dollars”

• Add instructions in the second label. The HTML <label> element has had a for attribute for many years, and there is no reason why you cannot have a second label for each form with specific instructions for entering data. (It would be perfectly advisable to provide these secondary labels to another CSS class so that they can be distinguished in different ways.)

As an 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 the placeholder attribute. JAWS reads it when moving using the Tab or using the keyboard shortcuts.

Answer 4

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