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.
Related
In terms of accessibility, can someone describe to me the difference between a <button> and a <a> for screen reader and keyboard users? From what I can tell a keyboard user can use ENTER and SPACE to activate a button, whereas only ENTER for an anchor tag. In a Single Page Application I feel like the roles of these elements get somewhat confused and I'm not sure where the line draws between the two.
Buttons that look like links
In my application I have a generic styling for a link, the class name for this is simply .link.
In the first example I have a button with an onclick handler that performs an action on the same page, therefore I've used a button element for it. However it stylistically looks like a link.
<button class="link" onclick={(e) => console.log('Do the thing')}>This is a link</button>
If the roles are reversed and the link behaves like a traditional anchor where the route changes as a result of it being clicked, I'd do something like this:
<a class="link" href="/route/change">This is a link</a>
Even though both of these look the same due to the applied class, should the anchor tag example have role="button" applied so it behaves like a button even though it's styled like a link? Is it better to maintain consistency between these styled elements for users with accessibility needs throughout the entire application, or is it better to interchange which gets the role applied to it based on the application of the element regardless of how it's styled.
Two "buttons" next to each other
Following up on the first question. If the definition of an <a> tag is that it moves you to a different page/anchor point, should two side by side buttons which perform different tasks both be considered buttons.
Taking the following example, the confirm button performs an action on the same page, and the cancel button routes you back to the previous page.
The code looks something like this:
<button onclick={() => console.log('do a thing'}>Confirm</button>
Cancel
The definition of role="button" from MDN says the following:
The button role should be used for clickable elements that trigger a
response when activated by the user. Adding role="button" will make an
element appear as a button control to a screen reader. This role can
be used in combination with the aria-pressed attribute to create
toggle buttons.
Should the cancel button have the button role applied even though it's technically not behaving in the way of the roles definition?
Closing
Is there more concise guidelines on when these roles should and should not be used? Is there any harm in applying role="button" to any/all links that use the same styling if they are used interchangeably with the <button> element? Or should anchor tags and roles never mix, regardless if they stylistically look like another element type?
I appreciate you for reading. I'm attempting to take accessibility seriously but can't seem to find any clear and concise specifications surrounding use cases for this scenario.
Whenever i get this question of Buttons vs link I ask myself, is it scripted functionality or a is it Navigation(internal or external)?
Buttons activate scripted functionality on a web page (dialogs, expand/collapse - regions).
Links take you to another location, either to a different page or different location on the same page.
Coming to a11y
Role tells screen readers and other assitive technology the semantic category of an element, meaning the type of thing that it is. Every element already has a default role of some kind. The <button> element has an implied role="button", and the <img> element has an implied role="img" and so on.
role="button"
if you use <button> don't add role (it's implicit)
<div role="button"> - (Adding roles do not cause browsers to provide keyboard behaviors or styling). Try to use real <button> If that’s problematic for styling purposes, you can use role="button". Be sure to add tabindex="0" to make it keyboard focusable, and ensure it works with both the Enter key and Spacebar, ensure it has proper disabled, hover, focus state, works in high contrast using media query.
Don't use <a role="button"> : it doesn't make sense in any way, it'll give you a block element just like <div> which you can style anyway, remember the question, it is a scripted functionality use
<button> or <div role="button"> , if it is a navigation use
<a> without any role (style it the way you want)
Also, <a> cannot be disabled, <buttons> can be.
Screen readers have shortcuts to read out all the links eg NVDA user can press
K - jumps to Next link
INS + F7 it lists all links, headings
U Un visited Link Quick Key
V Visited Link Quick Key
I also think about do I want screen reader users to hear this link when they press ins + f7 ?
EDIT: I missed to mentions assigning a role to an element overrides its native role. so <a role="button" is no more a role="link" and won't come up in INS + f7 list and as it will be treated by the accessibility API as a button
In this particular case I would recommend to use role='button' on the link since it's one of two choices the user has in this situation, and the two choices should appear in the same form (i.e. as two buttons), also for a user who hears it being read by a screenreader.
I just wonder why you use a link for the cancel option in the first place, and not a button right away...
The solution is easy : "If it's not a link, it's a button"
A link should drive you somewhere else : another page, another anchor within the page.
A link does not submit a form, does not perform any action.
In your example, "Confirm" and "Cancel" are actions : you're submitting your consent or explicitly indicating your desire to cancel your action. They should have the ARIA button role.
This is a different from "Continue" and "Back to the previous" page, which should have the link role.
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).
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.
Is there any alternative to <div>? My website is losing "accessibility" because I cannot set focus on a <div>. What control should I use in order to replicate <div> and still hold focus?
This is what my HTML looks like:
<div style="height:70px; overflow:hidden" id="divMsg">
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>
You can add tabindex to make it focusable; however, this is usually not enough. If you want the element to be clickable, you will also need to add a keydown or keypress handler so that the user can activate it using ENTER, similar to a A link. Otherwise the user will be able to tab to it, but may not be able to do anything with the link after.
If you are trying to create a clickable element, it is sometimes simpler to start with a A tag, and then style it so that doesn't look like a link. A elements respond to both keyboard and mouse and fire onclick for both, so you don't have to do additional keyboard input handing like you do with a DIV.
Finally, if you are making a DIV or A that visually looks like a button or some other control, add the appropriate ARIA role so that a screenreader will call out the appropriate element type - eg.
Complete Transaction
Just give it a tabindex attribute.
If you are specifically looking for accessibility, try out the new HTML 5 tags like <article>. So for example a textreader knows what to read, and your page is much better structured.
Check out this site.
To answer your exact question, it depends why you are using the div; I'm guessing for layout. The tab ordering is dependent upon more than tabindex, as defaults and overflow affects positioning and focus.
To be more specific, you won't use a div to latch onto for tabindex. Rely upon JavaScript and a unique ID; <div class="content" id="page1">
This will also provide you an anchor so you could use http://index.html#divMsg to link focus to the exact place in your HTML document. Note you have only one div ID and reuse the same div class twice in your example.
If this is all new to you the article on difference between ID and CLASS may be of interest to you
Links (element a) and form elements (input text and alike, file, radio and checkbox, submit, image and type button, select, textarea, button element, etc) are focusable by default.
Thumb rule: if an element does something, it should be a link or a form element part of a form. (OT: I guess I've a problem with conjugation here but can't find exactly what - english isn't my mothertongue)
Think twice (at least :)) before using the tabindex attribute: it'll work for a while in your project and then you make some modification elsewhere and suddenly all is broken. And it'll break again, again and again.
For testing with Safari, you'll need to modify Preferences: this browser (maybe also Chrome?) only cycle by default through form elements and not links. Users of keyboard cycle through every focusable elements I guess, like in IE and Firefox.
To learn further, Web Content Accessibility Guidelines 2.0 (WCAG 2.0) have Sufficient Techniques (and "Failure(s)" also) about keyboard use.
This is probally small question for a pro.
i want to know if i replace input submit button with button (type=submit), would it still be trigger on enter (keyboard) and if yes, then which browser wont trigger it?
<button type="submit"><span>i was replaced from input button</span></button>
span was added just for css fancy button style
It should be triggered in all standard compliant browsers, since type="submit" creates a submit button:
Buttons created with the BUTTON
element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities:
same thing, the button allows you to put content, like text or images