[HN Gopher] The Button Cheat Sheet
___________________________________________________________________
The Button Cheat Sheet
Author : tosh
Score : 112 points
Date : 2021-05-25 13:32 UTC (9 hours ago)
(HTM) web link (www.buttoncheatsheet.com)
(TXT) w3m dump (www.buttoncheatsheet.com)
| avocadoLife wrote:
| I've heard this rule of thumb:
|
| If it is supposed to be a meaningful link - be it internal or
| external - use a direct anchor element with an href. Styling it
| however you like shouldn't hurt.
|
| Otherwise, for any other interactions use a <button> element
| vidyesh wrote:
| Me too! And I been following this for as long as I remember.
| iirc, Digital A11Y too recommends that.
| jasonlotito wrote:
| My rule of thumb has always been a button does something, a link
| takes you somewhere.
| corty wrote:
| Whats missing is which ones work without JavaScript. And
| accessibility characteristics.
| extra88 wrote:
| I'd say whether a button does something without JavaScript is a
| separate topic.
|
| The page repeatedly mentions accessibility characteristics, it
| just doesn't call them all out as such.
|
| > Not keyboard focusable
|
| > Correct button role
|
| > correct key events by default
|
| > No accessible name
|
| "Shows wrong cursor on hover" is arguably also about an
| accessibility characteristic.
| amichal wrote:
| without javascript the only meaningful thing that can be done
| in HTML are to navigate to a new document with HTTP GET
| (A[href=]) or submit data via HTTP POST or similar verbs
| ((BUTTON, INPUT[TYPE=BUTTON]. INPUT[TYPE=IMAGE]) where the url
| is in the FORM tag or the form* attributes. This is because
| without javascript there are no persistent stores on the client
| side and you have to interact with HTTP to create a stateful
| application.
| soperj wrote:
| Honestly, most people do not care whether you're doing client
| side or server side. Regular people don't even notice a
| difference.
| riffraff wrote:
| yeah, "A focusable div with a button role" should be pretty
| accessible compared to a div with onclick event and neither of
| those things, for example.
| extra88 wrote:
| It is not sufficiently accessible because it still won't
| activate on Space Bar or Enter/Return keydown events.
| "Accessible" does not only mean "screen reader users can use
| it."
| FriedrichN wrote:
| True, only <button> (if type is not "button") and <input
| type="button"> function within a <form> context as a button.
| extra88 wrote:
| <input type="image"> does as well.
| Tabular-Iceberg wrote:
| What about <embed src="button.swf">? Should I use that?
| modin wrote:
| Try <applet code="button.class" height="60"
| width="240"> <param name="button" value="Yea or nay?">
| <b>Sorry, you need Java to press this button.</b>
| </applet>
|
| I had some buttons like that back in the day, with animations,
| sound effects and all, geocities-esque. The computer almost
| grinded to a halt loading it, but pre-teen me felt it was worth
| it.
| butz wrote:
| Add web component implementation for a button, just for
| completeness.
| dmitriid wrote:
| Including a button inside Shadow DOM which breaks accessibility
| and cannot participate in form events without javascript.
| felipemesquita wrote:
| Not included is this unbelievable button from an example in
| TikTok's web api: https://developers.tiktok.com/doc/login-kit-web
| oneeyedpigeon wrote:
| I wonder if that's because the TikTok crapfest _shouldn 't even
| be a button_, it should be a link.
| mmatuzo21 wrote:
| Yes, I'll start to work on linkcheatsheet.com soon. :)
| 0xTJ wrote:
| To me, a good website should be usable without any added style or
| scripting. CSS should make it look good, but you should be using
| the markup to make is usable and roughly laid out how you want,
| at least with a sensible default.
| p_j_w wrote:
| Do you have an example of such a website? I'm genuinely curious
| if such a thing exists. I've been doing some CSS+HTML tutorials
| lately, and the ones I've been reading, I don't see how you
| would without style attributes in all of your tags, which is
| essentially just using CSS.
| extra88 wrote:
| This very site is usable for reading and writing without CSS
| or JavaScript. Oddly, you can vote without JavaScript but not
| without CSS (buttons aren't visible in layout), which could
| easily be corrected.
|
| Its appearance doesn't change as much as it might because it
| uses nested tables for layout (a Nineties-era practice) and
| deprecated properties like bgcolor but even without those
| choices it could still be usable.
| nerdbaggy wrote:
| Have any examples? Just using tables to lay stuff out?
| oneeyedpigeon wrote:
| No, definitely not. Tables are for data, not for laying stuff
| out.
| memco wrote:
| > Shows wrong cursor on hover
|
| This seems a bit unfair to single out given that they gave equal
| styles to all the buttons. Why didn't they include `cursor:
| default` so they all look exactly the same but function slightly
| differently?
| oneeyedpigeon wrote:
| They don't apply any cursor styles to any of these 'buttons',
| as far as I can see. Their stylesheet
| (https://www.buttoncheatsheet.com/assets/style.css) only has
| one instance of "cursor", which is unrelated.
| tomcooks wrote:
| Interesting site, I'm not a big fan of emoji/slang/playful tone
| which makes me feel like I'm being taken for an idiot but that's
| my own problem
|
| Thanks for making this and illustrating all the cases and
| variations of a problem, consider making a whole site about these
| accessibility problems
| mmatuzo21 wrote:
| Yeah, sorry. I understand how that's not everyones style, but
| I'm glad that you could still get something out of the site.
|
| You'll find more stuff like that on my other site
| htmhell.dev.l, if you're interested. :)
| [deleted]
| chaoticmass wrote:
| Weird-- The first <button> example shown does not show the right
| cursor when hovering for me.
| exogen wrote:
| The normal arrow (not the hand) is supposed to be the correct
| cursor for buttons, but many people change it to the hand
| because they think it indicates interactivity.
|
| However, the div button is still wrong because it shows the
| text selection cursor in the button.
| sichtlinkair wrote:
| Kinda funny to me we need a website to explain you should use
| <button> for a button
| firefoxd wrote:
| One type of button is missing from the list. Input with
| type="image" and src="img.gif"
|
| It's a button with all the properties of an image. Haven't used
| it in many years but it's still around.
| fareesh wrote:
| My rule is "anchor tag for everything unless it's a form
| submission", in which case, button.
| brianzelip wrote:
| Even better: "anchor tag for everything that takes a user to a
| url, button for everything else" (forms and other action/event
| initiators).
| kevincox wrote:
| I don't think this rule. Anchor tags should be used to go
| somewhere. Buttons should be used to do something. There are
| cases where these overlap (am I popping up a settings menu
| (doing something) or navigating to the settings (going
| somewhere)) but in many cases it is distinct.
|
| Furthermore anchors have awesome features such as being able to
| copy the destination or open the link in a new tab. If the
| target isn't actually a real location using anchors can be
| confusing.
| david422 wrote:
| But why would you make the Yay or Nay? buttons not all real
| buttons then?
| recursive wrote:
| So you can see the behavior?
| hcarvalhoalves wrote:
| Am I the only one who thinks CSS + JS on top of HTML broke the
| conceptual model beyond hope?
|
| The fact you can make any element look and behave the almost the
| same way - ignoring compatibility and usability issues - is a
| minefield. We could create a guide like this for basically
| everything and demonstrate 99% of the web isn't compliant.
| cryptonector wrote:
| HTML was about markup so that styling could be left to the
| user-agent. So, adding CSS and JS breaks that model. It's the
| web we've got now.
| mosdl wrote:
| You can fake things in most UI systems, nothing new here.
| hcarvalhoalves wrote:
| Well, that's true, but HTML wasn't invented to create general
| UIs in the first place, so it's even worse.
| MsMowz wrote:
| I don't think that's really true; in the original WWW
| proposal[1], Tim Berners-Lee specifically talks about using
| the web to build applications and he considered hypermedia
| applications to be only a matter of time and resources
| (about which he was correct).
|
| [1]: https://www.w3.org/History/1989/proposal.html
| dmitriid wrote:
| > Tim Berners-Lee specifically talks about using the web
| to build applications
|
| And those applicatons are, and I quote:
|
| === start quote ===
|
| Specific Applications
|
| The following are three examples of specific places in
| which the proposed system would be immediately useful.
| There are many others.
|
| Development Project Documentation.
|
| The Remote procedure Call project has a skeleton
| description using Enquire. Although limited, it is very
| useful for recording who did what, where they are, what
| documents exist, etc. Also, one can keep track of users,
| and can easily append any extra little bits of
| information which come to hand and have nowhere else to
| be put. Cross-links to other projects, and to databases
| which contain information on people and documents would
| be very useful, and save duplication of information.
|
| Document retrieval.
|
| The CERNDOC system provides the mechanics of storing and
| printing documents. A linked system would allow one to
| browse through concepts, documents, systems and authors,
| also allowing references between documents to be stored.
| (Once a document had been found, the existing machinery
| could be invoked to print it or display it).
|
| The "Personal Skills Inventory".
|
| Personal skills and experience are just the sort of thing
| which need hypertext flexibility. People can be linked to
| projects they have worked on, which in turn can be linked
| to particular machines, programming languages, etc.
|
| === end quote ===
|
| The web, even in Tim Berners-Lee's vision, is strictly
| _about documents_.
|
| In comparison, by 1989 France's Minitel had over three
| million installed terminals with over 6000 different
| services [1]. Many of them (mail-order, games, ticket
| purchases etc.) cannot be expressed in a document-centric
| system. But even then (and I'm pretty sure Tim-Berners
| Lee had been aware of Minitel), the web was presented as
| a system for viewing and sharing _documents_ , and the
| job of applications was left to applications.
|
| [1] https://en.wikipedia.org/wiki/Minitel
| edoceo wrote:
| Here:
|
| > would be immediately useful. There are many others.
|
| Aren't we at the "many others" point of Sir Tim's theory?
|
| You're using his three specific examples as if he was
| talking about the _limit_ of the thing. I think he was
| talking about the start of something big.
| tl wrote:
| It depends on your level of reductionism; if you believe
| in Unix-style "everything is a file" then "everything is
| a document, including the applications that edit other
| documents" isn't a massive conceptual leap.
| dmitriid wrote:
| Time Berners-Lee:
|
| literally describes web applications as handling
| documents and only documents. Bases HTML on SGML, which
| is literally a language to describe documents, and only
| documents. Calls the system, a ypertext system. Lists
| exclusively text systems as systems one might connect to.
|
| In the conclusion writes (emphasis mine): "We should work
| toward a universal linked _information system_ , in which
| _generality and portability are more important than fancy
| graphics techniques and complex extra facilities_. The
| aim would be to allow a place to be found for any
| information or reference which one felt was important,
| and a way of finding it afterwards. "
|
| HN in 2021:
|
| no-no-no, that's reductionism, what he _really_ meant was
| full-featured applications, it 's not "a massive
| conceptual leap"
|
| ====
|
| Edit.
|
| Time Berners-Lee in an interview [1]:
|
| "It was designed in order to make it possible to get at
| documentation and in order to be able to get people --
| students working with me, contributing to the project,
| for example -- to be able to come in and link in their
| ideas, so that we wouldn't lose it all if we didn't
| debrief them before they left. Really, it was designed to
| be a collaborative workspace for people to design on a
| system together. "
|
| [1] https://achievement.org/achiever/sir-timothy-berners-
| lee/#in...
| Sembiance wrote:
| I'm making a website right now that only uses HTML, no
| CSS/styles and no JavaScript and it is a breath of fresh air :)
| NoGravitas wrote:
| The only problem with this is that, for historical reasons
| (and lack of caring?), the default stylesheets for unstyled
| HTML in the leading browsers are terrible. Best to apply a
| simple classless style sheet once then forget about it.
| oneeyedpigeon wrote:
| There's not _that much_ that is objectively bad about the
| default styles. About the only thing that I can really put
| my finger on is equal top /bottom margins on headings.
| Possibly default line height, too. I wonder if one of the
| browsers will (or already has?) ever change that.
| dillondoyle wrote:
| For html buttons and other newer input elements specifically
| the css styling is really hard to get
| consistent/looking/working across devices and browsers or just
| flat out doesn't work.
|
| Maybe developers should lean into just leaving the native
| styles, but it can look bad and present its own problems in
| tightly styled mobile sites or apps.
|
| I might propose a better solution is expanding accessibly,
| aria, etc so we can make modern sites & elements more
| accessible.
|
| The concept of what a website is has changed a LOT.
|
| I don't think we can (and personally don't want to) stop the
| train towards expanding custom elements, components, intense
| dom stuff.
|
| So instead we should prioritize making it more accessible.
| anticristi wrote:
| I wonder how much "HTML non-compliance" is lack of education
| and how much dark patterns. Remember the time clean URLs were a
| thing? Don't tell me Facebook engineers haven't heard about it.
|
| https://m.facebook.com/events/2805322196445083/?event_time_i...
|
| Like seriously. It's almost like someone learned HTML/HTTP best
| practices, then did the exact opposite.
| MaxBarraclough wrote:
| Somewhat off topic: I thought perhaps you meant _cool URIs_
| but it turns out that 's a different term.
|
| _Cool URIs_ are about permanence. Reworking your internal
| file-structure should not break existing URIs. [0]
|
| _Clean URLs_ are about avoiding leaking implementation
| details into the URL, e.g. _.php_ , and also avoiding
| excessive use of query strings. [1]
|
| [0] https://www.w3.org/Provider/Style/URI
|
| [1] https://en.wikipedia.org/wiki/Clean_URL#Structure
| worik wrote:
| There are the bullets, and the gun.
|
| Make up your own mind where you point it when it is loaded.
|
| If you choose your own foot, that is your choice!
___________________________________________________________________
(page generated 2021-05-25 23:01 UTC)