How to clearly label the formats for numeric input for screen readers?
accessibility, forms, html, screen-readers
Solution
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.
Problem
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.