ampproject / ampproject/amphtml

[A11Y] amp-lightbox should be a modal dialog

Open
#4,892 10 comments 0 reactions 0 assignees View on GitHub
Component: amp-lightbox Customer: Developer P2: Soon Related to: Accessibility Stale Type: Accessibility Type: Feature Request Type: UX WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## Issues

There doesn’t appear to be any other type of dialog in AMP. Developers are going to be using lightbox as a modal dialog; this will lead to accessibility issues whenever one is created. Without JavaScript, developers have no way to address these issues.
- amp-lightbox has no semantics.
- Screen reader users are given no indication of whether a lightbox is open or closed
- Screen reader users are given no indication of whether or not they are inside a lightbox (i.e. child window of the parent window)
- The lightbox can take over the entire screen, but users can interact with content behind it
## Examples of amp-lightbox
- https://cdn.ampproject.org/c/m.ebay.com/sch/amp/Drones-with-Camera/179697/bn_89954/i.html
- See Information icon buttons next to "Save on Drones with Camera" and "Top Selling"
- https://ampbyexample.com/components/amp-lightbox/
## Suggestions

Implement pattern for a modal dialog
- amp-lightbox should have role=“dialog”
- developers should be able to specify an id for an interactive element that will receive focus when an amp-lighthouse is opened
- user should not be able to move focus/virtual cursor outside of the lightbox
- when closed, focus/virtual cursor should be moved back to the item that opened it
- …and other features of a dialog (see links below)
- [ARIA Design Pattern for Dialog (Modal)](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal)
- [eBay MIND Pattern for Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/dialog.html)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.