Photoswipe: 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! :)