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.
I would also like it so there aren't any extra characters, or parameters in the URL.
How can I achieve this?
Based on the answers posted so far, I am currently doing this:
but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.
There are two other solutions to do this: Using JavaScript or styling a link to look like a button.
Using JavaScript:
But this obviously requires JavaScript, and for that reason it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.
Continue
Answer
HTML
The plain HTML way is to put it in a wherein you specify the desired target URL in the
action
attribute.
If necessary, set CSS display: inline;
on the form to keep it in the flow with the surrounding text. Instead of in above example, you can also use
. The only difference is that the
element allows children.
You'd intuitively expect to be able to use analogous with the
element, but unfortunately no, this attribute does not exist according to HTML specification.
CSS
If CSS is allowed, simply use an which you style to look like a button using among others the
appearance
property (only Internet Explorer support is currently (July 2015) still poor).
Go to Google
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
Go to Google
JavaScript
If JavaScript is allowed, set the window.location.href
.
No comments:
Post a Comment