←back to thread

Just use a button

(gomakethings.com)
284 points moebrowne | 1 comments | 31 Oct 25 16:59 UTC | HN request time: 0.203s | source
Show context
bugsliker ◴[31 Oct 25 17:33 UTC] No.45774539[source]▶
- tabindex=0 doesn’t affect ordering, does it?

- why do you need to listen for events at the document level?

not that i disagree with the article, but some arguments didn’t seem right.

replies(2): >>45774646 #>>45774711 #
thyristan ◴[31 Oct 25 17:43 UTC] No.45774646[source]▶
> - tabindex=0 doesn’t affect ordering, does it?

Of course it does. tabindex=0 doesn't sort naturally into the automatic tabindex order, it sorts AFTER everything. So you are jumping through all the other tabindex elements, then you are jumping back to all tabindex=0.

replies(4): >>45774767 #>>45774845 #>>45775649 #>>45777072 #
pverheggen ◴[31 Oct 25 18:01 UTC] No.45774845[source]▶
That's the same behavior as a <button> without tabindex, like the author is proposing.

It's generally advised not to set tabindex to anything but 0 or -1 and let the document order dictate tab order.

replies(1): >>45775053 #
thyristan ◴[31 Oct 25 18:20 UTC] No.45775053[source]▶
> That's the same behavior as a <button> without tabindex, like the author is proposing.

Yes, but often you have elements with taborder > 0.

> It's generally advised not to set tabindex to anything but 0 or -1 and let the document order dictate tab order.

Only if document order is sane. Usually with modern websites it isn't, document order is a broken notion if you can position elements at will and e.g. put navigation at the bottom of a document but move it to the top by CSS. Which is actually a recommendation that some people make for acessibility...

What you usually want to do is assign a sensible taborder > 0 to the one form element that the user is probably currently using. Otherwise, he will pointlessly tab through search, menus, cookie bars and a ton of other pointless stuff first.

replies(2): >>45775333 #>>45775968 #
1. MrJohz ◴[31 Oct 25 19:48 UTC] No.45775968[source]▶
You almost certainly don't want to assign tab order manually. Theoretically, if your html is out-of-order for some reason, then you can fix it with taborder, but there are so many issues with out-of-order html that it's much better to avoid that in the first place. Even on modern websites, it is almost always easier to lay your html out in the correct order rather than messing around with the order via CSS. (I read an article recently by a web accessibility expert that discussed the issue of flexbox's order parameter and how the working group designing it failed to accessibility into account when adding it to the spec: https://alice.boxhall.au/articles/a-threat-model-for-accessi...)

You mention using it to skip a nav header or something similar, but (1) you have autofocus for that if you need it (and you don't usually need it), and (2) the pattern where you provide a "jump to content" button is typically a better approach, because it allows the user to decide what they want to do when they arrive on your site, rather than you deciding for them. If the "jump to content" button behind visible when focused and is the first element on the screen, then it works perfectly for screen readers and other keyboard users, and you don't need to handle taborder manually.

There are always exceptions to these sorts of rules, and some times tabindex might be necessary, but I've not yet come across a case where the problem couldn't be solved better in a different way.