Add meter design pattern (pull #1189)

Resolve issue #979 by adding a section to the design patterns for elements with the meter role.

aria-practices.html

@@ -294,7 +294,7 @@ <h4>Example</h4>
 
  <section class="notoc">
  <h4>Keyboard Interaction</h4>
- <p>An alert (WAI-ARIA live region) does not require any keyboard interaction.</p>
+ <p>Not applicable.</p>
  </section>
 
  <section class="notoc">
@@ -2150,6 +2150,47 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
  </section>
  </section>
 
+ <section class="widget" id="meter">
+ <h3>Meter</h3>
+ <p>
+ A <a class="role-reference" href="#meter">meter</a> is a graphical display of a numeric value that varies within a defined range.
+ For example, a meter could be used to depict a device's current battery percentage or a car's fuel level.
+ </p>
+ <ul class="note">
+ <li>A <code>meter</code> should not be used to represent a value like the current world population since it does not have a meaningful maximum limit.</li>
+ <li>
+ The <code>meter</code> should not be used to indicate progress, such as loading or percent completion of a task.
+ To communicate progress, use the <a href="#progressbar" class="role-reference">progressbar</a> role instead.
+ </li>
+ </ul>
+
+ <section class="notoc">
+ <h4>Example</h4>
+ <p><a href="examples/meter/meter.html">Meter Example</a></p>
+ </section>
+
+ <section class="notoc">
+ <h4>Keyboard Interaction</h4>
+ <p>Not applicable.</p>
+ </section>
+
+ <section class="notoc">
+ <h4>WAI-ARIA Roles, States, and Properties</h4>
+ <ul>
+ <li>The element serving as the meter has a role of <a class="role-reference" href="#meter">meter</a>.</li>
+ <li>The meter has <a class="property-reference" href="#aria-valuenow">aria-valuenow</a> set to a decimal value between <code>aria-valuemin</code> and <code>aria-valuemax</code> representing the current value of the meter.</li>
+ <li>The meter has <a class="property-reference" href="#aria-valuemin">aria-valuemin</a> set to a decimal value less than <code>aria-valuemax</code>.</li>
+ <li>The meter has <a class="property-reference" href="#aria-valuemax">aria-valuemax</a> set to a decimal value greater than <code>aria-valuemin</code>.</li>
+ <li>
+ Assistive technologies often present <code>aria-valuenow</code> as a percentage.
+ If conveying the value of the meter only in terms of a percentage would not be user friendly, the <a class="property-reference" href="#aria-valuetext">aria-valuetext</a> property is set to a string that makes the meter value understandable.
+ For example, a battery meter value might be conveyed as <code>aria-valuetext="50% (6 hours) remaining"</code>.
+ </li>
+ <li>If the meter has a visible label, it is referenced by <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> on the element with role <code>meter</code>. Otherwise, the element with role <code>meter</code> has a label provided by <a href="#aria-label" class="property-reference">aria-label</a>.</li>
+ </ul>
+ </section>
+ </section>
+
  <section class="widget" id="radiobutton">
  <h3>Radio Group</h3>
  <p>