- This topic has 5 replies, 2 voices, and was last updated 4 years, 5 months ago by Tom.
September 27, 2016 at 6:57 am #229786morriscountynj
Have been learning more about accessibility as of late, and spotted this line in what I’m assuming is a CSS reset in GP:
I believe that removes the focus outline when a user is trying to navigate the site via keyboard. This is bad for accessibility because the keyboard user doesn’t know where they are on the site.
Would there be any way to change that line, or remove it, on the main GP theme, for accessibility reasons? Otherwise I’ll need to go into each of my child themes and change it manually (which is fine, but I feel this would be beneficial for everyone!).
Thanks!September 27, 2016 at 8:47 am #229810TomLead DeveloperLead DeveloperSeptember 27, 2016 at 12:12 pm #229901morriscountynj
Oh definitely simple! My question was that, since it’s an accessibility issue for anyone using GP, maybe it should change on the parent theme?September 27, 2016 at 12:44 pm #229908TomLead DeveloperLead Developer
It’s definitely an interesting discussion.
It changes the look of the input quite drastically, I see a lot of people not liking that.
So we have to look at who it helps and who it becomes accessible for.
Obviously, something like the outline would only be helpful to people who can see, correct?
In that case, the fact that the background color changes and the cursor becomes active would give them the impression that you’re able to type in the input.
I could totally be missing something, so I’m completely open to be proved wrong in this respect. Obviously I want GP to be accessible to everyone, which is something I’ve been really focusing on recently.September 27, 2016 at 1:06 pm #229920morriscountynj
This is a good article about keyboard navigation on WebAIM: Keyboard Navigation
Relevant part here:
keyboard user typically uses the Tab key to navigate through interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item has keyboard “focus”, it can be activated or manipulated with the keyboard. A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. A basic focus indicator is provided automatically by the web browser and is typically shown as a border (called an outline) around the focused element. However, these outlines can be hidden by applying outline:0 or outline:none CSS to focusable elements.
Avoid outline:0 or similar styles on links and other elements that can receive keyboard focus.
In addition to the default outline, you can use CSS to make the focus indicator more visually apparent and keyboard-friendly by adding a background color or other visual style to links, and other controls that will receive keyboard focus. The outline can be styled to match your site design.September 27, 2016 at 10:38 pm #229989TomLead DeveloperLead Developer
I agree with all of that – I worked hard to make sure the navigation is accessible via the tab key. Each menu item changes color to your hover color on focus.
The navigation search field also changes color on focus so there’s not need for outline:1, however I haven’t been able to make it open using the tab key yet.
It is on my to-do list.
- You must be logged in to reply to this topic.