Search code examples
cssnavigationonfocusweb-access

First nav anchor being skipped while tabbing and focus outline not displaying

So I'm working on a site for a client and accessibility is important.

So I've just enabled the outline property on all a:focus states and for some reason the first link in the nav is being skipped while tabbing through the page and the :focus style isn't appearing.

I'm stumped. I've looked over the html and it's the same as the other li > a items.

HERES THE LINK TO THE SITE: http://ilg.affinity4.ie/ It's the About link acting up.

Any ideas welcomed. Thank you

=== EDIT ===

SOLUTION: It was the fact there was no href attribute.

Also realised the dropdowns are inaccessible because they use display:none and visibility: none to hide them. For accessibility don't use either of these on anything which needs to be readable by screen readers or "tab-able". :)

Solution

  • There is no href attribute assigned to the first menu item. Try to assign an URL to it, i.e. javascript:void();