there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
demo
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
Related
I have a requirement where I have an anchor tag in my HTML page.
<a aria-label="Back Button" class="secondary-button btn-font" title="Back" ngClass="btn-font"
ngClass.xl="btn-font-xl" i18n-title='importantFacts##back-button' id="backButton"
i18n="##importantFacts-back-button" routerLink="/apply-for-benefit/verification">
Back
</a>
My requirement is that JAWS 2022 read it as 'Back Button', but JAWS reads it as 'Back Button link'. I know it's an anchor tag and it is supposed to read it as a link, but is there a way where it can read it as just 'Back Button' ?
I have already tried using element and but it does not fulfil some other requirement. Only an anchor tag does. I have also tried giving 'role' value as 'button' to the anchor tag, but again with this other requirement was not getting fulfilled.
Kindly help.
Sounds like you already tried the correct solution - set the role.
<a role="button">Back</a>
You don't need an aria-label because the contents of your link already has the text to announce, "Back". And even if you wanted to have an aria-label, you should not specify the role in the label itself. That is, don't use aria-label="back button" but instead just use aria-label="back".
As a side note, links and buttons are quite different things. Links should be used for navigation purposes - going to a new page or navigating to a different location on the same page. Buttons should be used for "actions".
From a keyboard perspective, links only allow the enter key to select them whereas buttons allow both enter and space. If you press space on a link, it will scroll the page (the default behavior on most browsers is to scroll the page when you press space).
Also, if a screen reader user hears "link", not only will they assume they are being navigated somewhere but they will also expect the browser's "back" button to take them back to where they were previously. Buttons don't have that behavior.
So you really need to think about whether setting a role="button" on a link is the right thing to do instead of using a real <button>. If you do want to use role="button" on a link, then you'll also need a keyboard event handler to allow the space to work as explained above.
I have an anchor tag within a button tag description in HTML as below:
<button type="submit" onClick="handleSubmit()">Desc....
Click here for more details
</button>
Now when I click on the anchor text, the action "handleSubmit()" executes instead of going to my https:// link.So apparently, my text is also being treated as a button instead of a hyperlink.
I tried adding the z-index property to my CSS for (z-index: 1) in order to make it independently clickable so it overlays on top of the button tag, but no joy!
But if I right-click on the text, I do see the option of opening the https link in a new tab and it does so perfectly. Only when I click on it normally(left click), the button click handler executes as if its the button being clicked instead of the anchor tag.
How can I fix this? Any help would be much appreciated, thank you.
I don't quite understand if you intend to use the function inside the onClick in any situation.
You can swap the wrapping of elements so that the button is inside the link; also you could move the link inside the onClick like this:
onClick="window.location.href='link'"
Thought these can be a couple solutions, you need to clarify the exact behaviour you expect to obtain from your code.
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
I have an IMG tag which has an associated OnClick event.
I see that TAB-key navigation skips this image field, but I need to have it stop there and treat the element as a regular tabbable control field.
Is there a way to do this? I can't just wrap a simple A-tag around it, since that affects various stylesheets and breaks the design.
In general, the best approach is to use a button instead, and bind the click event to that.
<button type="button"><img src="..." alt="..."></button>
You can also stick tabindex="0" onto the image so that it will appear in the tab order (without specifying a specific place so the ordering is natural), but this doesn't give as good results with AT.
When I search for a css button generator they always have code that styles an anchor.
The Button
But I'm wondering why they don't ever try to style a generic button:
<input type="button" value="The Button" />
is it because it's harder to style an input of type button?
The styling will make buttons and anchors look the same. However the functional aspects are what make you decide to use a button or a link.
I would recommend using a link if you are going to follow a link, and a button if you want to submit a form or perform an action, say AJAX call.
Typically the input buttons are going to look like whatever the users computer defaults to for a button. Using anchor tags along with image sprites lets you have more control over what the "button" is going to look like.