The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tabbing through sub-menus, tab index
soupi
post Jan 22 2020, 01:40 PM
Post #1


Newbie
*

Group: Members
Posts: 13
Joined: 14-November 13
Member No.: 19,980



Hello I have a quick menu bar that I am trying to make accessible.
When I tab it works but on a menu that has sub-menu it dosnt go down the submenu... How do I fix this?
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
    

background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
}    

h3 {
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #FFF;
}

h3 a {
    color: #FFF;
}

a {
    color: #FFF;
}

h1 {
    margin-top: 100px;
    text-align:center;
    font-size:60px;
    line-height: 70px;
    font-family: 'Bree Serif', 'serif';
    }

#container {
    margin: 0 auto;
    max-width: 890px;
}

p {
    text-align: center;
}

.toggle,
[id^=drop] {
    display: none;
}

/* Giving a background-color to the nav container. */
nav {
    margin:0;
    padding: 0;
    background-color: #254441;
}

#logo {
    display: block;
    padding: 0 30px;
    float: left;
    font-size:20px;
    line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */

nav:after {
    content:"";
    display:table;
    clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
    float: right;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }
    
/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display:inline-block;
    float: left;
    background-color: #254441;
    }

/* Styling the links */
nav a {
    display:block;
    padding:14px 20px;    
    color:#FFF;
    font-size:17px;
    text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover {
    background-color: #000000;
}

/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px;
}
    
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}
    
/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers    
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top:-60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left:170px;
}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

#logo {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
    float: none;
}

nav {
    margin: 0;
}

/* Hide the navigation menu by default */
/* Also hide the  */
.toggle + a,
.menu {
    display: none;
}

/* Stylinf the toggle lable */
.toggle {
    display: block;
    background-color: #254441;
    padding:14px 20px;    
    color:#FFF;
    font-size:17px;
    text-decoration:none;
    border:none;
}

.toggle:hover {
    background-color: #000000;
}


/* Change menu item's width to 100% */
nav ul li {
    display: block;
    width: 100%;
    }

nav ul ul .toggle,
nav ul ul a {
    padding: 0 40px;
}

nav ul ul ul a {
    padding: 0 80px;
}

nav a:hover,
nav ul ul ul a {
    background-color: #000000;
}
  
nav ul li ul li .toggle,
nav ul ul a,
  nav ul ul ul a{
        padding:14px 20px;    
        color:#FFF;
        font-size:17px;
    }
  

  

nav ul li ul li .toggle,
nav ul ul a {
    background-color: #212121;
}

/* Hide Dropdowns by Default */
nav ul ul {
    float: none;
    position:static;
    color: #ffffff;
    /* has to be the same number as the "line-height" of "nav a" */
}
    
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
    display: none;
}
    
/* Fisrt Tier Dropdown */
nav ul ul li {
    display: block;
    width: 100%;
}

nav ul ul ul li {
    position: static;
    /* has to be the same number as the "width" of "nav ul ul li" */

}

}

@media all and (max-width : 330px) {

nav ul li {
    display:block;
    width: 94%;
}

}
</style>
<title>Menu Navigation Test</title>
</head>
<body>
        <nav>
        <div id="logo">Syracuse University Libraries</div>

    <label for="drop" class="toggle">Menu</label>
    <input type="checkbox" id="drop" />
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
                <!-- First Tier Drop Down -->
                <label for="drop-1" class="toggle">About</label>
                <a href="#">About</a>
        
                <ul>
                    <li><a href="#">Departments</a></li>
                    <li><a href="#">News</a></li>
                </ul>

            </li>
            <li>
            <!-- First Tier Drop Down -->
            <label for="drop-2" class="toggle">Rooms</label>
            <a href="#">Rooms</a>
            <input type="checkbox" id="drop-2"/>
            <ul>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Links</a></li>
                <li>
                <!-- Second Tier Drop Down -->        
                <label for="drop-3" class="toggle">Spaces</label>
                <a href="#">Rooms (Dropdown)</a>        
                <input type="checkbox" id="drop-3"/>
                <ul>
                    <li><a href="#">Learning Commons</a></li>
                    <li><a href="#">Locations</a></li>
                    <li><a href="#">Reserve a Room</a></li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">Special Collections</a></li>
            <li><a href="#">Giving</a></li>
            <li><a href="#">More</a></li>
        </ul>
    </nav>

<!-- Sample Text -->
<h1><p>This is a Generic Hierarchical Menu Navigation.</p></h1>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>


<footer>

   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
</body>


</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
soupi
post Jan 23 2020, 09:18 AM
Post #2


Newbie
*

Group: Members
Posts: 13
Joined: 14-November 13
Member No.: 19,980



anyone have an idea?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2020, 11:21 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,539
Joined: 9-August 06
Member No.: 6



Only vaguely. I think JS is needed to make such a menu "tabbable".

At the bottom of this page they list a lot of things we *should* do. Alas they don't tell us *how* we should do them.
https://accessuse.eu/en/drop-down-menus.html

Here they talk about an accessible super duper menu Adobe of all people has made available to the public.
https://terrillthompson.com/474

Here's WAI's take on it.
https://www.w3.org/WAI/tutorials/menus/flyout/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 23 2020, 01:16 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,296
Joined: 10-August 06
Member No.: 7



This seems to work in Firefox and Chromium. MSIE and Edge running on EdgeHTML don't support it, but I suppose Edge will add support once it becomes Chromium-based:

CSS
CODE
li ul {display: none;}

li:focus-within ul,
li:hover ul {display: block;}


HTML
CODE
<ul>
<li><a href="#">top 1</a></li>
<li><a href="#">top 2</a>
    <ul>
    <li><a href="#">sub 1</a></li>
    <li><a href="#">sub 2</a></li>
    </ul>
</li>
<li><a href="#">top 3</a></li>
</ul>

See also https://developer.mozilla.org/en-US/docs/We...S/:focus-within
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd February 2020 - 10:20 PM