Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility improvements of PhotoSwipe #1077

Open
caztcha opened this issue Feb 22, 2016 · 5 comments

Comments

@caztcha
Copy link

commented Feb 22, 2016

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

This comment has been minimized.

Copy link
Owner

commented Feb 22, 2016

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

@arielk

This comment has been minimized.

Copy link

commented Sep 15, 2016

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

@dimsemenov

This comment has been minimized.

Copy link
Owner

commented Sep 15, 2016

@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

This comment has been minimized.

Copy link

commented Sep 15, 2016

@dimsemenov thanks for your response !

@caztcha

This comment has been minimized.

Copy link
Author

commented Sep 16, 2016

@arielk @dimsemenov Thanks for your consideration! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.