Skip to content

Commit

Permalink
Navigation Menubar Example: Add nav element and fix menubar label
Browse files Browse the repository at this point in the history 
In response to feedback from @scottaohara in issue #410, modified examples/menubar/menubar-1/menubar-1.html:

1. Wrapped the menubar in a nav with aria-label equal to aria-label on menubar.
2. Fixed the menubar label; changed from "Mythical University menu 1" to "Mythical University".
This should have been changed when the second example was removed from the page.
  • Loading branch information
@mcking65
mcking65 committed Nov 29, 2017
1 parent f47c8b9 commit 34c2a7c
Showing 1 changed file with 113 additions and 108 deletions.
221 changes: 113 additions & 108 deletions examples/menubar/menubar-1/menubar-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,113 +40,115 @@ <h1>Navigation Menubar Example</h1>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<ul id="menubar1" role="menubar" aria-label="Mythical University Menu 1">
<li>
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">About</a>
<ul role="menu" aria-label="About">
<li role="none">
<a role="menuitem" href="mb-about.html#overview">Overview</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#admin">Administration</a>
</li>
<li role="none">
<a id="menubar113" role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Facts</a>
<ul role="menu" aria-label="Facts">
<li role="none">
<a role="menuitem" href="mb-about.html#facts">History</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#facts">Current Statistics</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#facts">Awards</a>
</li>
</ul>
</li>
<li>
<a role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Campus
Tours</a>
<ul role="menu" aria-label="Campus Tours">
<li role="none">
<a role="menuitem" href="mb-about.html#tours">For prospective students</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#tours">For alumni</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#tours">For visitors</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Admissions</a>
<ul role="menu" aria-label="Admissions">
<li role="none">
<a role="menuitem" href="mb-admissions.html#apply">Apply</a>
</li>
<li role="none">
<a role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Tuition</a>
<ul role="menu" aria-label="Tuition Information">
<li role="none">
<a role="menuitem" href="mb-admissions.html#tuition">Undergraduate</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#tuition">Graduate</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#tuition">Professional Schools</a>
</li>
</ul>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#signup">Sign Up</a>
</li>
<li role="separator"></li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#visit">Visit</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#photo">Photo Tour</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#connect">Connect</a>
</li>
</ul>
</li>
<li>
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Academics</a>
<ul role="menu" aria-label="Academics">
<li role="none">
<a role="menuitem" href="mb-academics.html#colleges">Colleges &amp; Schools</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#programs">Programs of Study</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#honors">Honors Programs</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#online">Online Courses</a>
</li>
<li role="separator"></li>
<li role="none">
<a role="menuitem" href="mb-academics.html#explorer">Course Explorer</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#register">Register for Class</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#academic">Academic Calendar</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#tanscripts">Transscripts</a>
</li>
</ul>
</li>
</ul>
<nav aria-label="Mythical University">
<ul id="menubar1" role="menubar" aria-label="Mythical University">
<li>
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">About</a>
<ul role="menu" aria-label="About">
<li role="none">
<a role="menuitem" href="mb-about.html#overview">Overview</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#admin">Administration</a>
</li>
<li role="none">
<a id="menubar113" role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Facts</a>
<ul role="menu" aria-label="Facts">
<li role="none">
<a role="menuitem" href="mb-about.html#facts">History</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#facts">Current Statistics</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#facts">Awards</a>
</li>
</ul>
</li>
<li>
<a role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Campus
Tours</a>
<ul role="menu" aria-label="Campus Tours">
<li role="none">
<a role="menuitem" href="mb-about.html#tours">For prospective students</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#tours">For alumni</a>
</li>
<li role="none">
<a role="menuitem" href="mb-about.html#tours">For visitors</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Admissions</a>
<ul role="menu" aria-label="Admissions">
<li role="none">
<a role="menuitem" href="mb-admissions.html#apply">Apply</a>
</li>
<li role="none">
<a role="menuitem" href="#" aria-haspopup="true" aria-expanded="false">Tuition</a>
<ul role="menu" aria-label="Tuition Information">
<li role="none">
<a role="menuitem" href="mb-admissions.html#tuition">Undergraduate</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#tuition">Graduate</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#tuition">Professional Schools</a>
</li>
</ul>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#signup">Sign Up</a>
</li>
<li role="separator"></li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#visit">Visit</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#photo">Photo Tour</a>
</li>
<li role="none">
<a role="menuitem" href="mb-admissions.html#connect">Connect</a>
</li>
</ul>
</li>
<li>
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Academics</a>
<ul role="menu" aria-label="Academics">
<li role="none">
<a role="menuitem" href="mb-academics.html#colleges">Colleges &amp; Schools</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#programs">Programs of Study</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#honors">Honors Programs</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#online">Online Courses</a>
</li>
<li role="separator"></li>
<li role="none">
<a role="menuitem" href="mb-academics.html#explorer">Course Explorer</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#register">Register for Class</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#academic">Academic Calendar</a>
</li>
<li role="none">
<a role="menuitem" href="mb-academics.html#tanscripts">Transscripts</a>
</li>
</ul>
</li>
</ul>
</nav>

<script type="text/javascript">
var menubar = new Menubar(document.getElementById('menubar1'));
Expand All @@ -159,7 +161,10 @@ <h2 id="ex_label">Example</h2>

<section>
<h2>Accessibility Features</h2>
<p>The down arrow and right arrow icons are made compatible with high contrast mode and hidden from screen readers by using the CSS <code>content</code> property to render images.</p>
<ol>
<li>Since the menubar presents a site navigation system, it is wrapped in a navigation region implemented with a <code>nav</code> element that has an <code>aria-label</code> that matches the label on the menubar.</li>
<li>The down arrow and right arrow icons are made compatible with high contrast mode and hidden from screen readers by using the CSS <code>content</code> property to render images.</li>
</ol>
</section>

<section>
Expand Down

0 comments on commit 34c2a7c

Please sign in to comment.