Why is the tab key skipping these links?

December 23, 2021 7:25 AM

The webpage at https://staging.firstunitarian.org/ has three links in colorful boxes -- the link text for the first of them is "Find Community". When I use the Tab key to navigate this page, it skips over these links. I've tried it in Firefox and Edge browsers on Windows 10. The links have no tabindex value, they are not floated, so I don't understand why they are skipped. Can anyone explain this? I guess basically my question is, what are ALL the possible reasons a browser would fail to tab to links?
posted by Chlorine to Technology (5 answers total)

I took a quick look at the source and there's no href='TheURL' in the code for those 3 links. And those 3 links don't work when I click on them.
posted by kimberussell at 7:32 AM on December 23, 2021

Best answer: Yeah, they have an a-tag but no href, so the browser is presumably noticing that they're not really links. Not sure what the intent was there. Sometimes you'll want to have something be a link but not have a real href (like if you're going to capture the click with javascript instead of using the actual html link) but in that case you usually write <a href="#"></a>. It's odd, but the site is kind of janky in other places so not wholly surprising.
posted by mskyle at 7:38 AM on December 23, 2021

They are anchors, not links.

Some UI are known to abuse Anchors as pseudo-buttons by not setting HREF or setting it tp "#" then capture and process the onclick event.
posted by kschang at 8:15 AM on December 23, 2021

They are anchors, not links.

It does seem, though, like these are supposed to be links rather than just anchors, what with the hover-behavior and the text (all the buttons have text that implies they go somewhere). But it *is* a "staging" version of the site and perhaps just not finished.
posted by mskyle at 8:30 AM on December 23, 2021

As others have pointed out those buttons which don't do anything yet lack the href attribute that will signal to the browser they should be available for focus by the user.

So, do that. :-)

You could also add the tabindex attribute with a value of 0 to put it in the flow of focusable elements. (see MDN)
posted by artlung at 12:28 PM on December 23, 2021 [3 favorites]