Link Behavior
At its heart, a link connects two Web resources. It has two ends with an explicit direction – a source and a destination. Links are most often used to take a user from one Web page to another or from one location in a page to another location in the same page.
A simple link
Source Code
<a href="http://www.ncsu.edu">NC State University</a>
Implementation
The problem with links starts when developers start leveraging the functionality of links for alternative purposes. Links provide some nice conveniences.
- Clicking on a link makes some other action happen.
- The mouse usually changes shape when hovering over top of them, indicating to the user that the link does something.
- They are automatically in the tab order, so users can use the keyboard to tab to them.
The most common example of using links for other purposes is using JavaScript to execute some type of action when the link is clicked. What we as developers would really like is this.
Do not use an anchor with an onclick event without an href element event.
Source Code
<a onclick="alert('something');">Do something</a>
Developers would really like this because it gets rid of the action of going to another page through the href attribute, but it allows us to perform other actions on the page, and we get all of the other benefits of links like being clickable. However, we encounter a few problems.
- The link no longer looks like a link.
- The link is no longer keyboard accessible.
- The mouse pointer doesn’t change when hovering over it to indicate that it is clickable.
Implementation
In the end developers end up using the anchor element in other creative ways to get around this problem. The following three examples demonstrate the popular patterns for implementing this functionality.
Do not use a hash tag for the href attribute and JavaScript for onclick event
In this instance the hash character is used to tell the browser to go to an unnamed target within the same page. What this ends up doing is making the page scroll back to the top of the page. In the meantime the JavaScript function executes.
Source Code
<a href="#" onclick="alert('something');">Do something</a>
Here are the problems with this implementation.
- It can cause the page to scroll back to the top
- It adds an entry to the browser history, so it takes an additional click of the back button to go to the previous page.
- If the user has JavaScript disabled, nothing happens.
- For screen reader users, they hear that this is a “link” and they might assume that clicking it will do what all links do – take them to a new page.
Implementation
Do not use JavaScript for the href attribute
In this instance, a javascript action is fired when the link is clicked in place of taking the user to a new location.
Source Code
<a href="javascript:alert('something');">Do something</a>
Here are the problems with this implementation.
- If the user has JavaScript disabled, nothing happens.
- For screen reader users, they hear that this is a “link” and they might assume that clicking it will do what all links do – it will take them to a new page.
Implementation
Do not use JavaScript void for the href attribute and JavaScript for the onclick event
In this instance, the behavior of the href attribute is overridden and in it’s place an onclick event fires some JavaScript.
This implementation borders on comical. An anchor element is chosen because it will perform an action when clicked. Then the anchor’s ability to perform an action when clicked is overridden. In place of its default behavior, a new function is added to once again make the anchor perform an action when clicked.
Source Code
<a href="javascript:void(0)" onclick="alert('something');">Do something</a>
Here are the problems with this implementation.
- If the user has JavaScript disabled, nothing happens.
- For screen reader users, they hear that this is a “link” and they might assume that clicking it will do what all links do – take them to a new page.
Implementation
When is a link not a link? When it should be a button
If you want to have the user click on an item within a page and have some action via JavaScript performed within the same page, a button is your best option.
Buttons with JavaScript
Source Code
<input type="button" value="Do Something" onClick="alert('something');">
Implementation
CSS-styled buttons with JavaScript
This instance is identical to the previous one except it uses CSS to customize the button.
Source Code
<style>
.something-button {
border-top: 2px solid #e00;
border-left: 2px solid #e00;
border-right: 2px solid #300;
border-bottom: 2px solid #300;
background-color:#c00;
color:#fff;
}
.something-button:active {
border-top: 2px solid #300;
border-left: 2px solid #300;
border-right: 2px solid #e00;
border-bottom: 2px solid #e00;
background-color:#600;
color:#fff;
}
</style>
<input class="something-button" type="button" value="Do Something" onClick="alert('something');">
Implementation
Using progressive enhancement to change a link to a button
This instance is demonstrates progressive enhancement, testing to see what capabilities a browser has and then delivering code that it can handle.
In this case it starts with a basic link which takes you to another page where the functionality occurs. If the browser has JavaScript enabled it changes the link to a button and the behavior to a same page action. This implementation solves the problem of when the user does not have JavaScript enabled.
Source Code
<p id="something" ><a href="something.html">Do Something</a></p>
<script type="text/javascript">
(function(){
if(document.getElementById){
var e = document.getElementById('something');
if(e){
var but = document.createElement('input');
but.setAttribute('type','button');
but.setAttribute('value','Do Something');
but.onclick = function(){
alert('something');
};
e.parentNode.replaceChild(but);
}
}
})();
</script>