Stuck on Aria Roles JS

Morning Gang.

I'm a little stumped with how to implement aria roles on a progressive responsive navigation. I've made some progress though i'm a little stuck as to where to go next.

I thought to add the <button> via js would mean no js = the nav wouldn't collapse, just reshape, then if js enabled insert the button and use the js to expand, collapse or restore to wide state, but the js button will hide above 960 but I think I need to toggle via the toggleNav() function.

I'm not sure now quite what to do about aria-expanded, aria-hidden, etc. Anyone got a good link to a guide or knows? I did some searching and came up with many different ways and wasn't sure which to believe or implement.

The HTML...

<div class="nav_bar shadow" id="nav_bar">
<div id="menu">Menu</div>
<nav role="navigation" id="nav"><ul class="title">
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 1</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 2</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 3</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 4</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 5</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 6</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 7</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 8</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 9</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Home</span></a></li>
</ul></nav>
</div>

The CSS...

#menu {display:none;}
@media only screen and (max-width : 960px) {
#menu{display:block;}
}

The JS...

function toggleNav() { if($('#menu').css('display') == 'none' ){ $('#nav').show(); $('#nav_bar').removeClass('nav_bar_closed'); } else { if($('#menu_button').hasClass('menu_on')){ $('#nav').show(); $('#nav_bar').removeClass('nav_bar_closed'); } else { $('#nav').hide(); $('#nav_bar').addClass('nav_bar_closed'); } } }
$(window).resize(toggleNav);
$(window).load(toggleNav);
$(document).ready(function(){
$('#menu').html('<button id="menu_button" class="title" aria-controls="nav">Menu<i class="fa fa-chevron-circle-down fa-fw fa-lg" aria-hidden="true"></i></button>');
$('#menu_button').click(function() {
if($('#nav').is(":visible")) {
$('#nav').slideUp(function(){ $('#nav_bar').addClass('nav_bar_closed'); });
$('#menu_button').removeClass('menu_on');
$('#menu_button i').removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
} else {
$('#menu_button').addClass('menu_on');
$('#menu_button i').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
$('#nav_bar').removeClass('nav_bar_closed');
$('#nav').slideDown();
}
});
});

Cheers!

Edit: Think i've made some progress but anyone with experience can you tell me if i'm on the mark?

The JS...

function toggleNav() { 
	if($('#menu').css('display') == 'none' ){ 
		$('#nav').attr('aria-hidden', 'false').show();
		$('#nav_bar').removeClass('nav_bar_closed');
		$('#menu_button').attr('aria-expanded', 'true').attr('aria-hidden', 'true');
	} else { 
		$('#menu_button').attr('aria-hidden', 'false');
		if($('#menu_button').hasClass('menu_on')){
			$('#nav').attr('aria-hidden', 'false').show(); $('#nav_bar').removeClass('nav_bar_closed');
			$('#menu_button').attr('aria-expanded', 'true');
		} else { 
			$('#nav').attr('aria-hidden', 'true').hide(); $('#nav_bar').addClass('nav_bar_closed');
			$('#menu_button').attr('aria-expanded', 'false');
		}
	}
}
$(window).resize(toggleNav);
$(window).load(toggleNav);
$(document).ready(function(){
	$('#menu').html('<button id="menu_button" class="title" aria-expanded="true" aria-controls="nav">Menu<i class="fa fa-chevron-circle-down fa-fw fa-lg" aria-hidden="true"></i></button>');
	$('#menu_button').click(function() {
		if($('#nav').is(":visible")) {
			$('#nav').attr('aria-hidden', 'true').slideUp(function(){ $('#nav_bar').addClass('nav_bar_closed'); });
			$('#menu_button').attr('aria-expanded', 'false').removeClass('menu_on');
			$('#menu_button i').removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
			$('#menu_button').focus();
		} else {
			$('#menu_button').attr('aria-expanded', 'true').addClass('menu_on');
			$('#menu_button i').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
			$('#nav_bar').removeClass('nav_bar_closed');
			$('#nav').attr('aria-hidden', 'false').slideDown().focus();
		}
	});
});

Edited October 1, 20169 yr by BrowserBugs