Making a link look like a button is materially dishonest. It tells users that links and buttons are the same when they’re not.
For example, we can open a link in a new tab, copy the address or bookmark it for later. All of which we can’t do with buttons.
Most of the time, tooltips shouldn’t be needed if you provide clear textual labeling and familiar iconography. Most of the time toggletips are a complex way of providing information that could just be part of the document’s prose content. But I see each of these components all the time in auditing websites, so I wanted to provide some guidance on how to make the most of them.
- If you have space, don’t use tooltips or toggletips. Just provide clear labels and sufficient body text.
- If it’s a tooltip you are looking to use, decide whether the tip’s content should be provided as the label or description and choose ARIA properties accordingly.
- Don’t rely on
titleattributes. They are not keyboard accessible and are not supported in many screen reader setups.
- Don’t describe toggletips with
aria-describedby. It makes the subject button non-functional to screen reader users.
- Don’t put interactive content such as close and confirm buttons or links in tooltips or toggletips. This is the job of more complex menu and dialog components.
How you design and implement your toggle buttons is quite up to you, but I hope you’ll remember this post when it comes to adding this particular component to your pattern library. There’s no reason why toggle buttons — or any interface component for that matter — should marginalize the number of people they often do.
You can take the basics explored here and add all sorts of design nuances, including animation. It’s just important to lay a solid foundation first.
- Use form elements such as checkboxes for on/off toggles if you are certain the user won’t believe they are for submitting data.
<button>elements, not links, with
- Don’t change label and state together.
- When using visual “on” and “off” text labels (or similar) you can override these with a unique label via
- Be careful to make sure the contrast level between the button’s text and background color meets WCAG 2.0 requirements.
See the source link for very detailed descriptions of all of these points.