What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

Question

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

I have come across some solutions, but I am struggling to incorporate them into my code as some require elements that are not compatible with my project.

Let's get to the question:

I need help making an existing CSS drop-down menu accessible for keyboard navigation. While I have managed to open the drop-down menu with [Tab], navigating through the options inside has been a challenge.

Here is a snippet of my code:

.menu .options-menu-dropdown{
            display: inline-block;
            font-family: 'OpenSans Bold';
            font-size: 16px;
            color: #646464;        
            text-decoration: none;
            cursor: pointer;
            position: relative;
        }
        .menu .menu-dropdown{
            z-index: -1;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            min-width: 180px;
            text-align: right;
            overflow: hidden;
            margin-top: -6px;
            margin-right: -6px;

            -webkit-transition: all 200ms ease-in-out;
            -moz-transition: all 200ms ease-in-out;
            -ms-transition: all 200ms ease-in-out;
            -o-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;    
        }
        .menu .options-menu-dropdown:focus .menu-dropdown,
        .menu .options-menu-dropdown:hover .menu-dropdown{
            z-index: 100;
            visibility: visible;
            opacity: 1;
        }
        .menu .title-dropdown{
            background-color: #005e8b;
            font-size: 16px;
            padding: 8px 6px;
            white-space: nowrap;
            border-bottom: 1px solid #b4b4b4;
            color: #FFF;
        }
        .menu .menu-dropdown-item{
            display: block;
            background-color: white;        
            padding: 12px 32px 12px 12px;
            text-decoration: none;
            cursor: pointer;
            font-size: 16px;
            color: #323232;
            -webkit-transition: all 200ms ease-in-out;
            -moz-transition: all 200ms ease-in-out;
            -ms-transition: all 200ms ease-in-out;
            -o-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out; 
            border-top: #b4b4b4 1px solid;
            border-left: #b4b4b4 1px solid;
            border-right: #b4b4b4 1px solid;
        }
        .menu .menu-dropdown-item:last-child{
            border-bottom: #b4b4b4 1px solid;
        }
        .menu .menu-dropdown-item:focus,
        .menu .menu-dropdown-item:hover{
            background-color: #b4b4b4;
            color: #fff;
        }

<div class="menu" align="center" >
          <div class="options-menu-dropdown" tabindex="0">
            <div>Test Menu</div>
            <div class="menu-dropdown">
              <div class="title-dropdown">Opened Test Menu</div>
              <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 1</a>
              <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 2</a>
              <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 3</a>
            </div>
          </div>
        </div>

Code can be found at this link.

Note: I am trying to avoid using any JavaScript solution as this project requires GWT and strictly prohibits the use of JavaScript.

Thank you in advance.

EDIT The menu should behave similarly to Google's account menu, allowing keyboard accessibility to navigate through its options.

https://i.stack.imgur.com/AY9xT.png

html css drop-down-menu accessibility keyboard-navigation

Answer 1

Answer №1

I was searching for the same answer and found bits and pieces scattered around the internet. That's why I decided to compile my solution here, which eliminates the need for JavaScript. The key lies in utilizing these pseudo classes:

li > a:hover + ul,
li > a:focus + ul,
li:focus-within > ul

For the complete HTML (Header section):

<header>
    <nav>
        <ul>
            <li>
                <a href="#">Page 1</a>
                <ul>
                    <li>
                        <a href="#">Sub page 1</a>
                    </li>
                    <li>
                        <a href="#">Sub page 2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Page 2</a>
                <ul>
                    <li>
                        <a href="#">Sub page 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

Complete CSS (without actual styling) – first level elements are displayed side by side (display: inline-block;), while second level elements remain hidden until parent element is active:

header ul {
    list-style: none;
}

header nav > ul > li {
    display: inline-block;
    vertical-align: top;
}

header nav > ul > li > ul {
    visibility: hidden;
    opacity: 0;
}

header nav > ul > li > a:hover + ul,
header nav > ul > li > a:focus + ul,
header nav > ul > li:focus-within > ul {
    visibility: visible;
    opacity: 1;
}

Answer 2

I was searching for the same answer and found bits and pieces scattered around the internet. That's why I decided to compile my solution here, which eliminates the need for JavaScript. The key lies in utilizing these pseudo classes:

li > a:hover + ul,
li > a:focus + ul,
li:focus-within > ul

For the complete HTML (Header section):

<header>
    <nav>
        <ul>
            <li>
                <a href="#">Page 1</a>
                <ul>
                    <li>
                        <a href="#">Sub page 1</a>
                    </li>
                    <li>
                        <a href="#">Sub page 2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Page 2</a>
                <ul>
                    <li>
                        <a href="#">Sub page 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

