Pop-overs - content example
A pop-over (sometimes called a "lightbox") is where some content appears over the page. Generally it (should) prevent access to the page until the pop-over is dismissed, or you follow a link, or submit a form. I think there are three types, names vary but for purpose of this example:
- A "Dialogue": Where a form or other interactive controls is presented over the content area.
- A "lightbox": an image or video is presented over the content area.
- A "Content pop-over": Where miscelaneous content is presented over the content area.
This example deals with the last of these, the content pop-over.
The usual accessibility issue for pop-overs are for keyboard accessibility, as the user ends up tabbing through the background in order to get to the pop-over.
Content pop-over example
Accessibility requirements
A content pop-over element should work with mouse, keyboard and touch-devices at various screen sizes. The basic requirements are that:
- Mouse control, you should be able to:
- Click the link to open the pop-over.
- Click a 'close' button to dismiss it.
- Click outside of the pop-over to dismiss it.
- Keyboard control should:
- Allow tabbing to the link and pressing enter to open it
- Move the keyboard focus to the top of the pop-over when it is opened. For screen reader users they will simply read from the top. For (visual) keyboard users pressing tab once should take you to the first focusable element in the pop-over.
- Prevent tabbing outside of the pop-over, wrapping around. I.e. tab from the last focusable element moves to the first, and shift-tabbing from the first moves to the last.
- Screen reader users should also not be able to 'browse' out of the pop-over. E.g. in Jaws, pressing down arrow at the end does not move out of the pop-over.
- Closing the pop-over should put the link back where it was, on the triggering element.
- You should be able to press esc to close the pop-over.
- Visual aspects:
- The pop-over should not extend out of the viewport.
- The pop-over should not disappear if you scroll down.
- The background should appear blanked-out or inactive.
It's a trick, get an axe!
Warning: You might find references to HTML5 or WAI-ARIA "dialog", do not use these for content-based pop-overs. They prevent screen reader users from reading the content, they are restricted to form-controls.