Mouse/keyboard accessibility. Fine in Chrome. Bad in Safari.

  • Resolved abitofmind

    (@abitofmind)


    1 year, 8 months ago

    Chrome 115.0.5790.114 on macOS 11.7.8

    ?? Lightbox with PhotoSwipe mouse/kbd interactions in CHROME
    • After closing the lightbox via mouse the inline image you had clicked before looks normal.
    • If you use keyboard input while in the LightBox, TAB cycles through the LightBox controls correctly.
    • ENTER closes and keeps the image you came from selected (dark-blue outline congruent to image).
    • From then on TAB correctly cycles through the image series.
    • ENTER to open Lightbox.
    • ESC to close Lightbox and loose focus.
    • Everything alright!

    Safari 16.5.2 macOS 11.7.8

    ?? Lightbox with PhotoSwipe mouse/kbd interactions in SAFARI
    • After closing the lightbox via mouse the inline image you had clicked before has a light blue border (focus outline). This seems to an accessibility (A11Y) feature of Safari well intended but badly done. Why show me a focus when I have operated via mouse so far entirely?
    • Also TAB index in the image series does not work at all. Instead it jumps into Safari’s toolbar away from content.

    Is there a possibility to de-activate these Lighbox a11y options altogether? Or per browser?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    Sorry, but the way how the browser behaves is not controlled by Lightbox with Photoswipe.

    When clicking a linked image, the browser will in fact set the focus to that image, regardless if you used the keyboard to navigate there or not. That’s the reason why you can use the tab key to navigate from there to another image afterwards, even if no focus border is visible.

    Apple decided to display that in Safari, Chrome does differentiate if the focus was set by keyboard navigation or by a mouse click – but in fact it’s technically just setting the focus to the element. There is no difference how the element got the focus, it will just have it.

    Even if it would be possible to remove the focus when opening or closing the lightbox (which is not the case – window.focus() or document.activeElement.blur() does not work here, I already tried that), this would be very bad for accessibility: just imagine someone used the keyboard to navigate to an image and then the enter or return key to open it. After closing the image the focus would be lost and the whole navigation is broken then.

    You may try to “fix” this by using custom CSS rules for elements with focus like this (however I don’t know if this works for you):

    a>img:focus { outline:none; }

    Also see https://developer.mozilla.org/en-US/docs/Web/CSS/:focus about this.

    Thread Starter abitofmind

    (@abitofmind)

    Thanks for your detailed answer!

    Will try your possible “fix” when I get to it.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mouse/keyboard accessibility. Fine in Chrome. Bad in Safari.’ is closed to new replies.