Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

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)
  • The forum ‘1.0.x’ is closed to new topics and replies.