Support » Plugin: Visual Portfolio » Focus, tabbing and accessibility

  • Hello,

    I use the :focus pseudo class to let people with motor impairments (who can’t use a mouse) tab through my site and see where they are at all times.

    When I tab through the WP Gallery, it works fine, the images are outlined thanks this code:

    a:focus {
      outline: 2px solid #d9653f;
    }

    But with the Visual Portfolio it does not work. The outline does not appear on the images or on the filter links. Is there a way around this?

    Thanks!

Viewing 1 replies (of 1 total)
  • Plugin Author nK

    (@nko)

    Hi.

    I don’t think it is possible for img tags due to the styles we use (transformations, absolute positions, and overflow). But we can add box shadow on a whole element using :focus-within. Example:

    .vp-portfolio__item:focus-within::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        box-shadow: inset 0 0 0 2px red;
        z-index: 2;
    }
    

    item focus

    Regards, nK.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.