Is there any reason to use <a href> instead of <button> to display a button using foundation ?
It seems to work properly using <button>, but docs mention <a href> (http://foundation.zurb.com/docs/components/buttons.html). What are the consequence if I use <button> instead of <a href> ?
CSS Tricks answers this well here: http://css-tricks.com/use-button-element/
<button> is a form element and as such can't go to a link, but it can fire a form's action, for example.
My guess would be progressive enhancement. If (for whatever reason) Foundation fails to load on a user's device, an anchor tag with a link will still function as a link, while a button will not. This will allow the user to still use the website, which is an advantage :)
Related
This question already has answers here:
Anchor or Button in React SPA?
(3 answers)
Closed 9 months ago.
I see a lot of discussion on the internet about <a> tags that look like buttons, and rules that all links must obey. However, I am confused about <button> tags that are styled to look like links.
I am creating a single-page-app and my navigation component is responsible for rendering / hiding different sections of the website. Only one section would be visible at a time, so I'm treating each section as if it was a unique page with its own route.
My navigation controls are buttons, instead of links. I did this because there is nothing valid that I'm aware of, which I can put inside the hrefs (given that the hidden content is not present in the DOM).
I read on the internet that buttons must have styling to identify the priority of the button, for accessibility reasons. Ideally, I want the buttons to look like links since they behave similarly to links (although not identical).
Are there any accessibility concerns with styling buttons to look like links? Would it make more sense to style these buttons as buttons? If they should look like buttons then what should be the priority? Does it make more sense just to hide the hidden "pages" with css, so that I can turn the buttons into <a> tags and add an href?
Here is the typical markup for single page apps
<div>
<nav>
<ul>
<li>
<button data-name="Skills">Skills</button>
</li>
<li>
<button data-name="Projects">Projects</button>
</li>
<li>
<button data-name="History">History</button>
</li>
<li>
<button data-name="Employment">Employment</button>
</li>
<li>
<button data-name="Contact">Contact</button>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
The part at the bottom div#content-panel represents the Home page. It will be replaced with the other pages using JavaScript, which will contain the main content of the website.
For those who stumble across this, please don't use <a> without an href, it results in an element that is not longer focusable with the keyboard.
The following fiddle shows this. Try using Tab to focus the links.
You could obviously add tabindex="0" to add them back to the focus order, but this is an anti-pattern and if you ever find yourself doing this it is an indication that you have made a mistake with your HTML.
<div>
<nav>
<ul>
<li>
<a data-name="Skills">Skills</a>
</li>
<li>
<a data-name="Projects">Projects</a>
</li>
<li>
<a data-name="History">History</a>
</li>
<li>
<a data-name="Employment">Employment</a>
</li>
<li>
<a data-name="Contact">Contact</a>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
If you are building a SPA in a fashion similar to that described by the OP you should still be using anchors <a> for navigation.
There are a few things you should consider:
When each section is shown you should update the URL on the site via JavaScript.
If your site also has Server Side Rendering (SSR) and can function in a limited fashion without JavaScript (recommended as JavaScript does fail more often than you think due to network errors, JS errors for certain scenarios you missed etc. etc.) then the href of the anchors should point to the correct URL.
On SPA navigation it is recommended that once the new page is loaded you programatically set focus on that pages <h1>. You can do this by adding tabindex="-1" to the <h1> (which allows it to receive focus programatically without being added to the focus order of the page) and then using header1.focus()
For an even better experience for people who use a screen reader it may also be beneficial to add an aria-live section to the page with the value of assertive that announces "loading" once a link is clicked. <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>
I have a reasonably long answer with a bit more detail of this technique here that explains why.
To answer the original question finally!
You can style a button to look like a link. However consistency across a site is key.
So make sure that if that is the styling you use for buttons that the majority of buttons look the same.
Also if you make a button look like a standard link then really you should make your links look different to your buttons styled as links.
This avoids confusion as a button has the expectation it will change something on the current page or submit a form, a link has the expectation of changing the page / URL / navigation.
However the advice is not quite the same for a link styled like a button. It has become acceptable that links can be styled like buttons if they are a Call To Action for example. Yet again though, consistency across a site is key for a great user experience.
As stated on MDN Navigation expects to have a links as children. So if you want to prevent any accesibility issue, I suggest you to stick to them, just remove the href attribute and add a type="button" to your a tags.
Anything that looks like something else fools the user. This applies to a link looking like a button, a link looking like plain text, an h1 looking like an h2, a ul looking like an ol, etc. When the user is fooled, the user can get confused or be misled into errors. With a link that looks like a button, for example, the user may press Space to activate it and be surprised to find that it is not activated, but instead the page is scrolled.
This is the code currently, I've tried adding target="_Blank" but it still opens in the same tab.
We are using WordPress and this is the code we use in the text box for a button to appear.
button color="extra-color-1" hover_text_color_override="#ffffff" size="large" url="https://www.insideeducation.ca/learning-resources/classroom-learning-resources/elementary-school/#flying-animals-scavenger-hunt" text="Flying Animals | Scavenger Hunt"]
did you try anchor tag because i think target attribute works pretty well with anchor
I can't tell you that any of these approaches will work for sure, but there are three methods or workarounds I've thought of that you could try out.
1. Use target="_blank"
I would usually use lower case letters in target attributes. So instead of target="_Blank", you could try target="_blank".
However, this is more likely to be a matter of preference, and I think browsers will most likely accept both of these options.
2. Use some simple javascript
You could use the javascript window.open() function as a workaround for this problem.
Replace target="_Blank" with onclick="window.open('https://www.example.com')" and see if that works any better!
3. Use an anchor tag
At the moment, you seem to be using a button element which looks something like this:
<button color="extra-color-1" ... target="_blank" url="https://...">
Click here!
</button>
You could wrap an a tag around the button and instead apply the target attribute to that. It may be that target attributes work better directly on anchor tags. Here's what it would look like:
<a href="https://..." target="_blank">
<button color="extra-color-1" ... >
Click here!
</button>
</a>
So I have a box on the right side of the page which when clicked on different titles will take to different news articles on the page though I also have it so when articles within the website titles are clicked upon on the page that they will be taken to the source. At the moment though neither are working what is going wrong?
html
<a name="Anchor1">News Article</a>
Use id attribute inside the link to have the same effect as name attribute
<a id="Anchor1" href="http://newsarticle.com">News Article</a>
Simply add an id attribute to the link:
<a id="foo" href="http://newsarticle.com">News Article</a>
Then link to it like this:
link to foo
Nested <a> elements are forbidden in HTML syntax.
Browsers effectively enforce this restriction in their parsing rules.
Example:
if you have a link ,
a<a href="b.html">bc</a>
Browsers will parse it as,
a b c
Reference: Nested links are illegal.
First I tried with
<input type="button" value="Something" onclick="location.href='#Url.Action("ActionName")'" />
But this is a button and I want just a link. I've seen somewhere (while wildly browsing the programming forums) a way to hide a button link behind an anchor, but couldn't find/make it.
Then I tried with
(here, actually, on the page, the link looked like Something">, whereas the " and > shouldn't be there)
and also
Something
but the latter 2 ways (with the anchor tag) don't work, by means, I don't get directed to the other page. So, any suggestions about how to hide a button behind a link, or how to make the anchor tags run ?
You want an anchor, but the suggested code doesn't work. Try this way (it worked for me):
<a onclick="location.href='#Url.Action("ActionName")'">Something</a><br />
It will work this way, but you will not have the hand, when you hover the link. So just add href="#", like that:
Something<br />
Use #Html.ActionLink("Something", "ActionName", "ControllerName") without the <a> tag. It's generated automatically
<a asp-action="Index">Location Name</a>
I`ve seen on various websites, some links appear like this: http://www.myserver.com/page.html#something and when I click on it, it just moves to another portion of the page.
I want to know how to do this. Is it only the URL of the <a href> atrribute?
The fragment at the end of the url coresponds to an ID on the page you're visiting.
If in my page I have a section such as:
<div id="comments">
...
</div>
Then I can take the user to this section by attaching #comments to the pages URL
(http://www.example.com/page.html#comments)
Link to comments
Update
Some of the other answers here correctly point out that you can create an anchor with a name attribute as: <a name="example"></a>.
Although this is technically correct, it's also a very antiquated way of doing things and something I'd recommend you avoid. It's very 1997 as some might say :-)
The text after the hashtag corresponts with an anchor on the page. An anchor is a hidden element on the page which you can link to.
Think for example about a large page with an to top link in it
To create an anchor use:
<a name="C4"></a>
To link to it use: Text
Or you can even link to an id of an element
Check out: links (aka anchors)
Also note that you can use <a name="something"></a> or <a id="something"></a>
or using divs <div id="something"></div>
This is a link to a bookmark on the given page (or even just #something on the current page).
To make it work, you need to define something. You can do this using the name attribute of an <a> tag.
http://programming.top54u.com/post/HTML-Anchor-Bookmark-Tag-Links.aspx