I would like to get some advice on WAI-ARIA markup I have added to my paginated post navigation.
Does this look correct, am I missing anything?
Should anything be added/removed to the current page link (#2)?
Also, curious on my "Page Count" and "View All" sections what if anything can be added to make it more ARIA-friendly.
<nav role="navigation" class="post-navigation">
<ul role="menubar" class="pagination">
<!-- Page Count -->
<span class="page-count">Page 2 of 4 </span>
<li aria-label="Previous">
<a role="menuitem" aria-posinset="1" data-pagenum="1" href="#">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a role="menuitem" aria-posinset="1" data-pagenum="1" href="">1</a>
</li>
<li class="active">
<span role="menuitem" aria-posinset="2">2</span>
</li>
<li>
<a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">3</a>
</li>
<li>
<a role="menuitem" aria-posinset="4" data-pagenum="4" href="#">4</a>
</li>
<li aria-label="Next">
<a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
<!-- View All link handing -->
<li aria-label="View All">
<a role="menuitem" href="#?viewall">View All</a>
</li>
</ul>
</nav>
Related
i am using the bootstrap dropdown menu. and transitions between pages, I can provide my transitions without refreshing the page, but there is a situation where I get stuck, when the menu a href and submenu a hrefs are clicked, the dropdown remains open, I want it to be closed in an animated way. Finally, when "menu-item-has-children a" is clicked, "display: none" opens and when I click it again, it doesn't close. I couldn't understand why this was happening.
<div class="header__navigation">
<nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
<ul class="main-navigation js-main-nav js-dropdown">
<li class="menu-item">
Home
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Corporate</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Services</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">İmportant İnformation</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
</li>
</ul>
</li>
<li class="menu-item">Contact Us</li>
</ul>
</nav>
</div>
$(".sub-menu").hide();
$('.menu-item-has-children a').click(function (event) {
event.preventDefault();
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.sub-menu').length) {
$(this).siblings('.sub-menu', elems).show();
}
});
$("li.menu-item").click(function () {
$('.navbar-collapse').removeClass('in');
});
$(".menu-item ul li a").click(function () {
$('.navbar-collapse').removeClass('in');
});
I think that is just a matter of using .toggle() instead of .show() to be able to close a sub-menu when it is already opened.
$(".sub-menu").hide();
$(".menu-item-has-children a").click(function (event) {
event.preventDefault();
var elems = $(this).closest("li");
elems.siblings("li").find("ul").hide();
if (elems.find(".sub-menu").length) {
$(this).siblings(".sub-menu", elems).toggle(); // .toggle() instead of .show() here...
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header__navigation">
<nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
<ul class="main-navigation js-main-nav js-dropdown">
<li class="menu-item">
Home
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Corporate</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Services</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">İmportant İnformation</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
</li>
</ul>
</li>
<li class="menu-item">Contact Us</li>
</ul>
</nav>
</div>
Edit based on comments.
my pages are running with xhr request
So I now assume that a click on a .list-entry link (link on the second menu level) triggers an xhr to update a part of the page... And that menu stays opened because it is not part of the page that changes.
So you would just need additionnal event handler. Something like:
$(".list-entry").click(function(){
$(".sub-menu").hide();
})
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 am using materialize collapsible for my navigation. Everything works fine except when I reload the page. The collapsible gets closed and I have to manually make it active again. How do I make the collapsible remain active on page reload?
Here's my code:
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<ul class="collapsible" data-collapsible="expandable">
<li>
<a class="collapsible-header">
<i class="material-icons">home</i> Home
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="protect" ui-sref-opts="{reload: true}">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="store" ui-sref-opts="{reload: true}">
<i class="material-icons">cloud_done</i> Storage
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header">
<i class="material-icons">event_available</i>Manage
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="manage" ui-sref-opts="{reload: true}">
<i class="material-icons">storage</i> Manage Storage
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="enroll" ui-sref-opts="{reload: true}">
<i class="material-icons">file_download</i> Enroll
</a>
</li>
</ul>
</div>
</li>
</ul>
</ul>
What you want to do concerns program state, hence there's no way for you to do that unless you save the name or id of the active accordion. which can easily be done using browser local storage.
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.
My navigation bar isn't displaying the dividers for every subpage element. This is only happening in google chrome,not IE or FF. Here is an image (click here for larger size of image):
Here is my HTML code:
<li class="dropdown">
<a href="/jrknet/www/company" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
Company
<b class="caret">
</b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/jrknet/www/company/about-us">
About us
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/meet-the-team">
Meet the Team
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/mission-statement">
Mission Statement
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/development-methodology">
Development Methodology
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/quality-management">
Quality Management
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/business-continuity">
Business Continuity
</a>
</li>
</ul>
You can check zoom-in and zoom-out when such issues arise..
i don't find any problem with the code..
Moreover, if the problem remains, you can try changing your display resolution..