The Best Variety Of Buttons With HTML CSS
The Best Variety Of Buttons With HTML CSS
Description
On the web, buttons are everywhere It is very rare to see a website without a button, Indeed, buttons are used to submit forms or to activate interactions managed via JavaScript, On the other hand, the buttons are not used to go to another web page (or to an area of the web page currently being consulted), Sometimes the links have button heads,they are even called calls to action (CTA) in marketing jargon.
Sometimes, and worst of all, elements have button heads, but in code they aren't links or buttons, On the web, buttons are everywhere, It is very rare to see a web without a button, Indeed, buttons are used to submit forms or to activate interactions managed via JavaScript.
On the other hand, the buttons are not used to go to another web page (or to an area of the web page currently being consulted), Sometimes the links have button heads,they are even called calls to action (CTA) in marketing jargon.
Sometimes, and worst of all, elements have button heads, but in code they aren't links or buttons, They are an image, a div, a span, an element awithout an attribute Href or whatever, They are unusable on the keyboard or with assistive technology like a screen reader (link to the glossary)and are therefore inaccessible to people with disabilities.
We are here facing a critical web accessibility problem that we must solve. the links that do it, Buttons with relevant titles First of all, no matter how you code your button at this point, your button should have a relevant label. Forget "click here", "here", "there", "click me", "OK", etc.
A relevant title is a title that correctly and explicitly informs about the action produced by the button, For example, for a search form, it will be "Search", if there are several search forms on the same page, you will specify what each allows you to search: "Search in the site", "Search for an event", etc... , 🙂So that people using assistive technologies can find their way around when they list the buttons on the page.
For a FAQ with accordions to fold and unfold, the button will be on the question which will make a very good title.
Semantic and usable buttons on the keyboard There are several kinds of buttons and several ways to code them. Let's try to review that.
Form submit buttons, buttons type="submit"in We can say that it is easy to create a form button, However, there are rules to respect and they are far from being known by all the people who code websites, unfortunately.
Here are the rules for creating a properly functioning and accessible form submit button: It should be in a tag so that it is possible to submit the form by pressing the key while Entréein one of the form fields (excluding multiline fields such as textarea); It should not be: an element a(whether it has an attribute hrefor not) (of course I've seen that before…); an element buttonor inputwith a type button. It should be an element buttonor inputwith a type submit so that it is possible to submit the form with the key Entre.
✓Example:
Rechercher or By default, an element buttonis of type submitso it is not necessary to specify its type.
However, it may help to clarify the code. There are also a few keyboard navigation rules to consider that are completely native when using the correct HTML elements:
When you are in a field, the key Entre allows you to submit the form; When the focus is on the submit button of the form, the keys Entréeand Espaceallow you to activate the button and submit the form.
Small aside: in the forms, we sometimes see reset buttons, These are type buttons reset, They were very fashionable a long time ago and we see them much less now. These buttons are used to reset the default values of form fields.
Ergonomically, they pose a problem because if you click on them by mistake, you lose everything you have entered.
If they are used, they should be paired with a confirmation request before resetting the form Buttons for scripts, buttonstype="button" Buttons used to activate scripts are very often coded with the wrong HTML elements, The result produced is that people using assistive technologies (link to the glossary)such as screen readers, voice control tools, keyboards, etc., cannot operate these buttons, We see a bit of everything in the source codes: images, elements divor span, personalized elements like monSite-button, elements a with or without an attribute href, etc.
I even know of one of those famous accessibility overlay tools that has coded everything into custom elements and in which no buttons work on the keyboard (a shame when you claim that these tools make sites accessible).
Here are the rules for creating a properly functional and accessible action button: It should not be: one or one : non-semantic elements, non-actionable by default; an element awith attribute hrefor not; a custom item like monSite-button ; a picture ; etc..., It should be an element buttonor inputwith a type button.
✓Example:
Menuor An element buttonis of type submitif its type is not specified, Therefore, not specifying it could cause a problem if this button was in a form formsince it could submit the form! You can also make buttons with divand ARIA, but… ARIA buttons.
So How to do? Sometimes happens that we have no other choice but to make a button via ARIA (link to the glossary) or that we have no choice but to recommend it because certain project contexts prevent us from using an HTML button or because the development team doesn't really want to redo its HTML.
This technique is only to be used as a last resort , in very specific cases where using a button would really not be possible (I don't even have an example at hand).
It's time to remember the first rule of ARIA: no ARIA is better than bad ARIA . An HTML element exists?
Use it! Well, let's say you really have no choice, here are the rules to follow: On the element that is an action button, add an attribute role="button"to give it button semantics .
✓Warning !
The role="button"cannot be placed on all HTML elements.
✓For example:
It is not allowed on a title because then it would break its title semantics.
Look for your HTML element in this table of the ARIA in HTML specification to check what you are allowed to use as a role on it, If this element is not an element awith an attribute href="#", add an attribute tabindex="0"to it so that it can be reached on the keyboard ; Create a small script in JS to ensure that all elements with a role="button"can be activated via the keyEspace (they will already be activated with the key Entre).
✓Warning !
How many times have I seen, during accessibility audits, HTML buttons button with a role="button"whose activation with the key Espacedid a double action (for example: it immediately opened and closed an accordion!).
This behavior occurs because buttonalready has a native behavior via the key Espaceand the script forces the same behavior on it; it is therefore duplicated.
In the JS, make sure that the script adding this behavior does it for all the elements with role="button"which are not them selves button or input type="button"orinput type="submit" .
Putting one role="button"on one is pointless, of course; it's often linked to the replacement of a divby the right HTML element but without checking the attributes present.
Exemple