I am using http://validator.w3.org/nu/ to perform HTML5 validation on my document. I don't understand why I get a validation error on the following code. I checked http://www.w3.org/TR/wai-aria/roles#treeitem and thought it was ok to place an li element with role="treeitem" inside an element ul with role="group". The nu validator tells me it is not allowed. I'd like to know if nu validator is correct in his verdict, and if so, where can we find the information about the schema for ARIA trees that stipulates that. Thank you.
Sample code that does not validate:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Trees</title>
</head>
<body>
<h1 id="label_1">Fruits and vegetables</h1>
<ul id="tree" role="tree" tabindex="0" aria-labelledby="label_1">
<li role="treeitem" aria-expanded="true">
Fruits
<ul id="tree1_1" role="group">
<li role="treeitem">Oranges</li>
<li role="treeitem">Apples</li>
</ul>
</li>
<li role="treeitem">
Vegetables
<ul id="tree1_2" role="group">
<li role="treeitem">Carrots</li>
</ul>
</li>
</ul>
</body>
</html>
role="group" is definitely allowed on ul elements. The HTML5 spec currently reflects this as well. Validator.w3.org/nu/ and http://validator.w3.org/ both corectly treat this as valid. Validator.nu still seems to flag it as invalid though.
Regardless of validation, using nested trees is not the right choice here. It might pass the validator, but that's most likely just because it's allowed to nest widgets (just like you can have a slider or text field nested in a tree item). But they are still treated as separate widgets, not as the single, composite widget that a tree is supposed to be. The inner tree would not be part of the outer tree's structure, it would just be just a separate widget that happens to be nested in one of its tree items.
On your line 13 and line 19 you need to have role = tree and not role=group
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Trees</title>
</head>
<body>
<h1 id="label_1">Fruits and vegetables</h1>
<ul id="tree" role="tree" tabindex="0" aria-labelledby="label_1">
<li role="treeitem" aria-expanded="true">
Fruits
<ul id="tree1_1" role="tree">
<li role="treeitem">Oranges</li>
<li role="treeitem">Apples</li>
</ul>
</li>
<li role="treeitem">
Vegetables
<ul id="tree1_2" role="tree">
<li role="treeitem">Carrots</li>
</ul>
</li>
</ul>
The validator does choke on role=group because of Group Definition and if you read between the lines the list items are not in there. you have treeitem in your list so role would be tree and not group.
Interesting question. The validator behaviour does seem a bit odd. The WAI-ARIA spec does seem to allow group as a container for treeitem.
On the other hand the HTML5 spec does not allow "group" to be a role on the <ul> element. It must be either "directory", "list", "listbox", "menu", "menubar", "tablist", "toolbar", "tree" or "presentation"; yet the validator does not complain about that.
Either way, it seems you should use "tree" rather than "group".
<div role="application">
<h2 id="label_1">Foods</h2>
<ul id="tree1" class="tree" role="tree" aria-labelledby="label_1">
<li id="fruits" role="treeitem" tabindex="0" aria-expanded="true">Fruits
<ul role="group">
<li id="oranges" role="treeitem" tabindex="-1">Oranges</li>
<li id="pinapples" role="treeitem" tabindex="-1">Pineapples</li>
<li id="apples" role="treeitem" tabindex="-1" aria-expanded="false">Apples
<ul role="group">
<li id="macintosh" role="treeitem" tabindex="-1">Macintosh</li>
<li id="granny_smith" role="treeitem" tabindex="-1" aria-expanded="false">Granny Smith
<ul role="group">
<li id="Washington" role="treeitem" tabindex="-1">Washington State</li>
<li id="Michigan" role="treeitem" tabindex="-1">Michigan</li>
<li id="New_York" role="treeitem" tabindex="-1">New York</li>
</ul>
</li>
<li id="fuji" role="treeitem" tabindex="-1">Fuji</li>
</ul>
</li>
<li id="bananas" role="treeitem" tabindex="-1">Bananas</li>
<li id="pears" role="treeitem" tabindex="-1">Pears</li>
</ul>
</li>
<li id="vegetables" role="treeitem" tabindex="-1" aria-expanded="true">Vegetables
<ul role="group">
<li id="broccoli" role="treeitem" tabindex="-1">Broccoli</li>
<li id="carrots" role="treeitem" tabindex="-1">Carrots</li>
<li id="lettuce" role="treeitem" tabindex="-1" aria-expanded="false">Lettuce
<ul role="group">
<li id="romaine" role="treeitem" tabindex="-1">Romaine</li>
<li id="iceberg" role="treeitem" tabindex="-1">Iceberg</li>
<li id="butterhead" role="treeitem" tabindex="-1">Butterhead</li>
</ul>
</li>
<li id="spinach" role="treeitem" tabindex="-1">Spinach</li>
<li id="squash" role="treeitem" tabindex="-1" aria-expanded="true">Squash
<ul role="group" >
<li id="acorn" role="treeitem" tabindex="-1">Acorn</li>
<li id="ambercup" role="treeitem" tabindex="-1">Ambercup</li>
<li id="autumn_cup" role="treeitem" tabindex="-1">Autumn Cup</li>
<li id="hubbard" role="treeitem" tabindex="-1">Hubbard</li>
<li id="kobacha" role="treeitem" tabindex="-1">Kabocha</li>
<li id="butternut" role="treeitem" tabindex="-1">Butternut</li>
<li id="spaghetti" role="treeitem" tabindex="-1">Spaghetti</li>
<li id="sweet_dumpling" role="treeitem" tabindex="-1">Sweet Dumpling</li>
<li id="turban" role="treeitem" tabindex="-1">Turban</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Related
Guys i have a couple of unclearities.
Am optimising my website for google and i start to use strured data.
First question:
My site have main menu with sub menu and that sub manues have own sub menues etc...
Does all sub menues also need to have declared itemscope itemtype="http://www.schema.org/SiteNavigationElementor just parent need to have?
Check my example below:
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="#">Car Parts</a></li>
<li itemprop="name">
<a itemprop="url" href="#">Car Models</a>
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="dropdown"> <!-- THIS -->
<li itemprop="name"><a itemprop="url" href="#">Sub menu</a></li>
</ul>
</li>
</ul>
Or just need like this
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="#">Car Parts</a></li>
<li itemprop="name">
<a itemprop="url" href="#">Car Models</a>
<ul class="dropdown"> <!-- THIS -->
<li itemprop="name"><a itemprop="url" href="#">Sub menu</a></li>
</ul>
</li>
</ul>
Second question
<li itemprop="name"> value of itemprop is name. Does this need to stay with name value or i need to change name => Car Models ?
<a itemprop="url"> does url need to change with my www.example.com/category or just leave url?
Thanks
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="#">Car Parts</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#">Car Models</a>
<ul class="dropdown-menu">
<li class="nav-item" itemprop="name">
<a class="dropdown-item nav-link" itemprop="url" href="https://stackoverflow.com">stackoverflow</a>
</li>
</ul>
</li>
</ul>
Itemprop should be defined on the navigation items and not the dropdown containers. You also do not need to repeat the schema declaration nor do you need to redeclare the itemscope.
Also, itemprop="" is defining what type of property the dom item is defining. So it should stay as "name" and "url".
here is a Mozilla article explaining itemprop: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop
I'm making a dropdown menu in bootstrap.
Now I use in the li a a element where is described to toggle the dropdown menu.
But I actually want to put what is in the a element in to the li...
Because the whole li has to be clickable.
Hope you guys have I tip for me. ;)
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
please apply 'dropdown' class to the li where you wants to add dropdown like this.
<ul class="list-group">
<li class="list-group-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
You can just make the a tag take full width and then the entire li becomes clickable.
.dropdown-toggle{
display:inline-block;
width: 100%;
cursor: pointer;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
I have run into a bug with Bootstraps navbar-fixed-top with the iPhone 6+'s mobile safari in landscape on iOS 8. The bug only happens with other tabs open.
Here is how to replicate it:
1) Go to http://getbootstrap.com/examples/navbar-fixed-top/ on your iPhone 6+ in landscape – be sure you have one other tab open
2) Scroll down the page without opening the collapse
3) Once Safari's status bar (the url and tabs) goes away, open the navbar
4) Scroll back up so that Safari's status bar with tabs comes back up
5) Try to close the navbar.
I had this bug in iOS 7, but was able to fix it by adding the viewport minimal-ui meta. I have tested my iPhone 6+, and the 6+ iPhone simulator with the latest version of iOS 8. It appears the tabs are to blame since the regular iPhone 6 doesn't have this problem because the tabs do not show on the status bar. I would imagine this bug goes beyond just Bootstrap though, but applies to any fixed element on the top.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="to-sticky navbar-fixed-top">
<div class="nav-container">
<div class="navbar">
<div class="navbar-header">
<a type="button" class="navbar-toggle btn-secondary btn" data-toggle="collapse" data-target=".navbar-ex1-collapse">
Main Menu
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" role="menubar">
<!--unless submenu-->
<li class="active nav-home first-li ">
Home
</li>
<li class="nav-dot nav-home">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
About<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Chair's Welcome
</li>
<li class="">
History
</li>
<li class="">
Campbell Hall
</li>
<li class="">
FAQs
</li>
<li class="">
Jobs & Fellowships
</li>
<li class="">
Integrity Statement
</li>
<li class="">
Contact
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
People<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="hidden-xs dropdown-submenu">
Faculty<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Faculty<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class=" ">Current
</li>
<li class=" ">Emeriti
</li>
</ul>
</li>
<li class="">
Researchers
</li>
<li class="">
Postdocs
</li>
<li class="">
Visiting Scholars
</li>
<li class="hidden-xs dropdown-submenu">
Graduate Students<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Graduate Students<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="">Current
</li>
<li class="">Alumni
</li>
</ul>
</li>
<li class="">
Staff
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
News & Events<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Department News
</li>
<li class="">
Department Events
</li>
<li class="">
Campus Calendar
</li>
<li class="">
Newsletters
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Academic Programs<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="hidden-xs dropdown-submenu">
Undergraduate<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Undergraduate<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="">Undergraduate Overview
</li>
<li class="">Requirements of the Astrophysics Major
</li>
<li class="">Declaring the Major
</li>
<li class="">How to Apply
</li>
<li class="">Undergraduate Resources
</li>
<li class="">Undergraduate Student Learning Initiative
</li>
<li class="">Policy on Academic Misconduct
</li>
</ul>
</li>
<li class="hidden-xs dropdown-submenu">
Graduate<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Graduate<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="">Graduate Overview
</li>
<li class="">Degree Requirements
</li>
<li class="">How to Apply
</li>
<li class="">Graduate Resources
</li>
<li class="">Teaching Opportunities
</li>
<li class="">Student Services
</li>
</ul>
</li>
<li class="hidden-xs dropdown-submenu">
Courses<b class="caret"></b>
</li>
<!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
<li class="visible-xs dropdown-submenu">
Courses<b class="caret"></b>
<ul class="dropdown-menu sub-menu" role="menu">
<li class="
active 3">
<a href="/courses/undergraduate/2015/SU" role="menuitem">
Summer
2015
• Undergraduate
</a>
</li>
<li class="
">
<a href="/courses/undergraduate/2015/SP" role="menuitem">
Spring
2015
• Undergraduate
</a>
</li>
<li class="
active 3">
<a href="/courses/graduate/2015/SU" role="menuitem">
Summer
2015
• Graduate
</a>
</li>
<li class="
">
<a href="/courses/graduate/2015/SP" role="menuitem">
Spring
2015
• Graduate
</a>
</li>
</ul>
</li>
<li class="">
Financial Aid
</li>
<li class="">
Student Prizes and Awards
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Prospective Students<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Why Berkeley Astronomy
</li>
<li class="">
Tuition
</li>
<li class="">
UNEX and Summer Sessions
</li>
<li class="">
About Berkeley
</li>
<li class="">
Statement on Diversity
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Research & Facilities<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Facilities
</li>
<li class="">
Organized Research Units
</li>
<li class="">
Research Opportunities
</li>
<li class="">
Projects
</li>
<li class="">
Labs
</li>
<li class="">
Libraries
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
Department Resources<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Forms and Documents
</li>
<li class="">
Computing at Berkeley Astronomy
</li>
<li class="">
Campus Shared Services
</li>
<li class="">
Access & Building
</li>
<li class="">
Hosting Speakers & Visitors
</li>
<li class="">
Building Procedures
</li>
<li class="">
Campus Resources
</li>
</ul>
</li>
<li class="nav-dot">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown last-li">
Friends & Fans<b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li class="">
Outreach
</li>
<li class="">
Make A Gift
</li>
<li class="">
Ask an Astronomer
</li>
<li class="">
Local Resources
</li>
<li class="">
Department Merchandise
</li>
</ul>
</li>
</ul>
<form action="/search" class="search_form visible-xs navbar-form navbar-right" method="post" role="search">
<div class="input-group">
<input class="form-control input-sm search_text" name="search_text" type="text" placeholder="">
<span class="input-group-btn">
<button type="submit" class="btn btn-color btn-sm"><span class="glyphicon glyphicon-search"></span><span class="sr-only">Search</span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I have yet to find a work around. Any ideas?
If I understand correct this issue comes up whenever the landscape tabs are open. You will be unable to either open/or close the mobile menu.
I managed to fix it with a workaround:
Make an absolute positioned div(with id #ios_menu_fix in this case) about the size of the toggle button.
In css align it where the toggle button would be in the fixed nav menu. Make sure it has z-index set and also -webkit-transform: translate3d(0,0,0); to fix ios z-index issue when scrolling up.
Every time page is scrolled set the top to page scrolled height like so:
$(window).on('scroll',function() {
$("#ios_menu_fix").css("top", $(document).scrollTop()+"px");
});
Open/close the menu when #ios_menu_fix is clicked
$(".nav-collapse").collapse('hide');
$(".nav-collapse").collapse('show');
You can check if the menu is open like so:
var toggle = $(".nav-collapse").is(":visible");
if (toggle) {
$(".nav-collapse").collapse('hide');
}
else {
$(".nav-collapse").collapse('show');
}
Its an ugly solution but the only one I currently find working that doesn't break other mobile browsers and layouts.
These code examples use JQuery.
The dropdown in the navigation is not working. The html is as follows. Help will be appreciated.
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
Your html is fine the only thing missing is the jQuery code and the bootstrap js, add these in the same order under your last </div>.
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
You need to include the bootstrap and jquery libraries, they handle the logic for displaying the dropdown interface working example below:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
You had a container inside a row and content inside a container, I've corrected that. The correct hierarchy is container => row => col-??-##. If you put it in any other order, it will malfunction. This should work. I'm assuming you've added thetag for bootstrap.min.js (or whatever flavor you prefer) andjquery`. If not, please do so.
<div class="container menu_bg">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">SVN</li>
<li role="presentation">iOS</li>
<li role="presentation">VB.Net</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Java<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
</div>
I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.