Glittering fragments in chaotic, unstable orbit. A sharp friend with a fungal halo. πŸ”ž

I do what I am: πŸͺžπŸ•ΈοΈπŸ—οΈπŸͺ‘πŸ”ͺπŸ„πŸŽ­πŸŒ™πŸ©Έ


SOLVED – this is a MacOS issue, see replies for details


I could really use the help of someone who knows web dev better than me.

I feel like I'm losing my mind here after discovering that you can't use the tab key to navigate between the links on my personal website. Tab finds the <input> and <button> elements just fine, but not the <a> elements. I have no idea why; I don't think I'm doing anything weird here, I've got bog-standard <a href="/some-page">Link Text</a> links, and the tab key doesn't find them unless I put an explicit tabindex="0" in there (but on Firefox, adding that tabindex doesn't work).

My understanding is that an <a> tag with href="..." is supposed to be automatically focusable by the keyboard with ordinary tab navigation, at least that's what MDN tells me:

Some focusable HTML elements have a default tabindex value of 0 set under the hood by the user agent. These elements are an <a> or <area> with href attribute, <button>, <frame> Deprecated , <iframe>, <input>, <object>, <select>, <textarea>, and SVG <a> element, or a <summary> element that provides summary for a <details> element.

Am I missing some nuance here?

I notice Cohost automatically adds tabindex="0" on post links, and just like with my website, I can navigate to them with the tab key in Chrome but not Firefox! (Try it yourself with the MDN link above, see if you get the same behavior.)

Now here's something else weird: I can get the tabindex="0" trick to work on Firefox by applying it to a non-focusable element. For example, this works just fine to make the list items selectable even on Firefox:

<ul>
    <li tabindex="0">
        <a href="https://cohost.org" tabindex="-1">Link to Cohost</a>
    </li>
    <li tabindex="0">
        <a href="https://cohost.org" tabindex="-1">Also Cohost</a>
    </li>
</ul>

And then I guess I could just use some javascript to pass through an attempt to use the keyboard to navigate to the link? But why would that be necessary? Can someone explain this discrepancy between MDN's documentation (that says links are by default in the tab order already) and the behavior I'm observing where they aren't in Chrome or Firefox, and even with a tabindex set, they still aren't in Firefox?


You must log in to comment.

in reply to @arachnixe's post:

That sounds really weird - in all my keyboard navigation testing in both Firefox and Chrome, links are included in tabbing order by default. Just a stab in the dark, do you have any browser extensions that might impact it?

Aaaaa, this is it! Thank you so much. The modern version of the setting seems to just be called "keyboard navigation," but I flipped that on and Firefox at least started behaving as expected. Chrome still perplexingly requires the tabindex="0" solution, but at least I'm not tearing my hair out wondering why I wasn't seeing behavior in line with the documentation.