Why is the tab key skipping these links?
December 23, 2021 7:25 AM Subscribe
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?
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
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
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
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
So, do that. :-)
You could also add the
posted by artlung at 12:28 PM on December 23, 2021 [3 favorites]
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]
« Older Raw Food from Whole Foods--cookbook... | Online contact lens seller seems too good to be... Newer »
This thread is closed to new comments.
posted by kimberussell at 7:32 AM on December 23, 2021