WEBVTT

00:00:00.000 --> 00:00:06.000
Should that website control be a button or a link?

00:00:06.000 --> 00:00:13.000
The right element helps people understand what it does.

00:00:13.000 --> 00:00:18.000
Match the control to the action.
6 useful distinctions.

00:00:18.000 --> 00:00:30.000
Links lead to destinations
Use a link for a page, section or downloadable resource.
Another page · Page section · Downloadable file

00:00:30.000 --> 00:00:42.000
Buttons perform actions
Use a button for tasks such as submitting or opening a dialog.
Submit a form · Open a dialog · Change a setting

00:00:42.000 --> 00:00:54.000
Appearance is a separate choice
A link can look like a prominent action while keeping link behaviour.
Visual styling · Correct element · Expected behaviour

00:00:54.000 --> 00:01:06.000
Use a useful label
The words should explain the destination or action.
View the service · Send your enquiry · Save the change

00:01:06.000 --> 00:01:18.000
Keep keyboard behaviour familiar
Links and buttons have different expected activation keys.
Enter for links · Enter or Space for buttons · Visible focus

00:01:18.000 --> 00:01:30.000
Test the promised result
The control should do what its wording leads people to expect.
Correct destination · Working action · Clear feedback

00:01:30.000 --> 00:01:39.000
Your checklist
Links lead to destinations · Buttons perform actions · Appearance is a separate choice · Use a useful label · Keep keyboard behaviour familiar · Test the promised result

00:01:39.000 --> 00:01:47.000
Use the right element and a clear label.
jerseyweb.je