Jump to content


BrowserBugs

Member Since 07 Feb 2012
Offline Last Active Today, 09:06 AM
-----

Topics I've Started

Stuck on Aria Roles JS

30 September 2016 - 09:26 AM

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();
		}
	});
});

Multi-Element Content Labelling

16 April 2016 - 07:39 AM

Hi Gang,

 

I'm working on a pet project and hit a snag with an accessible approach to my content. I have an icon (png) with one or two spans containing stars, so it looks something like this...

<span title="Name 2 or 3 Star">
   <img src="/images/icona.png" alt="">
   <span>
       <i class="fa fa-star" aria-hidden="true"></i>
       <i class="fa fa-star" aria-hidden="true"></i>
       <i class="fa fa-star-o" aria-hidden="true"></i>
       <i class="fa fa-star-o" aria-hidden="true"></i>
       <i class="fa fa-star-o" aria-hidden="true"></i>
   </span>
   <span>
       <i class="fa fa-star" aria-hidden="true"></i>
       <i class="fa fa-star" aria-hidden="true"></i>
       <i class="fa fa-star" aria-hidden="true"></i>
       <i class="fa fa-star-o" aria-hidden="true"></i>
       <i class="fa fa-star-o" aria-hidden="true"></i>
   </span>
</span>

I used spans as I want essentially a screen readers and search engines to read "Name 2 or 3 Star" as it will need to be essentially formula based layout so "Name 2 or 3 Star + Name 2 = Result". I've shown using title but then JAWS users often have titles turned off.

 

Any ideas?

 

Thanks