E-mail List Archives

"next" and "previous" steps in a user interaction, link or button?


From: Birkir R. Gunnarsson
Date: May 26, 2013 6:27PM

Hey gagn

This is mostly out of theoretical interest.
I have read a lot of articles by accessibility experts, such as mr
Karl Grove's, talking about the link vs. button debate, a link is a
link and a button is a button.
Links take you to a new location, either on the same page or to a new page.
A button performs a user action, such as submitting a form, completing
a registration etc.

What when an object does a bit of both?
A good example is to complete one step of a process and moving on to
the next one (or to a previous one if one wishes to modify previously
submitted info).
This is very common, for instance when booking a trip or purchasing a
product (adding to shopping card, verifying order, providing shipping
info and options, providing billing info).
Going to the next or previous steps loads a new page, and, therefore,
should be served up as a link, but it is also an action, albeit part
of a set of actions, so one could argue that a button is more

From a screen reader perspective, I would advicate the use of a button
here. I do this mostly because users should have a clear, simple and
immediate way to complete the process they are undertaken. Therefore
they should need an HTML object that is unique to the page and simple.
Using a link in this scenario is not good because every other item on
the page (or most of them) is a link as well .. product image,
description, navigation menu etc.
If these be made into buttons, they usually are the only buttons on
the page, so a user of pretty much any screen reader can navigate to
these immediately.
But the world does not revolve around screen reader users, definitely not.
What about speech recognition software or keyboard simulators.
I would think that having these actions presented as buttons rather
than links enables these users to quickly navigate to them as well.
Are the next and previous links often presented in a unique way
visually (such as deploying a different background or color .. I often
see special .css classes applied to these things).

If anyone has given this a thought, has an official recommendation, or
would like to contemplate further, definitely drop this list a line.