focus:visible

  • harrydevries

    (@harrydevries)


    2 weeks, 2 days ago

    I cannot get focus visible to work either through my css

    .All-needed-elements:focus-visible{
    style…

    }

    not even with a plugin (i checked if it was possible with the plugin equalize digital which has a focus visible option you can check) alas also no luck.

    Is there a way to make focus visible work? (free version sydney) i have a lot of visitors with disabilities.

Viewing 1 replies (of 1 total)
  • Rajab Said

    (@snrjosh)

    2 weeks, 1 day ago

    Hi @harrydevries,

    Thanks for contacting us.

    When testing :focus-visible, please make sure you are using the Tab key on your keyboard to navigate the page. Unlike the standard :focus pseudo-class, :focus-visible typically will not trigger if you are clicking the element with a mouse.

    It works for me, using the sample CSS below, as you can see in this screencast:

    /* Styling focus only for keyboard users */
    button:focus-visible {
      outline: 5px solid #fff;
      outline-offset: 4px;
    }
    a:focus-visible {
      outline: 5px solid #fff;
      outline-offset: 4px;
    }

    Please try this CSS and let me know if it works for you.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.