Page 1 of 1

Making accessible links

Posted: Sat Feb 17, 2007 6:07 pm
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 :)

Posted: Sat Feb 17, 2007 6:13 pm
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!
    });
});

Posted: Sat Feb 17, 2007 6:16 pm
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 :)

Posted: Sat Feb 17, 2007 6:30 pm
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

Posted: Sat Feb 17, 2007 6:53 pm
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>

Posted: Sat Feb 17, 2007 8:02 pm
by alex.barylski
Forgot about title, thanks for that dude...

Does jQuery make form validation on the client end of things any easier?

Posted: Sat Feb 17, 2007 9:43 pm
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.

Posted: Sun Feb 18, 2007 3:00 pm
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?

Posted: Tue Feb 20, 2007 10:53 pm
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?

Posted: Tue Feb 20, 2007 11:24 pm
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.