Accessible links and buttons
When creating a website you'll use links and buttons to direct users to complete an action. Most of your website users won't notice the distinction between a link and a button. However, when a link is styled to look like a button it can cause problems for sighted keyboard users. There's a subtle difference in the way these two elements behave, which can make content misleading if they're used interchangeably. For this reason you should ask your designers to document whether elements are functionally buttons or links in the design.
The difference between a link and a button
Links and buttons are supposed to carry out different functions. For example, links are used for navigation such as opening a new webpage, PDF or other document. Buttons are used for actions such as submitting a form, interacting with a component or opening a menu or a dialogue.
The keyboard behaviour for links and buttons is also different. A button can be activated using either the enter or space key, but a link only works with the enter key.
When a sighted keyboard user sees something that looks like a button, they expect that either the enter or space key will work. If the button is really a link styled to look like a button, the space key does nothing and the 'button' appears to be broken.
When a screen reader user navigates webpages they use keyboard shortcuts to move between links and buttons. If a button is used where a link would be more appropriate (or vice versa), that element won't show in the correct list and could be missed.
How to use the appropriate mark-up in HTML
Links
Links should be marked up using the <a> element for the link and the href attribute to indicate the link's destination.
This is sample code for a link: <a href='https://www.gov.scot/'>Scottish Government</a>
Buttons
Buttons should be marked up using the HTML <button> element, <input type='button'>, or <input type='submit'>.
This is sample code for a button: <button type='button'>Submit</button>
You can apply a JavaScript click handler so it can be activated using a mouse, touch and a keyboard.
This is sample code for a button with a click handler that opens a help dialogue: <button onclick='alert('Help')'>Help</button>
Faking buttons
Occasionally it might not be possible to avoid styling a link to look like a button. For instance, if you want the element to stand out as a call for action.
In this example the webpage shows three links styled to look like buttons, so they visually look like a call to action:
For the HTML, you need to:
- make sure the <a> element has an href attribute so it can be focused on with the keyboard, or Use tabindex='0' if the href attribute can't be used
- Use ARIA role='button' on the <a> element, which identifies the link as a button to screen readers
- listen for the key code 32 (space key) and attach it to the keydown event handler (if the href attribute is not present also listen for the key code 13 (enter key))
The following is an example of Javascript for a button:
button.addEventListener('keydown', function(event) {
if (event.keyCode ==13) {
doSomething();
}
}
There is a problem
Thanks for your feedback