Making accessible links

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Making accessible links

Post by alex.barylski »

Not sure where this belongs...hopefully here is fine?

Anyways, how do you go about making a <a> accessible when it uses JS?

Code: Select all

<a href="javascript: var ret = confirm('Are you sure you want to logout');">Logout</a>
I assume you specify href as a normal link - and possibly change the href after onload()?

Could you use the <a> onclick handler to perform the confirm and upon return would the link carry out as normally - assuming you don't cancel the event?

I'll check the last statement out, but i'm curious how you all make accessible links like above?

Cheers :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Client side would be more appropriate. :)

Anyway... I use jquery (thanks Kieran!) to replace the standard links after document has loaded. You could do this w/out jquery, but it's much easier with it.

So here's the link:

Code: Select all

<a href="delete.php?id=23" class="delete">Delete</a>
now, once document is ready, replace with js onclick and change href

Code: Select all

$(function(){
    $('.delete').attr('href','javascript:;').click(function(){
        // do whatever you need to do onclick!
    });
});
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

The Ninja Space Goat wrote:Client side would be more appropriate. :)

Anyway... I use jquery (thanks Kieran!) to replace the standard links after document has loaded. You could do this w/out jquery, but it's much easier with it.

So here's the link:

Code: Select all

<a href="delete.php?id=23" class="delete">Delete</a>
now, once document is ready, replace with js onclick and change href

Code: Select all

$(function(){
    $('.delete').attr('href','javascript:;').click(function(){
        // do whatever you need to do onclick!
    });
});
Oh yea...is that what jQuery is all about? Whats with the dollar signs though, looks like PHP?

I just did it with minimal fuss using JS

Thanks for that :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

The dollar sign is actually a function name believe it or not. Jquery is hands down the coolest js library I've every seen. Basically what that little snippit does is find all elements that could be matched with ".delete" (think css selectors), then it changes the attib(ute) href to javascript:; then it adds a function to the onclick event.

8) http://docs.jquery.com/Main_Page
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

:-) I'm such a jQuery whore... glad to see it's contagious!

Accessible links should still do the expected action even if there's no javascript.

In your case I would add a "confirm" dialog to each "logout" dialog after the fact. Also you should have a title="something" on each a element:

Code: Select all

<a href="/logout.php" title="log out of the system" class="confirm">Logout</a>

<script type="text/javascript">
$(function(){
	$('.confirm').click(function(){
		var act = $(this).attr('title')?$(this).attr('title'):'do this';
		return confirm('are you sure you want to '+act+'?');
	});
});
</script>
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Forgot about title, thanks for that dude...

Does jQuery make form validation on the client end of things any easier?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I use it for that as well, but I use non-valid syntax for it.

Code: Select all

<script type="text/javascript">
$(function(){
	$("input[@pattern]").keyup(function(){
		if(eval('/'+$(this).attr('pattern')+'/i').test(this.value)){
			$(this).css('color','green'); // is valid
			// maybe enable the form here
		}else{
			$(this).css('color','red'); // is invalid 
			// maybe disable the form here
		}
	});
});
</script>

<input type="text" name="email" pattern="^[\d\w\.-_]+@([\d\w][\d\w\.-|]+[\d\w]\.)+\w{2,4}$"/>
The syntax will be valid and working when xforms are supported, and then we would just not use jQuery for this.

You could just add a "check all" function to the form submit button to validate before submission.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

I'm not sure I understand the $ as a function name...why would they use '$' sign?

Know of any equally cool JS FORM validation libraries?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

If you mean accessible via the keyboard you can use accesskeys and tabindex.

Code: Select all

<a href="#" tabidex="1"...

Code: Select all

<a href="#" accesskey="a"...
Tabindex msut be 0 or higher. Accesskeys work as ALT+[key] in IE but ALT+SHIFT+[key] in Gecko browsers for some reason. Hope this helps?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Just the one I built - which is mostly recreated in the above post. Has support for validating against a regex - too flexible?

xforms will eventually support the same syntax, you can't go wrong IMO.
Post Reply