Hacker News Reader

Comment by pverheggen | Hacker News Reader

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

You can just as easily apply the same tabindex to a div though.

> Only if document order is sane. Usually with modern websites it isn't...

Well that's the real problem, all your non-interactive content (like text) is going to be out of order too. You're just adding to the confusion if buttons and other inputs are in a different order from the content they're associated with.

> Otherwise, he will pointlessly tab through search, menus, cookie bars and a ton of other pointless stuff first.

The proper way of dealing with this is a "Skip to Main Content" element:

https://webaim.org/techniques/skipnav/

View on HN

> The proper way of dealing with this is a "Skip to Main Content" element: > > https://webaim.org/techniques/skipnav/

No, it isn't the proper way. That only works if you can see the skip link and know to press enter. Otherwise you will tab straight into the navigation. So possibly useful for screen readers, but completely useless for most keyboard users. Yet another stupid webdev workaround for a selfimposed problem.

What you should do is autofocus the first form element (if there is a form), give it tabindex=1 and number the other form elements in a sensible ascending tabindex order. Otherwise, proper semantic markup is sufficient, even for screen readers.

Usually you would have it appear when it's focused, like this for example:

https://www.nytimes.com/

And yes, this is an acceptable solution according to the W3C:

https://www.w3.org/WAI/WCAG21/Techniques/general/G1

Your solution of focusing the first form element is pretty idiosyncratic. It's better to follow WAI patterns, because patterns have predictable behavior. Otherwise, keyboard users will have to learn how to interact with your website from scratch, instead of just following the same pattern they're used to from other sites.

Any website implementing a form for data entry is expected by any sane user to autofocus the first form element.

Sorry, missed the part about "form for data entry". If that's the main point of the given page, then sure, focus on the first input is fine.

Your original comment was to use tabindex to skip search, menu bars, breadcrumbs, etc. and for that there are better options.

I would be very surprised if a website autofocused almost anything on page load, except for very specific applications where that makes sense. I just tried clicking through some forms on gov.uk, which is a website that has spent a _lot_ of time testing and improving the UX of their forms, and none of them had autofocused elements, not even on later pages after having already filled in elements.

I can imagine screen readers would deal particularly poorly with this behaviour, because the user would be dropped in a field without any of the context of the page, just the field label to work with. However, I've not been able to test that out properly.

I don't think the behaviour you're describing is anywhere near as common as you think it is, and I suspect it would make a page less accessible for a number of kinds of users.

Reply on news.ycombinator.com