I use the program NVDA to test my website and make a website accessible to all people. Recently I saw on MDN Web docs an attribute allowing me to use a instead of button. It is role="button".
MDN and Bootstrap 4 Doc says:
these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
<a class="btn btn-primary" href="#"> Anchor without ROLE </a>
<a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
<button class="btn btn-primary" type="button"> Just a Button </button>
I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with <button> tag. What role="button" is being used? What is the correct way?
Ref: Bootstrap V4 and MDN Docs
I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with tag. What role="button" is being used? What is the correct way?
Browser support and behaviour for ARIA roles can vary depending on browser/screenreader combination.
You should use the native <button> element.
Remember the first and second rules of ARIA:
First rule:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Second Rule:
Do not change native semantics, unless you really have to.
<a> tags should go to a link.
You should use <div>, <span>, <button>, or <input type="button">, <input type="submit"> or <input type="reset"> as a button.
Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
I wanna switch this code:
Inapoi
With a button. I want a button who redirect to ”selectare_gen.php”
I tried:
<button onclick="location.href='selectare_gen.php'">Inapoi</button>
But all it does is refreshing the current page..
It should be
<button type="reset" onclick="location.href='selectare_gen.php'">
Inapoi
</button>
The type="reset" is a workaround to prevent the browser from interpreting the button as a form element which causes the reload.
Check this link over here. It should answer your question.
How to create an HTML button that acts like a link?
Many browsers think that the <button> tag will cause a submit that's why it's appearing to just refresh the page. If you use an input type="button" it wouldn't have this effect:
<input type="button" onclick="window.location='selectare_gen.php';" value="Inapoi" />
Please help,
I am getting error via http://validator.w3.org/ while validating my html5 template. I get the message "The element button must not appear as a descendant of the a element.". I can't understand this. Could anyone help me to solve this?
Here is my code:
<div class="post-response btn-group btn-group-lg">
<button type="button" class="btn btn-default"><i class="fa fa-comment"> 5 Comments</i></button>
<button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button>
</div>
The usual error from the W3C validator is:
The element button must not appear as a descendant of the a element
This makes more sense for your question, as you have a button that is a descendant of an anchor.
Normally, you could solve the issue by simply styling your anchor tag, or by placing the button within a form element:
<form style="display: inline" action="http://www.example.com/" method="get">
<button>Some Call to Action</button>
</form>
But in your case, I don't think you even need the anchors as you aren't linking anywhere using HTML (and if you are attaching events using JavaScript, you could simply attach those events to the button rather than the anchor.
I have created a button using
<button type="button" class="btn btn-success btn-lg ">Register</button>
How could I give a link to another page when the button is pressed?
Use a anchor instead, and you can still style it as a button..
Register
Bootply: http://www.bootply.com/99320
I am doing the following:
<a href="www.stackoverflow.com">
<button disabled="disabled" >ABC</button>
</a>
This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.
Can anyone give me advice on what I should do?
No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
In other words, you can nest any elements inside an <a> except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:
<form style="display: inline" action="http://example.com/" method="get">
<button>Visit Website</button>
</form>
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
If you're using Bootstrap 3, this works quite well
Primary link
Link
I've just jumped into the same issue and I solved it substituting 'button' tag to 'span' tag. In my case I'm using bootstrap. This is how it looks like:
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>
No.
The following solution relies on JavaScript.
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
If the button is to be placed inside an existing <form> with method="post", then ensure the button has the attribute type="button" otherwise the button will submit the POST operation. In this way you can have a <form> that contains a mixture of GET and POST operation buttons.
It would be really weird if that was valid, and I would expect it to be invalid. What should it mean to have one clickable element inside of another clickable element? Which is it -- a button, or a link?
These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <a href...><button ...></a> tag, FWIW...
Another option is to use the onclick attribute of the button:
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
This works, however, the user won't see the link displayed on hover as they would if it were inside the element.
You can add a class to the button and put some script redirecting it.
I do it this way:
<button class='buttonClass'>button name</button>
<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>
why not..you can also embeded picture on button as well
<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>
Explanation and working solution here:
Howto: div with onclick inside another div with onclick javascript
by executing this script in your inner click handler:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
It is illegal in HTML5 to embed a button element inside a link.
Better to use CSS on the default and :active (pressed) states:
body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}
<p><a class="Button" href="www.stackoverflow.com">Click me<a>
Use formaction attribute inside the button
PS! It only works if your button type="submit"
<button type="submit" formaction="www.youraddress.com">Submit</button>