Complete CSS (without actual styling) – first level elements are displayed side by side (display: inline-block;), while second level elements remain hidden until parent element is active:

header ul {
    list-style: none;
}

header nav > ul > li {
    display: inline-block;
    vertical-align: top;
}

header nav > ul > li > ul {
    visibility: hidden;
    opacity: 0;
}

header nav > ul > li > a:hover + ul,
header nav > ul > li > a:focus + ul,
header nav > ul > li:focus-within > ul {
    visibility: visible;
    opacity: 1;
}

Answer 3

Answer №2

Check out these Practical ARIA examples by Heydon Pickering:

<nav role="navigation" aria-label="example with dropdowns">
<ul class="with-dropdowns">
    <li><a href="#">Home</a></li>
    <li>
        <a href="/about" aria-haspopup="true">About</a>
        <ul aria-hidden="true" aria-label="submenu">
            <li><a href="/about/#who-we-are">Who we are</a></li>
            <li><a href="/about/#what-we-do">What we do</a></li>
            <li><a href="/about/#why">Why</a></li>
        </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Answer 4

Check out these Practical ARIA examples by Heydon Pickering:

<nav role="navigation" aria-label="example with dropdowns">
<ul class="with-dropdowns">
    <li><a href="#">Home</a></li>
    <li>
        <a href="/about" aria-haspopup="true">About</a>
        <ul aria-hidden="true" aria-label="submenu">
            <li><a href="/about/#who-we-are">Who we are</a></li>
            <li><a href="/about/#what-we-do">What we do</a></li>
            <li><a href="/about/#why">Why</a></li>
        </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Answer 5

Answer №3

Big thanks to Shannon Youg for offering assistance.

After some trial and error, I managed to find a solution, although it required incorporating some Javascript for it to function properly.

Here's the HTML code snippet:

<div class="my-menu">
  <a id="menuUser" href="javascript:showHideMenu()" class="">
    <div>
      Test
    </div>
  </a>
  <ul id="menuUserDropdown" class="menu-dropdown">
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 1
      </a>
    </li>
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 2
      </a>
    </li>
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 3
      </a>
    </li>
  </ul>
</div>

Below is the CSS styling used:

.my-menu a{
  display: inline-block;
  font-family: 'OpenSans Bold';
  font-size: 16px;
  color: #646464;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.my-menu a div{
  padding: 4px 5px 4px 0;
}
...

And finally, here is the simple logic implemented with Javascript (GWT in this case):

/* Simply toggle the "opened" class between "menuUser" and "menuUserDropdown".
    Optionally, you can include functions like "blur()" and "mouseLeave()"
    to close the menu when the user navigates away from it. */

Answer 6

Big thanks to Shannon Youg for offering assistance.

After some trial and error, I managed to find a solution, although it required incorporating some Javascript for it to function properly.

Here's the HTML code snippet:

<div class="my-menu">
  <a id="menuUser" href="javascript:showHideMenu()" class="">
    <div>
      Test
    </div>
  </a>
  <ul id="menuUserDropdown" class="menu-dropdown">
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 1
      </a>
    </li>
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 2
      </a>
    </li>
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 3
      </a>
    </li>
  </ul>
</div>

Below is the CSS styling used:

.my-menu a{
  display: inline-block;
  font-family: 'OpenSans Bold';
  font-size: 16px;
  color: #646464;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.my-menu a div{
  padding: 4px 5px 4px 0;
}
...

And finally, here is the simple logic implemented with Javascript (GWT in this case):

/* Simply toggle the "opened" class between "menuUser" and "menuUserDropdown".
    Optionally, you can include functions like "blur()" and "mouseLeave()"
    to close the menu when the user navigates away from it. */

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

Answer №1

Answer №2

Answer №3

Similar questions

Inserting a custom text box underneath the Anything Slider

Choose or deselect images from a selection

The animation in Material UI does not smoothly transition with the webkit scrollbar

"Implementing a function where two different elements can change the text of a button

Looping through multi-dimensional JSON objects with jQuery

The 3D card flipping animation is dragging on for an eternity

Conceal the div element when located beneath an ordered list with a designated

I have noticed that there are 3 images following the same logical sequence, however only the first 2 images seem to be functioning correctly. Can you help

How can I modify the orientation of the arrow and switch sides in a dropdown submenu?

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Changing the background color of a PHP input based on the webpage being viewed - here's how!

There seems to be an issue with the CSS header alignment as the logo is not properly positioned using a top margin of -20px

Looking for assistance with CSS selectors for the following structure

Leveraging functions with Ng-Repeat

How can we use jQuery to change the format of a

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Adding to a webpage's URL with PHP prior to rendering the content

Create a basic chart using JavaScript