Improve support for Accessibility and ARIA

[ianthedev]

Currently the plugin doesn't have some important Accessibility and ARIA features:

• Using ARIA live region ^[1] semantics to allow users of assistive technologies to be aware of the new content if the lightbox is launched without explicit user action.
• Using ARIA attributes such as role="dialog", aria-describedby, and aria-labelledby to better identify and label the lightbox. Please refer to jQuery UI's modal implementation. ^[2]
• The opened lightbox must respond to common keyboard and browser functionality, for example:
  • Tab-able elements outside of the lightbox should be suppressed from the tab order until the lightbox is closed.
  • The Home key should take users to the first slide. And the End key should take users to the last slide.

---

1. http://www.w3.org/TR/wai-aria/states_and_properties#attrs_liveregions
2. http://jqueryui.com/resources/demos/dialog/modal-form.html

[dimsemenov]

Thank you, however I've got a few questions regarding this:

Using ARIA live region [1] semantics to allow users of assistive technologies to be aware of the new content if the lightbox is launched without explicit user action.

Please explain what exactly attributes must be added to which elements and at which state.

Using ARIA attributes such as role="dialog", aria-describedby, and aria-labelledby to better identify and label the lightbox. Please refer to jQuery UI's modal implementation. [2]

This should be defined by a developer, as Magnific doesn't control the markup of a popup itself. http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type

Tab-able elements outside of the lightbox should be suppressed from the tab order until the lightbox is closed.

This is already implemented.

The Home key should take users to the first slide. And the End key should take users to the last slide.

Will be done.

[ianthedev]

Please explain what exactly attributes must be added to which elements and at which state.

For example, if the lightbox is launched automatically on page load, aria-live="polite" need to be added to the container element so screen reader users can be notified of the popup content. Otherwise screen reader users will get confused.

This should be defined by a developer, as Magnific doesn't control the markup of a popup itself.

Not all developers know how to use ARIA, so the plugin should do it. jQuery UI does it for developers.

This is already implemented.

Nice. Could you ensure it has been implemented on the homepage of the plugin?

---

Also, as mentioned in a previous thread, please ensure the example has been implemented. Thanks.

[ianthedev]

Well, maybe the first one is not needed because there won't seem to be any use case for this plugin. I had deleted it.

[peterkuma]

I noticed a few more problems regarding accessibility:

• The Close button contains a &times character. When focused, it is read by a screen reader as "Multiplication : button". This is quite important to fix, as being able to close the popup is the main thing a user should be able to do. Hiding the multiplication character by aria-hidden and providing an alternative label by aria-label would do:

  <button title="%title%" type="button" class="mfp-close" aria-label="%title%">
    <span aria-hidden="true">&times;</span>
  </button>

• It is still possible to navigate out of the dialog with Tab in Firefox (in Chromium it works fine). It seems that the focusin event is not delivered to document. document.addEventListener('focus', mfp._onFocusIn, true); works, but is probably not portable enough alone (requires IE>=9). Edit: Apparently, this is only the case with zepto.js, which does not implement focusin for browsers which do not support it.
• I think the wrap element should indeed have a role="dialog". See WAI-ARIA 1.0 Authoring Practices or The Incredible Accessible Modal Window, Version 2.
• The Broken image/Broken ajax request popups do not have a Close button. As a result, they cannot be closed with keyboard only, and screen reader users have no way of knowing how to close the dialog.
• Elements on the main page remain visible to the screen reader when a popup is opened. They need to have the aria-hidden="true" attribute in order to be hidden from virtual navigation.

I can post some pull requests. Edit: #423, #424, #425

[davidpustai]

:+1:

[DylannCordel]

:+1:

[HazardCreative]

I think the wrap element should indeed have a role="dialog". See WAI-ARIA 1.0 Authoring Practices or The Incredible Accessible Modal Window, Version 2.

I added the below to my initialization to resolve the above:

callbacks: {
    open: function() {
        magnificPopup.wrap.attr('role', 'dialog');
    }
}

However, this is not sufficient on its own as you must also supply a label with this type. magnificPopup.wrap.attr('aria-label', '[label]') is sometimes sufficient but often you will need to program something dynamic.