Accessibility improvements of PhotoSwipe

[caztcha]

Thank you Dmitry, for your reading my blog post and demo. http://website-usability.info/2016/02/entry_160221.html http://website-usability.info/examples/photoswipe/index.html

As my original post is written in Japanese, I summarized what I did in English. Hope somewhat helpful for your future update :)

---

Keyboard operation (focus control):

There occurs lost of focus when pressing PC [Tab] key several times on PhotoSwipe gallery screen. (The focus moves on to the background page though PhotoSwipe is open.) To retain the focus within the PhotoSwipe screen, I did the followings.

Added an id name to the background webpage element (such as <div id="base">), then added the following line to the dist/photoswipe.js.

document.getElementById('base').setAttribute('aria-hidden','true');

Also, added the following CSS line, to retain the focus not only for the blinds (screen reader users) but also for the sighted keyboard users.

base[aria-hidden="true"] {display: none;}

The lost of focus also occurs when PhotoSwipe is closed. I think that it is convenient if the focus is kept at the trigger link (<a> element) just before opening PhotoSwipe gallery screen. I added an id name to the background webpage element (such as <a id="focus_when_gallery_closed"> for the first thumbnail image), then added the following line to the dist/photoswipe.js.

document.getElementById('focus_when_gallery_closed').focus();

---

Screen reader support:

I think that it is convenient if each image caption (and counter number) is read out with screen reader automatically when opening PhotoSwipe gallery and also when changing the gallery image to next/previous one.

To achive this, I added the aria-describedby and aria-live as follows.

<div class="pswp" aria-describedby="counter figcaption"> <div class="pswp__counter" id="counter" aria-live="polite"> <div class="pswp__caption" id="figcaption" aria-live="polite">

---

Other Memos:

I understand why you set the "no arrows on touch screens" in dist/default-skin/dafault-skin.css. (to make the UI simpler when using on smartphone and tablet, right?) However, there occurs a problem when using PhotoSwipe on iOS with VoiceOver. Users can't change the gallery image by 3 fingers swipe, so for those who rely on VoiceOver, it is necessary that arrows are displayed. // On the other hand on android (I tried with my Nexus 7/2013, Chrome and TalkBack), luckily users can change the gallery image by 2 fingers swipe.

I encountered the phenomenon that, with Mac OS X/iOS + VoiceOver, an image file name (such as "blah-blah-blah.jpg") is read out loud when using PhotoSwipe. To prevent this, I added aria-hidden="true" as follows. I'm not sure if this is correct, but works fine adhocly.

<div class="pswp__container"> <div class="pswp__item" aria-hidden="true"></div> <div class="pswp__item" aria-hidden="true"></div> <div class="pswp__item" aria-hidden="true"></div> </div>

---

Regards,

[dimsemenov]

Thank you very much, will try to include some of these in a core.

[arielk]

Hi @dimsemenov thanks for the amazing project. There is a something new with this issue?

[dimsemenov]

@arielk, I'm currently working on v5 version which includes a module that transforms DOM elements into a gallery, which will allow implementing some of the features described in this article. I'll probably post it on GitHub in a separate brunch in a few weeks.

[arielk]

@dimsemenov thanks for your response !

[caztcha]

@arielk @dimsemenov Thanks for your consideration! :)

[heyjoecampbell]

Hi @dimsemenov did you have a chance to implement trapping the focus?

I am using PhotoSwipe by way of the awesome #WordPress plugin "Lightbox with PhotoSwipe": https://wordpress.org/plugins/lightbox-photoswipe/

[dimsemenov]

@heyallan yea, it's available in 5.0 (https://github.com/dimsemenov/PhotoSwipe/issues/1749)

[heyjoecampbell]

Thank you for the speedy response - I do not experience the trapping on your website or on the WordPress plugin demo sites:

[dimsemenov]

@@heyallan you're looking at the older version, 5.0 beta demo is here https://photoswipe.com/v5/docs/getting-started/

[heyjoecampbell]

Ok - thank you

[heyjoecampbell]

Hi again @dimsemenov would you be able to assist in making WordPress version of Lightbox with PhotoSwipe accessible? https://wordpress.org/support/topic/featurerequest-trap-the-focus/#post-14731511

[dimsemenov]

@heyjoecampbell there will be an official WP plugin in the future, but for now, I focus on finishing the non-WP version.

[heyjoecampbell]

Ok - once again, thank you for the prompt response 😀

[ErPrateekSingh]

Hi @dimsemenov, I wanted to know can I modify the layout as we can in the previous version by adding and modifing the PhotoSwipe (.pswp) element to DOM.

[dimsemenov]

@ErPrateekSingh v5 does not require any additional HTML, styling is done in a different way, you can read more about it here https://photoswipe.com/v5/docs/styling/ If you're having trouble implementing/adjusting some UI element - feel free to open a new issue.

[in0ni]

@dimsemenov, has version 5 included all suggestions from this original post? Also, I am aware the caption feature was removed due to accessibility issues. I tried looking for what exactly is the root of the problem -- would you mind elaborating a little?