How to create an HTML button that acts like a link?

Question

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

Answer 1

There seems to be three solutions to this problem (all with pros and cons).

Solution 1: Button in a form.

    Continue

But the problem with this is that in some version of popular browsers such as Chrome, Safari and Internet Explorer, it adds a question mark character to the end of the URL. So in other words for the code above your URL will end up looking like this:

http://someserver/pages2?

There is one way to fix this, but it will require server-side configuration. One example using Apache Mod_rewrite would be to redirect all requests with a trailing ? to their corresponding URL without the ?. Here is an example using .htaccess, but there is a full thread here:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Similar configurations can vary depending on the webserver and stack used. So a summary of this approach:

Pros:

1. This is a real button, and semantically it makes sense.
2. Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
3. No JavaScript, no complex style required.

Cons:

1. Trailing ? looks ugly in some browsers. This can be fixed by a hack (in some cases) using POST instead of GET, but the clean way is to have a server-side redirect. The downside with the server side redirect is that it will cause an extra HTTP call for these links because of the 304 redirect.
2. Adds extra
   element
3. Element positioning when using multiple forms can be tricky and becomes even worse when dealing with responsive designs. Some layout can become impossible to achieve with this solution depending on the order of the elements. This can end up impacting usability if the design is impacted by this challenge.

Solution 2: Using JavaScript.

You can use JavaScript to trigger onclick and other events to mimic the behavior of a link using a button. The example below could be improve and remove from the HTML, but it is there simply to illustrate the idea:

Continue

Pros:

1. Simple (for basic requirement) and keep semantic while not requiring an extra form.
2. Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).

Cons:

1. Requires JavaScript which means less accessible. This is not ideal for a base (core) element such as a link.

Solution 3: Anchor (link) styled like a button.

Styling a link like a button is relatively easy and can provide similar experience across different browsers. Bootstrap does this, but it is also easy to achieve on your own using simple styles.

Pros:

1. Simple (for basic requirement) and good cross-browser support.
2. Does not need a to work.
3. Does not need JavaScript to work.

Cons:

1. Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
2. It will not reproduce all behaviors of solution #1. It will not support the same behavior as button. For example, links react differently when dragged. Also the "space bar" link trigger will not work without some extra JavaScript code. It will add a lot of complexity since browsers are not consistent on how they support keypress events on buttons.

Conclusion

Solution #1 (Button in a form) seems like the most transparent for users with minimal work required. If your layout is not impacted by this choice and the server side tweak is feasible, this is a good option for cases where accessibility is the top priority (e.g. links on an error page or error messages).

If JavaScript is not an obstacle to your accessibility requirements, then solution #2 (JavaScript) would be preferred over #1 and #3.

If for some reason, accessibility is vital (JavaScript is not an option) but you are in a situation where your design and/or your server configuration is preventing you from using option #1, then solution #3 (Anchor styled like a button) is a good alternative solve this problem with minimal usability impact.