attributes06.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>input with "min" and "aria-valuemin"</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="favicon.ico">
  <link href="assets/css/examples.css" rel="stylesheet">
</head>
<body>
  <h1><code>&lt;input&gt;</code> with <code>min</code> and <code>aria-valuemin</code></h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>This is a test case designed to determine how the <a href="https://html.spec.whatwg.org/multipage/input.html#the-min-and-max-attributes" target="_blank"><code>min</code></a> and <a href="https://www.w3.org/TR/wai-aria/#aria-valuemin" target="_blank"><code>aria-valuemin</code></a> attributes are announced. In real situations, authors should always provide clear instructions on how to successfully complete form questions.</p>
  <h2>Example</h2>
  <form action="#">
    <div class="form-group">
      <label class="label" for="number">Choose a number</label>
      <input class="input" type="number" id="number"  min="5" aria-valuemin="5">
    </div>
  </form>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;div&gt;
  &lt;label for="number"&gt;Choose a number&lt;/label&gt;
  &lt;input 
    type="number"
    id="number"
    min="5"
    aria-valuemin="5"
  &gt;
&lt;/div&gt;</code></pre>
<!-- end code -->
  <h2>Assistive technologies</h2>
  <div class="note">
    <h3>VoiceOver</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Choose a number. Stepper. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
      <li><b>Firefox:</b> Choose a number. Stepper. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
      <li><b>Safari:</b> Choose a number. Incrementable. Edit text. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Choose a number. Spin button. Editable. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
      <li><b>Firefox:</b> Choose a number. Spin button. Has autocomplete. Editable. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
      <li><b>Edge:</b> Choose a number. Spin button. Editable. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Choose a number. Edit. Spin box. To set the value use the arrow keys or type the value. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
      <li><b>Firefox:</b> Choose a number. Edit. Spin box. To set the value use the arrow keys or type the value. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
      <li><b>Edge:</b> Choose a number. Edit. Spin box. To set the value use the arrow keys or type the value. <span class="red">[min and aria-valuemin attributes not announced]</span></li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>