Accessible Drop Downs - Using Keyboard to Navigate Menu Items

Home Forums Older releases 1.0.x Accessible Drop Downs - Using Keyboard to Navigate Menu Items

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3544
    katieTBA
    Participant

    Hi!

    All of my menu items have submenus, and some have up to fourth level submenus, something like this:

                
      <ul id="main-menu" class="sm sm-blue collapsed">           
                  <li><a href="/page-one">Top Level One</a>     
                    <ul>
                      <li><a href="/one-one">1.1</a></li>
                      <li><a href="/one-two">1.2</a>
             	        <ul>       
             	          <li><a href="/one-two-one">1.2.1</a></li>      
             	          <li><a href="/one-two-two">1.2.2</a></li>                           
                        </ul>                  
                      </li>
                      <li><a href="/one-three">1.3</a></li>
                    </ul>
                  </li> 
                  <li><a href="/page-two">Top Level Two</a>     
                    <ul>
                      <li><a href="/two-one">2.1</a></li>
                      <li><a href="/two-two">2.2</a></li>
                      <li><a href="/two-three">2.3</a></li>
                    </ul>
                  </li> 
                  <li><a href="/page-three">Top Level Three</a>     
                    <ul>
                      <li><a href="/three-one">3.1</a></li>
                      <li><a href="/three-two">3.2</a>
             	        <ul>       
             	          <li><a href="/three-two-one">3.2.1</a></li>      
             	          <li><a href="/three-two-two">3.2.2</a>
                            <ul>
                              <li><a href="/three-two-two-one">3.2.2.1</a></li>
                              <li><a href="/three-two-two-two">3.2.2.2</a></li>
                              <li><a href="/three-two-two-three">3.2.2.3</a></li>
                            </ul>
                          </li>  
             	          <li><a href="/three-two-three">3.2.3</a></li>                         
                        </ul>                  
                      </li>
                      <li><a href="/three-three">3.3</a></li>
                    </ul>
                  </li> 
                </ul>
    

    Currently, I can use the tab key to navigate through the top level items (in other words, I can tab from “Top Level One” to “Top Level Two” to “Top Level Three”) but I would also like to do the following to meet accessibility guidelines:

    1. Open submenus when their parent item has focus.
    2. Allow users to navigate through the second, third and fourth level submenus using the arrow keys.

    Thanks for any help you might be able to give!

    #3545
    katieTBA
    Participant

    Edit to correct item 1. above:
    I would like to open submenus when their sibling link item has focus.

    #3551
    katieTBA
    Participant

    For anyone with a similar question, I used the keyboard addon available on the Smart Menus GitHub: https://github.com/vadikom/smartmenus/tree/master/src/addons/keyboard.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?