6 ms·

I think a big part of the issue here, and one that's often overlooked, is that both browser vendors and the resulting spec are to blame for the emergence of man

I think a big part of the issue here, and one that's often overlooked, is that both browser vendors and the resulting spec are to blame for the emergence of many of these patterns. For example, making a button that visually looks like a link but keeps the correct semantics takes over 20 lines of non-trivial CSS, even today [1]. It is then no wonder that developers take the easier route of attaching event listeners to links instead. Realistically, if we want to have sites that are semantically sound, writing them the correct way should be so easy that you'd have to go out of your way to make them broken. Even with standards as new as HTML5 we have nonsense like the <article> and the <section> tag. Quoting MDN [2][3], "[the] <article> element represents a self-contained composition" and "[the] <section> element represents a standalone section". Even when I try my best to be semantically correct, I can't really tell when to use which. [1] https://stackoverflow.com/a/12642009/1470607 https://stackoverflow.com/a/12642009/1470607 [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ar... [3] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section https://developer.mozilla.org/en-US/docs/Web/HTML/Element/se...

SilasX 6y ago
>For example, making a button that visually looks like a link but keeps the correct semantics takes over 20 lines of non-trivial CSS, even today. Can you explain the use-case here? What about "being a button" do you need for the desired functionality? You just want it not to look like a button, while still acting like a button and looking like a link?
- deleted 6y ago
  [deleted]
- Deimorz 6y ago
  Over-simplifying, but in general a link should take you to a different url/destination. So if you want something that takes an action on the current page via JS but looks like a text link, it should be a <button> element styled as a link. Here's a good, extensive article on the differences and use-cases for links and buttons: https://css-tricks.com/a-complete-guide-to-links-and-buttons/ https://css-tricks.com/a-complete-guide-to-links-and-buttons...
  - SilasX 6y ago
    That much I understand. But then, if you want it to act like a button -- do something on the page but not link anywhere -- why not leave it to look like a button so the user has the right expectation for what it's doing? As I thought, this use-case comes down to "How do I trick the user into treating something like a link when it's really a button?" Or, more generally, "How do I subvert user expectations for a website?" How about, don't? Maybe the fact that it's hard to do within the web spec means you should re-think what you were trying to do?
    - kall 6y ago
      Do you think the [-] link on this very comment should look and layout flow like a button?
      - deleted 6y ago
        [deleted]
      - mwcampbell 6y ago
        Yes. So should the upvote, downvote, and unvote links, because these things don't go to nw pages, and the voting links take immediate action.
        ratww 6y ago
        I agree with you, but just a point: the upvote and downvote arrows actually go to other pages when you disable JS, so it makes sense for them to be <a> tags. They should provide better feedback though (and a title attribute for screen readers). The [-] is more complicated. Ideally it would link to a non-js fallback, but alas. But it's much better as an anchor tag than as a button disguised as a link.
        robertoandred 6y ago
        No, it's the absolute worst kind of anchor link: it's linking to javascript:void(0). It should be a button. Not complicated.
- Etheryte 6y ago
  I think focusing solely on the link side of things is missing the forest for the trees. All of the same points apply if you want a button element to look like pretty much anything other than the default button, that is, use an actual design on your page while keeping semantics in tact.

SilasX 6y ago

>For example, making a button that visually looks like a link but keeps the correct semantics takes over 20 lines of non-trivial CSS, even today. Can you explain the use-case here? What about "being a button" do you need for the desired functionality? You just want it not to look like a button, while still acting like a button and looking like a link?

deleted 6y ago
[deleted]
Deimorz 6y ago
Over-simplifying, but in general a link should take you to a different url/destination. So if you want something that takes an action on the current page via JS but looks like a text link, it should be a <button> element styled as a link. Here's a good, extensive article on the differences and use-cases for links and buttons: https://css-tricks.com/a-complete-guide-to-links-and-buttons/ https://css-tricks.com/a-complete-guide-to-links-and-buttons...
- SilasX 6y ago
  That much I understand. But then, if you want it to act like a button -- do something on the page but not link anywhere -- why not leave it to look like a button so the user has the right expectation for what it's doing? As I thought, this use-case comes down to "How do I trick the user into treating something like a link when it's really a button?" Or, more generally, "How do I subvert user expectations for a website?" How about, don't? Maybe the fact that it's hard to do within the web spec means you should re-think what you were trying to do?
  - kall 6y ago
    Do you think the [-] link on this very comment should look and layout flow like a button?
    - deleted 6y ago
      [deleted]
    - mwcampbell 6y ago
      Yes. So should the upvote, downvote, and unvote links, because these things don't go to nw pages, and the voting links take immediate action.
      - ratww 6y ago
        I agree with you, but just a point: the upvote and downvote arrows actually go to other pages when you disable JS, so it makes sense for them to be <a> tags. They should provide better feedback though (and a title attribute for screen readers). The [-] is more complicated. Ideally it would link to a non-js fallback, but alas. But it's much better as an anchor tag than as a button disguised as a link.
        robertoandred 6y ago
        No, it's the absolute worst kind of anchor link: it's linking to javascript:void(0). It should be a button. Not complicated.
Etheryte 6y ago
I think focusing solely on the link side of things is missing the forest for the trees. All of the same points apply if you want a button element to look like pretty much anything other than the default button, that is, use an actual design on your page while keeping semantics in tact.