How to add keyboard outline?

  • Resolved J Werk

    (@jwerk13040)


    2 years, 10 months ago

    Hello,

    For web accessibility compliance, how can I add a keyboard outline to thumbnails in a justified gallery?

    The CSS I’ve written so far only displays the left and top outline. The right and bottom parts of the outline are hidden somehow.

    .fg-thumb:focus  {
  outline-width: 3px !important;
  outline-style: solid !important;
  outline-color: red !important;
  margin: 3px !important;
}

    Thanks

    • This topic was modified 2 years, 10 months ago by J Werk.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support elviiso

    (@elviiso)

    Hi @jwerk13040

    Could you kindly confirm to me what you mean by a “keyboard outline”? Are you referring to padding/spaces between the individual thumbnails in the gallery? Kindly elaborate further on this so that I can have a full understanding of what you want to implement. If possible, you can also send me a page that has a gallery or images with the “keyboard outline”.

    Thanks in advance for doing so.

    Kind regards,
    Elvis.

    Thread Starter J Werk

    (@jwerk13040)

    Hi Elvis,

    I mean the :focus state of an <a> tag. That is the outline around links when you navigate the page with the keyboard.
    Sighted people who can’t use a mouse need this to see where the current focus is.

    It works fine with a Responsive gallery but not with a Justified gallery.
    If you open this test page and press the Tab key, you will see what I mean.
    This screenshot shows what happens when I manually set the :focus state.

    Thanks
    Jean

    • This reply was modified 2 years, 10 months ago by J Werk.
    Plugin Author bradvin

    (@bradvin)

    @steveush, can you help with some custom CSS here please

    Plugin Author steveush

    (@steveush)

    Hi @jwerk13040,

    The issue is the way in which justified displays it’s items. The layout is performed by JS and trying to add a margin and outline to the <a/> child element will not work as the parent that controls the size also has overflow hidden set on it. I would simply take another route and instead of your current CSS I would use the following:

    .foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-caption,
.foogallery.fg-hover-fade .fg-loaded .fg-item-inner:focus-within .fg-image-overlay {
	visibility: visible;
    opacity: 1;
}

    This makes use of the :focus-within pseudo-class to trigger the hover effect of an item when tabbing through a gallery. This is well supported, except for Internet Explorer, which is no longer supported by WordPress so should not be much of an issue.

    Thanks
    Steve

    Thread Starter J Werk

    (@jwerk13040)

    Thanks for that code and for the explanation!
    That’s an elegant solution.

    Plugin Author steveush

    (@steveush)

    Hi @jwerk13040,

    I’m just updating this issue for future reference. I’ve updated all hover effects and presets to include this functionality by default. With the next released version of the plugin you will be able to remove the previously supplied custom CSS which only works for the hover effect “Fade”.

    Thanks
    Steve

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to add keyboard outline?’ is closed to new replies.