search

dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
24.27k stars 3.31k forks source link

Accessibility improvements of PhotoSwipe #1077

Open caztcha opened 8 years ago

caztcha commented 8 years ago

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="pswpcounter" id="counter" aria-live="polite"> <div class="pswpcaption" 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="pswpcontainer"> <div class="pswpitem" aria-hidden="true"></div> <div class="pswpitem" aria-hidden="true"></div> <div class="pswpitem" aria-hidden="true"></div> </div>

Regards,

dimsemenov commented 8 years ago

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

arielk commented 8 years ago

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

dimsemenov commented 8 years ago

@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 commented 8 years ago

@dimsemenov thanks for your response !

caztcha commented 8 years ago

@arielk @dimsemenov Thanks for your consideration! :)

heyjoecampbell commented 3 years ago

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 commented 3 years ago

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

heyjoecampbell commented 3 years ago

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

Image 2021-08-03 at 11 14 38 AM

Image 2021-08-03 at 11 16 05 AM

dimsemenov commented 3 years ago

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

heyjoecampbell commented 3 years ago

Ok - thank you

heyjoecampbell commented 3 years ago

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 commented 3 years ago

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

heyjoecampbell commented 3 years ago

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

ErPrateekSingh commented 3 years ago

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 commented 3 years ago

@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 commented 2 years ago

@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?