Jump to content

selecting <a> with no href


Recommended Posts

Hello -I want to know if it's possible to force <a>s to be selectable (with tab etc.: a dotted line appears around the element, pressing return is like clicking it) when they don't have an href attribute, as they don't appear to be (in Firefox at least), and I'm concerned this may cause an accessibility issue.I don't want the href link because I'm using a client-side include (I know... :)) to replace the main text when the user uses the navigation bar, as an alternative to loading the nearly identical pages which are there as a backup in case javascript is disabled. (My host doesn't allow server-side scripting.) If enabled, the javascript replaces the navigation bar containing links (see below) with one in which there is no href attribute but which instead calls a function to replace the text. When in the second mode, pressing tab skips right past the list of <a>s and hence the menu items can't be selected without a mouse.

<ul id="nav" onkeydown="chnav()" onmouseover="chnav()">    <li><a class="index" href="index.html">Home</a></li>    <li><a class="contact" href="contact.html">Contact Details</a></li></ul>

Which chnav() changes to

<ul id="nav">    <li><a class="index" onclick='disp("index")'>Home</a></li>    <li><a class="contact" onclick='disp("contact")'>Contact</a></li></ul>

disp(string) replaces the content of a tag further down.Is there any way of restoring or imitating the <a>s' functionality?I am aware of the limitations of this approach with respect to bookmarks and opening additional tabs/windows.Cheers

Link to comment
Share on other sites

I believe that giving the link a tabindex attribute should allow it to be tabbed.Generally, I rather give some kind of value to the href of the links and use Javascript to prevent the link from working. For example, if Javascript is disabled you can make the link actually open the section:

<ul id="nav" onkeydown="chnav()" onmouseover="chnav()">	<li><a href="index.html" class="index" onclick='disp("index"); return false;'>Home</a></li>	<li><a href="contact.html" class="contact" onclick='disp("contact"); return false;'>Contact</a></li></ul>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...