Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 2, 2025 at 2:38 pm #1486243
    Biggy

    Hi,
    the topic of accessibility is currently on our minds. We actually have it well under control, and the Enfold theme is exemplary in this regard. Currently, we’re working on focusable elements, such as buttons that indicate the action behind them when hovered over. If you only use the keyboard, this change in the button color isn’t visible. This leads to complaints. Do you have any ideas how to solve this? This also applies to links or searches…basically, every interaction!

    Regards

    July 4, 2025 at 4:42 am #1486293
    Ismael

    Hey Biggy,

    Thank you for the inquiry.

    We may need to review a test page to better understand the issue. Please create one and provide the login details in the private field. Also, make sure that Appearance > Theme File Editor is accessible.

    Best regards,
    Ismael

    July 4, 2025 at 8:39 am #1486302
    Guenni007

    take a look at the rules for the hover state and apply them to the focus-visible state.

    f.e.: on that page here – the first button on top: https://kriesi.at/themes/enfold-overview/
    Add inside dev tools the css to see what i mean.

    .avia-button.avia-color-light:focus-visible {
  opacity: 0.7;
  transition: all 0.4s ease-in-out;
}

.av-icon-on-hover:focus-visible .avia_button_icon {
  width: 1.5em;
  opacity: 1;
}

    the focus-visible state ( or focus-within too ) do not influence a clicked or hover state.
    This means that normal navigation is not affected, contrary to the focus state.

    July 4, 2025 at 11:42 am #1486313
    Biggy

    Thanks, Guenni,
    The issue is that the buttons in Enfold don’t meet the WCAG standard for keyboard accessibility. We do meet the 4:1 contrast ratio requirement, and we also tested black and white. It’s 21:1, which is extreme. But when reading the page with the keyboard, the button doesn’t change, even though the focus-visible is set to !important in the CSS.

    Regards

    July 4, 2025 at 8:53 pm #1486326
    Guenni007

    you can see how focus-visible status leads to a Tab Navigation: https://guenterweber.com/
    but all css is manually set !

    July 4, 2025 at 9:41 pm #1486327
    Biggy

    Hi Guenni,

    We always knew you really knew Enfold inside and out. And that’s really good.
    Thanks for the help. This post can be closed.
    Regards
    Biggy

    July 5, 2025 at 10:49 am #1486334
    Rikard

    Hi,

    Great, I’m glad that @guenni007 could help you out :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Focusable elements’ is closed to new replies.