Setting or holding keyboard navigation focus position

Hi- I thought it might be nice if I could devise a method to get stronger visual indication when somebody is keyboard navigating a site. It seems to me that those little dotted lines is very weak visual indication, even to somebody with good eyesight and certainly to someone with poor eyesight. So a method of stronger visual indication was needed in my opinion. So I was thinking if say one could change background color of the parent li tag of the link tag (<a>) styled as a CSS button one would have strong visual indication for that button when keyboard navigating. I tried it it worked, but there's a bug. I am using one of my pure CSS switches as a toggle switch to turn on and off the slide advancement of a timed JavaScript slideshow. So my switch is a toggle switch. When the switch toggles the focus of my switch is lost and seems to end up in the browser address window. I wanted to end up back on my switch with the change background color of the parent li tag maintained. This does not happened so does anyone here have any ideas on how I can make it happen with a little more code. The relevant HTML and JavaScript follows. I am not including my CSS since it is not relevant to this question. Your ideas would be greatly appreciated.
Sincerely Marc

PS I know removing the call of "changeParentColorOff(this)", in the onclick event handler, will fix this problem, but that is not an option since the change background color is only supposed to be a feature of keyboard navigating and not mouse navigating.

HTML

<body>
<ul>
<li >
<a href="Fantasy_Bob_Home.html"
tabindex="10"
onfocus="changeParentColorOn(this)"
onblur="changeParentColorOff(this)">
Fantasy Bob Home Page return
</a>
</li>
<li id="imageHolderHight"><img src="wedding_HQ/HQ5.jpg"
id="slide" alt="Wedding Slideshow"/>
</li>
<li>
<a href="#" onclick="buttonStateChanger();changeParentColorOff(this)"
tabindex="20"
id="a1" title="Toggling
switch with Toggling switching message"
onfocus="changeParentColorOn(this)"
onblur="changeParentColorOff(this)" >
Click here to stop picture changing
</a>
</li>
</ul>
</body>

Javascript

function changeParentColorOn(passingThis)
{
passingThis.parentNode.style.backgroundColor='#8DACCD';
}
function changeParentColorOff(passingThis)
{
passingThis.parentNode.style.backgroundColor='transparent';
}

Setting or holding keyboard navigation focus position

with your CSS toggle switch?

MarcMiller

MarcMiller

Bernard Marx

DrDoc

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week