How to add keyboard outline?

Resolved J Werk
(@jwerk13040)

1 year, 2 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 1 year, 2 months ago by J Werk.

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Support elviiso
(@elviiso)

1 year, 2 months ago

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)

1 year, 2 months ago
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 1 year, 2 months ago by J Werk.
Plugin Author bradvin
(@bradvin)

1 year, 2 months ago

@steveush, can you help with some custom CSS here please
Plugin Author steveush
(@steveush)

1 year, 2 months ago
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)

1 year, 2 months ago

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

Plugin Author steveush
(@steveush)

1 year, 2 months ago

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.

Views