Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Accessibility improvements of PhotoSwipe #1077
Thank you Dmitry, for your reading my blog post and demo.
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.
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.
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.
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.
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.
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.
@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.