If you click on the menu icon, and then click on another link (like Dream Weddings), you’ll see an outline around the link. I’m trying to get rid of it. I’ve tried:
.nav.oscitas-bootstrap-container > li.in.active:focus {
outline:0!important
}
and it doesn’t seem to be working. Any suggestions?
I added outline:0; to this rule and it appears to be working.
.left-nav > ul#oscitas-tabs-0.nav.nav-tabs.oscitas-bootstrap-container > li.active a {}
The anchor has the outline, not the <li> 
.
If you do that then how are those people who don’t have a mouse able to tell which element in their page is active?
Are you planning to hide the mouse cursor as well as the keyboard one?
Not my idea, as much in agreement I am with you. I’m just told to do it.
Thank you, Ryan, but it didn’t work. I thought I needed to adjust the :focus on that to get rid of the outline.
Did you advise the person who told you to do it that it can breach antidiscrimination laws by discriminating against anyone with a disability that means they can’t use a mouse and that to not discriminate that you’ll have to hide the mouse cursor as well.
I did mention that it was necessary for users who cannot use mice or other devices. Obviously, that didn’t get anywhere.
Presumably they will be able to afford all the court costs if someone takes them to court for breaching anti-discrimination laws.
To protect yourself you should get it in writing from them that the navigation for disabled people was deliberately blocked at their request and that you are not responsible for making their site inaccessible for the disabled. That way you protect yourself against them blaming you in court (just in case a disabled person does take such action).
It’s being overridden by styles elsewhere, in your normalize file (line 96) and bootstrap (line 231). E.g.
a:focus {
outline: thin dotted;
}
You could use something like .nav a:focus {outline: none;} to get the result you want.
As said above, though, it’s really handy to have an indication of focus, so it’s worth thinking about special styling for the :focus state. You could try an underline, or a different color etc.
Agreed.
If not an outline, something
Without a noticeable change, users may not know when the link has been “clicked”.
In the case of the site in question, the links do turn white when clicked, which is a good start—although having the extra focus info is still important for those tabbing through etc.
but how does someone know which one will be clicked when they hit the enter key if there is no indication of which one has the focus. You need the one with the focus to change colour before that so they can tell which one the enter key will interact with.
Didn’t you read the rest of my sentence? 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.