Focus, tabbing and accessibility

  • maryb1

    (@maryb1)


    6 years, 9 months ago

    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)

    6 years, 9 months ago

    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)

The topic ‘Focus, tabbing and accessibility’ is closed to new replies.

Tags