This question already has an answer here:
Why are buttons discouraged from navigation?
(1 answer)
Closed last year.
I've been reading up on web accessibility and read that anchor tags should only be used when the user will be taken to another URL without JavaScript. But buttons should be used whenever some other behavior should happen, such as opening a modal.
So I'm wondering if it's okay or expected to have both buttons and anchors in a nav. Something like this:
<nav>
Home Page
About Page
<button>Sign Up</button>
</nav>
Say in this situation the signup button launches a modal or does some other behavior that doesn't take the user to a different URL. Is it okay to have both in the nav? I'm not concerned about styling, I'll make these look consistent, but I'm wondering what's the most correct way to handle something like this?
From an accessibility perspective, using both links and buttons is the semantically correct way to go. The links take you to another page (or somewhere else on the current page) and buttons perform an action. A screen reader user will understand when they hear "link" or "button" in the same <nav> that different actions will happen.
As mentioned in the previous comments, yes, it is completely fine to use both inside your navigation.
If you really want to you can use <a> elements for all, but for the buttons you would include the role="button" attribute which is semantically equivalent to using <button>.
<nav>
Home Page
About Page
<a role="button">Sign Up</a>
</nav>
Yes it's totally fine to use either buttons, anchors or even div inside the navbar however you want you can do it. You just need to be comfortable using css and styling which you say you are. Then you should have no problem. Does that answer your question?
Any flow content elements are allowed in a nav tag, and that includes buttons.
Related
So basically I have zero ability to use CSS or javascript because it's blocked by the site I'm trying to work on from a higher administration level offsite with permissions I can't be granted because we outsource our site's main development so I have limited editing options (idk if anyone has ever worked on a site by dealer.com without working for them but it's... limiting). I can only use a bit of bootstrap and HTML.
I want to make the button have an onmouseover and onmouseout effect but thus far have had zero luck.
Normally I'd do this in CSS and it would be fine but basically any script gets a big angry, "nope you can't, security risk!!! Red flag!!! Abort!!" popup when you save.
<a class="btn btn-default" style="color:white; background-color: var(--color-electric-vivid);" href="/ev-enquiry.htm" target="_blank">Enquire Here</a> I'm relegated to somehow getting a hover effect into this. My options are limited and I'm at a loss.
Do I just give up or does anyone have some sort of brilliant recommendation that will somehow work?
picture of button I'm trying to make pretty
Edit for clarity: I do not have the ability to go into the main head or body of the HTML. I can change the contents of a div from a wordpress style textbox and it does not let me use javascript or CSS. I don't love it but that's my option so I'm looking for a workaround in HTML as that is genuinely the only thing I can use in this case.
It is a very little JS but you can try to do this:
<button href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">Button</button>
I currently have a functional react accordion component that has the following semantics:
<AccordionWrapper(div)>
<AccordionTab(div)>
<AccordionHeader(div)></AccordionHeader(/div)>
<AccordionContent(div)></AccordionContent(/div)>
<AccordionTab(/div)>
</AccordionWrapper(/div)>
I have read a few articles suggesting that it is best practice to use a button html element for the accordion header. I have read this gitHub post. This post also link to a example by which shows a button being used.
Another example I found was from accessible-accordion-pattern it also shows the use of a button and div approach. What justification is there for using a button over a div for an accordion container?
Another article I found was from Carnegie Museums of Pittsburgh and their accessibility. The example also shows a use of a button for their accordion header. This also leads me onto another question. In their example they use ul and li html tag. Is this the correct approach? I haven't managed to find another example which looks like this.
I'm currently trying to increase accessibility for my accordion component but unsure on the semantics. Also below I have added the aria tags I am using. Is the below sufficient or should I be using any additional aria tags?
<AccordionWrapper>
<AccordionTab role='tab'>
<AccordionHeader aria-expanded={...} tabIndex={...}>
heading name here
</AccordionHeader>
<AccordionContent aria-hidden={...}>
Any content I choose here
</AccordionContent>
<AccordionTab>
</AccordionWrapper>
How does my semantics I am using above stand for my goal to increase my accessibility, should I be using button for accordion header and also incorporate ul and li or is it best practice doing something completely different? Any simple examples displayed like above would be greatly appreciated.
I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.
It sounds like all the other sites you referenced are using the same pattern on the aformentioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.
You shouldn't be useing role="tab" on an accordion. That's for the Tabs pattern.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>
Basically, having multiple forms in a row isn't possible so far as I've seen.
LastUpdate
Given the situation with phones and
the unpredictable nature of how most
the browsers render the page, I think
I have to go with multiple buttons per
form. Not super happy with this since
it feels like a WebForms hack for MVC
but it makes the most sense for the
situation. Making a complexish ui for
mobile devices is tough in WebForms,
looks to be harder in MVC.
Something I've been reintroduced to is the idea of having multiple forms per page so that you can have buttons post to different controllers. Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)
Now here's the main problem, this is a site that was build to be viewable on most phones with a browser. It also has a lot of buttons due to buttons being a lot easier to click with touch phones like iPhones. Floating may not (Not completely ruled out) be an option as floating isn't very predictable on phones. Inline sometimes works sometimes not with browsers as I've seen.
This is sort of a large problem from a design standpoint and I'm hoping there's some kind of MVC method for creating a magical button that would work.
Clarification:
I think the best way to put this is I'm using some buttons as links. In the WebForms version, there were a few of the buttons that basically just redirected. So with that in mind:
Say I have three buttons but all three will need to post to different pages. This would suggest 3 different forms. Unfortunately that would also mean all three buttons would now appear as block elements. (Even though that's it's the form causing this.) Maybe I should be asking if in MVC there is a way to post back to the same controller to redirect from there? Redirect I've done, so that's not a big deal. Posting to a controller and evalutating a button based on it's value I haven't, but that almost seems like trying to recreated WebForms functionality of postback.
Example http://www.eythere.com/images/eythere.jpg
From that image, the top three buttons are merely postbacks to redirets.
UPDATE:
Have attempted tables and floating divs. Tables don't work well with small phones like Razors since they tend to ignore TDs and just make on big vertical column.
Tried floating divs like thus:
<div >
<form >
<input type="submit" style="float:left;"/>
</form>
<form>
<input type="submit" style="float:left;"/>
</form>
<form>
<input type="submit" style="float:left;"/>
</form>
</div>
Problem is it shows the buttons in two rows (That's fine) but the two buttons in the same row aren't aligned vertically. The second one is off by a little bit. Almost to the point that it looks like a Final Four bracket.
May have to go with the multiple buttons to a form thing. This seems to contradict the MVC design but I don't see another way around this.
When you post a form, the name attribute of the button used to post it is sent as a form value. Give each button a name, and then check the Form collection (or an Asp.Net MVC intermediary) for the button's name.
if(!String.IsNullOrEmpty(Request.Form["myButtonName"])) {
//myButtonName has been pressed.
}
EDIT:
Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)
Forms are block elements because if they were inline elements it would be invalid to nest tags like p and div inside of them (both of which are handy in constructing forms).
If I understand what you are asking, then sorry there is no such function. You would have to find or create your own method that would identify the client and then output the correct HTML code and CSS to accommodate that device. It may be better to find a solution on the user side of the code. You could maybe use display:inline; to forge the button to act like an inline element no matter what. It should work in all major browsers (http://www.quirksmode.org/css/display.html), and this this probably includes the iPhone browser because it is safari based.
It would probably help if you could explain a bit more about how you want the stuff to interact. That said, no law says a form can only have one submit button, and, when submitted it is possible to figure out which button is clicked--the name/value (text) of the button appear in the posted data. Exactly how to handle that really goes to what needs to happen and how you want to architect it, but you can definitely give a form multiple buttons.
--UPDATE--
Thanks for the clairifications. I think your best bet would be to use normal links and style them a bit:
a.button { display: block; width: 100px; float: left; }
They should be nice big clickable things in iTouches and in other more modern mobiles and degrade nicely in older mobile stuff as there really ain't nothing that can do HTML that doesn't support links.
this might solve your problem
another solution: if you can use javascript, make a DIV and a onclick action on it
like what Jeff did here on SO with the [Votes] | [Answers] | [Views] "button" on the home page on the left side of every question
Use css to style anchor links like buttons. That way you get rid of the useless forms and maintain affordability and clickability.
I haven't tried this so I can't say if it will work or not, but could you not just set the forms on the page to "display:inline"?
If you are not collecting data from the user, than they just look like simple links.
HTML buttons don't have to be inside forms. You can have a button with a javascript onclick handler that does whatever you want, like setting a form's action and submit it, or load a new document.
<input type="button" value="Home"
onclick="location.href='/index.php'" />
<input type="button" value="Rooms"
onclick="var f=document.getElementById('myform');f.submit()" />
<input type="button" value="Create"
onclick="var f=document.getElementById('myform');f.action='/create.php';f.submit()" />
Those buttons can then be styled in any way.
If your form isn't collecting data, then all your buttons can behave like the "Home" button in my example.