CSS Focus State for non mouse navigation

Hope it's OK to ask this here. It's more of a CSS question than a WordPress one but I've had good help here before so thought I'd ask!

If you look at eg. https://www.bbc.co.uk/ and you use the tab key for non-mouse navigation you get a default border to the links as you go through the site.

However, on my WordPress sites eg. http://www.christchurchsouthcambs.org/new/ this doesn't happen.

I've tried adding a:focus styles but this then shows when those links are clicked which isn't ideal. What CSS am I missing or is there something else?