title: How to clearly label the formats for numeric input for screen readers?
body: <p>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 <code>&lt;input&gt;</code> which is meant for decimal values (dollars and cents), and an <code>&lt;input&gt;</code> with a trailing ".00" that indicates a whole number is required (dollars only).</p>
  
  <p>Example:</p>
  
  <p><img src="https://i.imgur.com/x7PCqeW.png" alt="Screen shot of two numeric fields"></p>
  
  <p>Since the ".00" is not in the <code>&lt;label&gt;</code> it won't be read by the screen reader. I've had to use an ugly hack to make it accessible: </p>
  
  <pre><code>&lt;label&gt;Total amount due ($): &lt;span style="display:none;"&gt;Please enter dollars and cents&lt;/span&gt;&lt;/label&gt;
  &lt;label&gt;Amount owed ($): &lt;span style="display:none;"&gt;Please enter a dollar amount&lt;/span&gt;&lt;/label&gt;
  </code></pre>
  
  <p>(Even though the span is hidden JAWS will read it when the input has focus.)</p>
  
  <p><strong>What is a more accessible and semantic way to inform assistive technologies which number format is being requested?</strong></p>
  
  <p>Some notes:</p>
  
  <ul>
  <li>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. </li>
  <li>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. </li>
  <li>The inputs cannot be <code>type="number"</code> due to the controls inserted by the browser.</li>
  </ul>