[Support request] accessibility issue – outline:0

Home Forums Support [Support request] accessibility issue – outline:0

Home Forums Support accessibility issue – outline:0

  • This topic has 5 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #229786
    morriscountynj

    Have been learning more about accessibility as of late, and spotted this line in what I’m assuming is a CSS reset in GP:

    .navigation-search input:focus,a:active,a:hover{outline:0}

    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!

    #229810
    Tom
    Lead Developer
    Lead Developer

    Super easy, you should just need to do this:

    .navigation-search input:focus {
    	outline: 1;
    }

    Let me know 🙂

    #229901
    morriscountynj

    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?

    #229908
    Tom
    Lead Developer
    Lead 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.

    #229920
    morriscountynj

    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.

    #229989
    Tom
    Lead Developer
    Lead 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.

    Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.