Making my drop-down menus accessible when only using the keyboard

Question

At the moment my dropdown menus only appear when the user rolls over them.

I would like it so if you pressed the TAB key the drop down would appear in the same way

My menu is based on the following tutroial:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

The only thing I have updated code wise is the style in CSS

Below is a section of my menu:

HTML:

 <ul id="menu">

    <li><a href="about-us.php" class="drop">About us</a>
            <div class="dropdown_1column align_left">
                 <div class="col_1">
                      <ul class="simple">
                          <li><a href="why-choose-us.php">Why choose us</a></li>
                          <li><a href="our-office.php">Our office</a></li>
                       </ul>   
                  </div>
              </div>
    </li>

<li><a href="how-we-help.php" class="drop">How we help</a>
     <div class="dropdown_2columns align_left">
          <div class="col_2">
               <h3 class="link-menu-title"><a href="#">Technology</a></h3>
                   <ul>
                       <li><a href="dynamic-purchasing.php" style="width:270px;">Dynamic purchasing with Matrix</a></li>
                        <li><a href="process.php">Process</a></li>
                        <li><a href="interfacing.php">Interfacing</a></li>
                        <li><a href="implementation.php">Implementation</a></li>
                    </ul>   
             </div>

       <div class="col_2">
                 <h3 class="link-menu-title"><a href="#">Professional Support Services</a></h3>
                     <ul>
                         <li><a href="discovery.php">Discovery</a></li>
                         <li><a href="account-management.php">Account management</a></li>
                         <li><a href="business-management.php" style="width:270px;">Business management</a></li>
                         <li><a href="supplier-management.php"> Supplier management</a></li>
                        </ul>   
                    </div>
              </div>

            </li>

        </ul>

and the CSS

#menu li.menu-icon:hover {
    background-color:#212121;
    border:0px;
}


a#home span {
    position: absolute;
    top: -999em;
}

#menu {
    list-style:none;
    width:730px;
    margin:0px auto 0px auto;
    height:73px;


    /* Background color and gradients */



    /* Borders */

    border: 0px solid #002232;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 0px 4px 0px;
    margin-right:12px;
    margin-top:25px;
    border:none;


}

#menu li:hover {
    border: 1px solid #11A7E6;
    padding: 4px 0px 4px 0px;

    /* Background color and gradients */

    background: #11A7E6;


    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;

}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:bold;
    color: #FFFFFF;
    display:block;
    outline:0;
    text-decoration:none;   
}

.medium #menu li a {
    font-size:16px;
}

.large #menu li a {
    font-size:20px;
}

.medium #menu li .drop, .large #menu li .drop {
    padding-right: 0px;
}

#menu li:hover a {
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;

}
#menu li .drop {
    padding-right:8px;
}
#menu li:hover .drop {
    padding-right:3px;
    padding-left:3px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border-top:10px solid #11A7E6;

    /* Gradient background */
    background:#2D2D2D;


    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;

}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}


#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #000000;

}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 3px 0;
    padding-bottom:3px;
    border-bottom:1px solid #666666;

}
#menu h3 {
    font-size:14px;
    margin:7px 0 3px 0;
    padding-bottom:3px;
    border-bottom:1px solid #666666;

}


#menu p {
    line-height:18px;
    margin:0 0 30px 0;

}

#menu li:hover div a {
    font-size:12px;
    color:#0ea4e3;
    padding-bottom:2px;
}

.medium #menu li:hover div a {
    font-size:15px;
}

.large #menu li:hover div a {
    font-size:19px;
}

#menu li:hover div h2.link-menu-title a{
    font-size:14px;
    font-weight:bold;
    color:#FFF;
}

#menu li:hover div h3.link-menu-title a{
    font-size:14px;
    font-weight:bold;
    color:#FFF;
}

.medium #menu li:hover div h3.link-menu-title a{
    font-size:17px;
}

.large #menu li:hover div h3.link-menu-title a{
    font-size:21px;
}


#menu li:hover div a:hover {
    color:#fff;
    background-color: #474747;


}

Answer 1

Looking at the tutorial, it is not really a good starting point to make fully keyboard accessible. Unfortunately it isn't just a matter of showing the drop-downs when pressing tab.

Once you get past a couple of items in each drop-down it it not a good thing for keyboard users to have to tab through every option.

There are two main ways to make this type of menu accessible:

1. Traditional method: Make each top level link go through to a landing page that includes the links from the menu, and hide the drop-downs from keyboard use.

2. HTML5 (new) method: Use WAI-ARIA markup and lots of scripting to enable full keyboard accessibility.

The traditional method if fairly easy to do, you just need to properly hide the menus that are off-screen using display: none; on the classes starting .dropdown_1column. The means keyboard users won't tab through the sub-menus.

And then use display: block to show the sub-menus on hover (not focus), where the CSS starts:

#menu li:hover .dropdown_1column

To achieve the HTML5/new method I would start with Adobe's open-sourced "Accessible Mega Menu". It would be a huge amount of work to do this from scratch, and unless you know how to test with a wide range of user-agents, it is unlikely to work as well as Adobe's.

Answer 2

Here is a demo. This is the closest you could with pure css.

<section class="header">
        <div class="dropdown">
            <ul>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 1</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 2</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 3</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 4</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 5</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </section>

css

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  height: 100px;
  width: 100%;
  background-color: black;
}
.header .dropdown {
  margin: 50px 0 0 300px;
}
ul {
  margin: 0;
  padding: 0;
}
.dropdown {
  color: #fff;
  position: relative;
}
.dropdown > ul {
  display: block !important;
  background-color: black !important;
}
.dropdown > ul > li {
  display: inline-block;
  width: 100px;
  margin: 0 10px;
  position: relative;
}
.dropdown > ul > li input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.dropdown > ul > li input[type="radio"]:checked ~ ul {
  display: block;
}
.dropdown > ul > li input[type="radio"]:focus ~ a {
  border-bottom: 2px solid #ccc;
}
.dropdown ul {
  position: absolute;
  left: 0;
  display: none;
  z-index: 99;
  background-color: #2b2b2b;
  width: 200%;
}
.dropdown ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
}
.dropdown ul li a {
  display: block;
  padding: 10px 15px;
}
.dropdown ul li a:focus {
  outline: none;
  background-color: #0bd2f6;
}
.dropdown ul li:hover > ul {
  display: block !important;
}

Answer 3

please upload your markup and styles. Anyways here is a sample menu that works on tab.

  .dropdown {
       position: relative;
       display: inline-block;
       font-size: 110%;
  }

 .dropdown ul {
      position: absolute;
      top: -100%;
      left: 100%;
      display: none;
      background-color: inherit;
      padding: 0;
      list-style: none;
      border: 1px solid #ccc; 
 }

 .dropdown ul li {
      position: relative;
      list-style: none;
      margin: 5px 0;
      background-color: inherit;
 }

 .dropdown ul li a {
      display: block;
      padding: 3px 10px;
 }

 .dropdown ul li a:hover {
      background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
      display: block;
      top: 0;
      background-color: inherit; 
  }

  .dropdown ul li:hover > a {
      background-color: #85ddff;
  }

  .dropdown:focus > ul {
      display: block;
  }

// markup

    <div class="dropdown" style="background-color: white;" tabindex="1">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>

    </ul> 
</div>

you need to give a tabindex value to make an element focusible ( which is not focusible by default).. Then you css3 :focus selector to trigger when the element is in focus.

Might be able to help if you write down your exact requirement