Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by William J. Terrell
William J. Terrell
17,403 Points

Tabbing to Submenu

On our website - https://www.williamwoods.edu - we have an "Information For" sub-menu that pops up from the navigation in the top-right corner.

The code for this is below.

<nav aria-label="eyebrow-nav" class="global-nav desktop loop-8" name="eyebrow-nav" role="navigation">
    <ul class="contained">
        <li>
            <a href="http://news.williamwoods.edu/">News</a>
        </li>
        <li>
            <a href="/events">Events</a>
        </li>
        <li>
            <a href="/faculty_staff_directory/index.asp">Faculty and Staff</a>
        </li>
        <li>
            <button aria-expanded="false" aria-haspopup="true" class="nav-dropdown" id="info-for-button" tabindex="0">Information For...</button>
            <ul class="nav-dropdown-content">
                <li>
                    <a href="/academics/index.html" tabindex="0">Prospective Students</a>
                </li>
                <li>
                    <a href="/current_students/index.html" tabindex="0">New and Current Students</a>
                </li>
                <li>
                    <a href="/current_students/international_students/index.html" tabindex="0">International Students</a>
                </li>
                <li>
                    <a href="/admissions/Transfer/index.html" tabindex="0">Transfer Students</a>
                </li>
                <li>
                    <a href="/admissions/active_military_and_veterans/index.html" tabindex="0">Active Military and Veterans</a>
                </li>
                <li>
                    <a href="/admissions/undergraduate/parents/index.html" tabindex="0">Parents</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

There is a CSS rule that sets visibility on the sub-menu when the button has received focus or is hovered over.

/*----------- "Information For..." Dropdown in Eyebrow Nav -----------*/

.nav-dropdown {
    font-family: "Lato", Helvetica, Arial, san-serif;
    font-size: 0.7777778em;
    cursor: pointer;
    border: none;
    background: transparent;
    margin-bottom: 0;
}

.nav-dropdown-content {
  font-size: large;
  display: grid;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100%;
  right: 0;
  left: auto;
  background-color: #616c43;
  box-shadow: 0px 8px 16px 0px #414a2e/*rgba(0,0,0,0.2)*/;
  z-index: 9999;
  list-style: none;
}

.nav-dropdown:hover +.nav-dropdown-content,
.nav-dropdown:active +.nav-dropdown-content,
.nav-dropdown:focus +.nav-dropdown-content,
.nav-dropdown-content:hover {
     visibility: visible;
     opacity: 1;
     display: grid;
     position: absolute;
}

.nav-dropdown-content li:hover,
.nav-dropdown-content li:focus,
.nav-dropdown-content li a:hover,
.nav-dropdown-content li a:focus
 {
    background-color: #414a2e;
    text-decoration: none;
}

.nav-dropdown-content li a {
    color: #fff !important;
}

.nav-dropdown::after {
    content: ' \25BC';
    font-size: small;
}

/*----------- /"Information For..." Dropdown -----------*/

The problem, though, is that the sub-menu is not accessible to keyboard-only users. If I hover over "Information For...", the sub-menu is presented and I can click the link that I want. However, if a keyboard-only user tabs to "Information For...", they are presented with the sub-menu, but cannot navigate it with the tab or arrow keys.

I have tried setting tabindex on the sub-menu, but that didn't work.

Could anyone look at my code and tell me what I am missing? We need to get this working by the end of the week.

Thanks!

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, William J. Terrell ! As I understand it, submenus aren't meant to be navigated with the "TAB" key. Rather, it should be navigated with the up and down arrow keys of the keyboard.

I might suggest taking a look at these accessibility aimed examples at W3. I think the biggest underlying problem right now is a possible misunderstanding of how submenus are meant to be navigated :smiley:

Hope this helps! :sparkles:

William J. Terrell
William J. Terrell
17,403 Points

Right - but, even then it doesn't work. I tab to "Information For", the menu pops up, but hitting the arrow keys doesn't do anything.

I can't see anything wrong with the semantics or structure, and all of the examples I've looked at seem to be set up the same and work just fine, so I've no idea what I'm doing wrong. :\

I'll look through those examples one more time, though. :)

Thanks!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

William J. Terrell I just took a closer look. One thing I notice that's missing is the aria-controls attribute on the button for that drop down menu. I'm expecting that <ul> underneath the button to have an id attribute that matches the aria-controls button on that button.

For example:

<li>
     <button aria-controls="nav-dropdown-content" aria-expanded="true" aria-haspopup="true" class="nav-dropdown" id="info-for-button">Information For...</button>
     <ul class="nav-dropdown-content" id="nav-dropdown-content">

I'm not 100% convinced that any controls are being added to that menu as it is right now. Let me know if this helps! :sparkles: