Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 29, 2023 at 2:00 am #1417365
    PCLSIT

    I’m trying to provide keyboard focus indicators for links, buttons, etc. using :focus-visible. Visual focus indicators are a requirement for WCAG 2.1 AA compliance, so that keyboard-only users who are using the tab key to move between focusable elements on the page can always see which element currently has focus. For most elements across the site I’m using the CSS outline property as the visual indicator.

    I’m having trouble setting a visual focus indicator for columns that have a column link set. By default, for mouse users, the mouse cursor changes on hover, and the whole area of the column is clickable; however when I tab through the site, there’s no focus indicator when it gets to that link in the tab order. Using Chrome’s DevTools I can see that focus is on the av-screen-reader-only link, which is offscreen. That element may be receiving the :focus-visible outline, but of course you can’t see it.

    I want the column to receive the focus indicator, so that the visual indicator corresponds to the area that mouse users can click. I can target the column with body .flex_column.avia-link-column, (same selector that is used to change the mouse cursor on hover); but the column itself isn’t a focusable element, despite being clickable, so it gets skipped over in the tab order. I can give the column tabindex="0", and then I can tab to it, and the focus indicator appears beautifully when I do – but if I hit enter to visit the link, nothing happens, because focus isn’t on the link itself at that point. If I hit tab again, focus moves to the link, but then I’ve lost my visual focus indicator.

    I’m not sure where to go from here. What is the recommended way to apply a visual focus indicator for column links? I appreciate any insight you can provide!

    August 31, 2023 at 12:07 pm #1417683
    Mike

    Hey PCLSIT,
    Thank you for the link to your site and your patience, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .avia-link-column.av-column-link .av-screen-reader-only:focus {
    position: absolute;
    display: inline-block;
    left: unset;
    width: 100%;
    height: 100%;
    color: transparent;
}

    this allows the column link to show in the correct place and your :focus css shows the border:
    Enfold_Support_3090.jpeg
    in my test using the enter key follows the link.
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

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