4 ms·

For HTML, the main alternative to a button is a link, which does have some affordances (often underlined, changes color on hover.) We are sometimes told not to

For HTML, the main alternative to a button is a link, which does have some affordances (often underlined, changes color on hover.) We are sometimes told not to use a button when a link will do [1]. Supposedly, links are better for accessibility or for user expectations. You can style links to look like buttons, but I have trouble making them exactly the same if they’re next to each other (for example, the same height) and it seems like doing it the hard way. So how seriously should I take that advice? [1] https://www.a11y-101.com/design/button-vs-link https://www.a11y-101.com/design/button-vs-link

nevir 3y ago
Consider this approach: <form> <button formaction="https://your/destination">Clicky!</button> https://your/destination">Clicky!</button> </form>
spcebar 3y ago
Take it fairly seriously. Using the wrong elements and markup messes with screen readers, which makes the web harder to use for people with visual impairments and makes your websites vulnerable to ADA lawsuits. If you need CSS help, there's a lot of free resources for that. Some pitfalls you might run into when styling links and buttons to look alike are font faces, display properties, widths, borders/outlines, and paddings, so check those as your first culprits. You can use aria-roles in a pinch, but really you should use the right tool for the right job.
- carlosjobim 3y ago
  Total fear mongering. Then you can be sued as well for writing your comment in a too small font.
  - spcebar 3y ago
    I've had multiple clients who have been sued for wrong font sizes and incorrect contrast ratios. This is absolutely real and prevalent.
    - carlosjobim 3y ago
      Can't imagine such a lawsuit having any success, unless you have a corrupt judge, who will find or make up any fake reason for a guilty charge. In real life there are 100 times as many accessibility problems as on any web page – why shouldn't they be sued?
Shog9 3y ago
You may be misunderstanding the concern expressed on that page. A button communicates action when activated; a link communicates navigation (not necessarily "load new page", perhaps just "show new information on current screen"). Using a button for navigation or a link styled like a button for action has potential to thwart these expectations in various ways. I'll admit, sometimes this makes some sense; you may be building an interaction that doesn't map cleanly onto either "trigger action" or "show information", and you wish to pick and choose the semantics that best fit your needs. ...But then there's the situation you allude to, where you have a button (action) and a link (navigation) and are just trying to make them look the same for consistency. Even if you pull it off visually, the chance that an end-user's client software will misinterpret what you're doing in some way and cause confusion is high.
- skybrian 3y ago
  The distinction between navigation and action seems rather blurry. Two pages often have often different views of the same entity. You’re not really “going somewhere,” particularly if it’s not a full page reload. But I guess the main point is not to use buttons in your nav bar.
  - danaris 3y ago
    My rule of thumb can be described in two ways: 1) Can you return things to exactly the state they were before simply by hitting the browser's "back" button once? Then use a link. Otherwise use a button. 2) Will this navigation have side effects (eg, change values in the DB)? If so, then use a button. Otherwise, use a link.

nevir 3y ago

Consider this approach: <form> <button formaction="https://your/destination">Clicky!</button> https://your/destination">Clicky!</button> </form>

spcebar 3y ago

Take it fairly seriously. Using the wrong elements and markup messes with screen readers, which makes the web harder to use for people with visual impairments and makes your websites vulnerable to ADA lawsuits. If you need CSS help, there's a lot of free resources for that. Some pitfalls you might run into when styling links and buttons to look alike are font faces, display properties, widths, borders/outlines, and paddings, so check those as your first culprits. You can use aria-roles in a pinch, but really you should use the right tool for the right job.

carlosjobim 3y ago
Total fear mongering. Then you can be sued as well for writing your comment in a too small font.
- spcebar 3y ago
  I've had multiple clients who have been sued for wrong font sizes and incorrect contrast ratios. This is absolutely real and prevalent.
  - carlosjobim 3y ago
    Can't imagine such a lawsuit having any success, unless you have a corrupt judge, who will find or make up any fake reason for a guilty charge. In real life there are 100 times as many accessibility problems as on any web page – why shouldn't they be sued?

Shog9 3y ago

You may be misunderstanding the concern expressed on that page. A button communicates action when activated; a link communicates navigation (not necessarily "load new page", perhaps just "show new information on current screen"). Using a button for navigation or a link styled like a button for action has potential to thwart these expectations in various ways. I'll admit, sometimes this makes some sense; you may be building an interaction that doesn't map cleanly onto either "trigger action" or "show information", and you wish to pick and choose the semantics that best fit your needs. ...But then there's the situation you allude to, where you have a button (action) and a link (navigation) and are just trying to make them look the same for consistency. Even if you pull it off visually, the chance that an end-user's client software will misinterpret what you're doing in some way and cause confusion is high.

skybrian 3y ago
The distinction between navigation and action seems rather blurry. Two pages often have often different views of the same entity. You’re not really “going somewhere,” particularly if it’s not a full page reload. But I guess the main point is not to use buttons in your nav bar.
- danaris 3y ago
  My rule of thumb can be described in two ways: 1) Can you return things to exactly the state they were before simply by hitting the browser's "back" button once? Then use a link. Otherwise use a button. 2) Will this navigation have side effects (eg, change values in the DB)? If so, then use a button. Otherwise, use a link.