Skip to content

Commit

Permalink
Add 'meter' role
Browse files Browse the repository at this point in the history
Addresses github issue #451.
  • Loading branch information
joanmarie committed Jan 15, 2019
1 parent 2a72f09 commit 2e5fba1
Showing 1 changed file with 88 additions and 0 deletions.
88 changes: 88 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -618,6 +618,7 @@ <h3>Widget Roles</h3>
<li><rref>menuitem</rref></li>
<li><rref>menuitemcheckbox</rref></li>
<li><rref>menuitemradio</rref></li>
<li><rref>meter</rref></li>
<li><rref>option</rref></li>
<!-- FIXME: This is commented out because the ARIA Working Group agreed to move the password role to ARIA 2.0,
but we've not branched for 1.1 yet. Once we have branched, this section should be deleted from the 1.1
Expand Down Expand Up @@ -4051,6 +4052,93 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
</tbody>
</table>
</div>
<div class="role" id="meter">
<rdef>meter</rdef>
<div class="role-description">
<p>An <a>element</a> that represents a scalar measurement within a known range, or a fractional value. See related <rref>progress</rref>.</p>
<p>Authors MUST NOT use the <code>meter</code> role to represent a value whose minimum and maximum values are unknown and MUST use <pref>aria-valuemin</pref> and <pref>aria-valuemax</pref> to make these values available to assistive technologies.</p>
<p>Authors SHOULD NOT use the <code>meter</code> role to indicate progress; the <rref>progressbar</rref> role exists to address that need.</p>
<p class="note">At the present time, there are no <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> properties corresponding to the <code>low</code>, <code>optimum</code>, and <code>high</code> attributes supported on <a href="https://www.w3.org/TR/html50/forms.html#the-meter-element"><abbr title="Hypertext Markup Language">HTML</abbr> <code>meter</code></a>. The addition of these properties will be considered for ARIA version 1.3.</p>
<p>Authors wishing to communicate that the displayed value is low, optimum, or high SHOULD do so by including this information in <pref>aria-valuetext</pref>.</p>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="role-abstract-head" scope="row">Is Abstract:</th>
<td class="role-abstract"> </td>
</tr>
<tr>
<th class="role-parent-head" scope="row">Superclass Role:</th>
<td class="role-parent"><rref>range</rref></td>
</tr>
<tr>
<th class="role-children-head" scope="row">Subclass Roles:</th>
<td class="role-children">Placeholder</td>
</tr>
<tr>
<th class="role-base-head" scope="row">Base Concept:</th>
<td class="role-base"> </td>
</tr>
<tr>
<th class="role-related-head" scope="row">Related Concepts:</th>
<td class="role-related"><a href="https://www.w3.org/TR/html50/forms.html#the-meter-element"><abbr title="Hypertext Markup Language">HTML</abbr> <code>meter</code></a></td>
</tr>
<tr>
<th class="role-scope-head" scope="row">Required Context Role:</th>
<td class="role-scope"> </td>
</tr>
<tr>
<th class="role-mustcontain-head" scope="row">Required Owned Elements:</th>
<td class="role-mustcontain"> </td>
</tr>
<tr>
<th class="role-required-properties-head">Required States and Properties:</th>
<td class="role-required-properties">
<ul>
<li><pref>aria-valuemax</pref></li>
<li><pref>aria-valuemin</pref></li>
<li><pref>aria-valuenow</pref></li>
</ul>
</td>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"> </td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
<td class="role-inherited">Placeholder</td>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
<td class="role-namerequired">True</td>
</tr>
<tr>
<th class="role-namerequired-inherited-head" scope="row">Inherits Name Required:</th>
<td class="role-namerequired-inherited"> </td>
</tr>
<tr>
<th class="role-childpresentational-head" scope="row">Children Presentational:</th>
<td class="role-childpresentational">True</td>
</tr>
<tr>
<th class="role-presentational-inherited-head" scope="row">Inherits Presentational:</th>
<td class="role-presentational-inherited"> </td>
</tr>
</tbody>
</table>
</div>
<div class="role" id="menu">
<rdef>menu</rdef>
<div class="role-description">
Expand Down

0 comments on commit 2e5fba1

Please sign in to comment.