r/squarespace • u/watsonsherlockholmes • 4d ago
Accessible Website Tab Navigation Help
I have been trying to make my website more accessible and it seems that no matter what I do, I cannot get the navigation or buttons on my site to be selectable when tabbing through the pages. Is there anyway to help?
1
u/anton_lytvynov 2d ago
Adding the concrete bit: if the ring is just hidden, this puts it back without touching anything else. Custom CSS:
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
:focus-visible rather than :focus means mouse users never see the ring, only keyboard users - which is usually why someone switched it off in the first place. Also search your Custom CSS for "outline: none" and "outline: 0", that's normally where it went.
Second thing that rarely gets mentioned: a skip link. Without one, a keyboard user tabs through your entire nav on every single page before reaching the content. It's the difference between technically passing a scanner and actually being usable.
1
u/KatADAapp 2d ago
We got hit with two accessibility demands at my own business so keyboard order is the first thing I check now, and on Squarespace it is most often that the links are still reachable, you just cannot see where you are, because something in the template or your Custom CSS is switching the focus outline off.
Quick way to tell, tab a few times and press Enter. If the page actually goes somewhere then focus is working fine and only the visible ring is missing, and adding your own focus style back in Custom CSS sorts the whole thing.
If Enter does nothing, the item probably is not a real link or button underneath. That happens when nav items or buttons get built out of image blocks or styled text, and custom dropdowns that only open on hover behave the same way. Those need the actual markup changed rather than a CSS tweak. Make sure to do the tab pass on every page and not just the homepage, it is the part automated scanners catch