Daily dish menu accessibility via keyboard

[cyanoorange]

Hi everyone,
the daily-dish theme is nice, but I have difficulties to make the menu accessible for people using the tab-key to navigate. I tried:
superfish -> doesn't work
Genesis Accessible Dropdown Menu Plugin-> it shows the submenus but the whole navigation gets replaced in a bad way
Genesis Accessible Plugin -> it shows the submenu once, but while you tab through the submenu it disappears. Sub-Sub-Menu is not possible to make visible with the keyboard.

Now - has anybody a solution for the daily-dish theme to have a full working keyboard navigation for the main menu?
It would be great, if anybody could help.
Thanx

http://www.theaterberatung-bw.de/wpsite/wordpress/

[David Chu]

Hi,
Sehr interessant. 😉 I can see that your tabs work fine, but they don't make the sub items visible (it would already be fine for blind people, maybe). I don't have a positive answer - each theme is different, and each site has different plugins. But I have some ideas.

I have spent some time working with accessibility in Genesis, and I would recommend that you try WP Accessibility:

WP Accessibility

When I use that and tab through menu items, it applies a class (via Javascript) that helps to show sub menu items well. It also has other helpful settings if you need them.

My favorite solution is actually to avoid dropdowns as much as possible. 😉

Mach's gut,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[cyanoorange]

Hallo Dave,
thanks for your quick response. But like I wrote, I tried the Genesis Accessible Plugin and it doesent work with this navigation. In some browsers e.g firefox the behaviour is like my description in the first post. In other browsers e.g. IE the submenu ist not on the right place (not only when using the keys but when using the mouse too).
Grüße
Nicole

[David Chu]

Nicole,
I understand. The WP Accessible plugin is not the same as the Genesis one, and that's the one that does the "magic". Did you try it?

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[cyanoorange]

Hi Dave,
yes - this is the one I have tried -> Genesis Accessible.
And it shows all the effects I described above.
Nicole

[cyanoorange]

Sorry Dave,
I was too fast. Now I understand. I try the other plugin and see what happens.
Nicole

[cyanoorange]

Now I tried the WP Accessible Plugin, but it has no effect to the navigation via keyboard with the daily dish menu 🙁

[David Chu]

Hallo,
Es tut mir leid! My mistake.... the theme I'm using has special code for this even without those plugins, so I misunderstood how to make this work.

Please try this instead. Go back and use Genesis Accessible plugin. And here's what I forgot: go to Genesis..... Accessibility Settings, and be sure to check (select) "Add keyboard accessiblility to the dropdown menu".

I think that should work. 🙂

Thanks, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[cyanoorange]

Hallo,
I have tried this, how I said in my first post:

Genesis Accessible Dropdown Menu Plugin-> it shows the submenus but the whole navigation gets replaced in a bad way

Means: all subemenu elements are shifted to the left.

Thanks fürs mitüberlegen
Nicole

[cyanoorange]

My next idear. I tried to find the code for the tab-navigation in the genesis-dropdown plugin.
Now i know what causes the problem.
There are two files which are important. The js and the css-file.

.menu .menu-item:focus {
	position: static;
}

.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.wpacc-hover > ul.sub-menu
 {
left: auto;
	opacity: 1;
}

The left:auto, causes the problems, with the rollover navigation via mouse. There you need to have left:50%.

I think the easiest way could be, that you can distinct between tab and mouse- so the left-property only changes if you really use the tab-key.

The js. file does the following:

( function($) { 

	$('.menu li').hover(
		function(){$(this).addClass("wpacc-hover");},
		function(){$(this).delay('250').removeClass("wpacc-hover");}
	);
	
    	$('.menu li a').on('focus blur',
    		function(){$(this).parents(".menu-item").toggleClass("wpacc-hover");}
    	);
	
	}
	
	(jQuery)
	
);

Right now, I havent found the solution, how to adapt it. Anybody an idea? Would be great.

[David Chu]

Hi,
Sorry about all the false clues. I took another look, and could not solve it, but can point you in a direction. I experimented with your site as it is right now. I tried doing only CSS changes. To do accessibility with CSS only, ":focus" is a very important item. By using the adapted code below, I was able to get the top row of items to work with tab, but could not "reach" the dropdowns because of the structure of the rest of the CSS.

Focus is not the same as hover, so the hover values don't work here. So you'll also notice that I changed the left and margin figures for the focus part. So maybe you could use that plugin that gave you the funky spacing, but adjust the left and margin figures. It won't be exact.

Ironically, this would work for blind people, as the spacing isn't as less of a concern I think, but someone sighted and using a mouse might find it a little "off". Bottom line: this theme's CSS works well with hovers but not with focus. They may end up changing it for accessibility, but they may not.

.genesis-nav-menu .menu-item:hover, .genesis-nav-menu .menu-item a {
	position: relative;
}

.genesis-nav-menu .menu-item:hover > .sub-menu  {
	left: 50%;
	margin-left: -100px;
	opacity: 1;
}
.genesis-nav-menu > .menu-item a:focus + .sub-menu  {
	left: auto;
	margin-left: -35px;
	opacity: 1;
}

If you're quite handy with Javascript or jQuery, those could probably help.

That's about as far as I will go from the outside as a volunteer. Good luck to you,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[cyanoorange]

Hello Dave,
thanks for your time and effort.
If there woudnt be a mouse, I could totally live with the solution of the plugin. But, with the mouse in use, its quite awfull.
Thanks for your thoughts - right now, I have not the right idear, but I will try to figure it out. Its too close, because the plugin-mechanism works really fine with the keyboard, I just have to find a way to explain when to change the left-property.

[Author]

Posts