Skip to content

Commit

Permalink
Menu and Menubar Pattern: Add Labeling Guidance
Browse files Browse the repository at this point in the history
To resolve issue #462, Added the following bullets to
roles, states, and properties subsection of the menu and menubar pattern in aria-practices.html.

> * If a menubar has a visible label, the element with role menubar has aria-labelledby set to a value that refers to the labeling element. Otherwise, the menubar element has a label provided by aria-label.
> * An element with role menu either has:
>    * aria-labelledby set to a value that refers to the menuitem or button that controls its display.
>    * A label provided by aria-label.
  • Loading branch information
mcking65 committed Nov 6, 2017
1 parent 878d9b7 commit a7035a7
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -1933,10 +1933,21 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
<li>When a menu item is disabled, <a href="#aria-disabled" class="state-reference">aria-disabled</a> is set to <code>true</code>.</li>
<li>Items in a menu may be divided into groups by placing an element with a role of <a href="#separator" class="role-reference">separator</a> between groups. For example, this technique should be used when a menu contains a set of <a href="#menuitemradio" class="role-reference">menuitemradio</a> items. </li>
<li>All <a href="#separator" class="role-reference">separators</a> should have <a href="#aria-orientation" class="property-reference">aria-orientation</a> consistent with the separator's orientation. </li>
<li>
If a menubar has a visible label, the element with role <code>menubar</code> has <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set to a value that refers to the labeling element.
Otherwise, the menubar element has a label provided by <a href="#aria-label" class="property-reference">aria-label</a>.
</li>
<li>
If a menubar is vertically oriented, it has <a class="property-reference" href="#aria-orientation">aria-orientation</a> set to <code>vertical</code>.
The default value of <code>aria-orientation</code> for a menubar is <code>horizontal</code>.
</li>
<li>
An element with role <code>menu</code> either has:
<ul>
<li><a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set to a value that refers to the menuitem or button that controls its display.</li>
<li>A label provided by <a href="#aria-label" class="property-reference">aria-label</a>.</li>
</ul>
</li>
<li>
If a menu is horizontally oriented, it has <a class="property-reference" href="#aria-orientation">aria-orientation</a> set to <code>horizontal</code>.
The default value of <code>aria-orientation</code> for a menu is <code>vertical</code>.
Expand Down

0 comments on commit a7035a7

Please sign in to comment.