Best practices
The Media modal should feel focused and intentional. It exists to give users a better view, not to introduce complexity.
Use it when detail matters. If users need to inspect, or fully understand media, the modal provides the right level of focus. If not, keep content inline.
When to use
Use a Media modal when:
- Media needs to be viewed in greater detail than inline allows.
- The user benefits from a focused, distraction-free view.
- Displaying image galleries or sequences.
- Presenting video content without navigating away from the page.
The Media modal is always user-initiated and should support intentional exploration of content.
When not to use
Do not use a Media modal when:
- Media can be understood at its inline size.
- The modal interrupts a task or flow without clear intent.
- The content is primarily text or form-based.
Anatomy
- Backdrop
- Title (optional)
- Media
- Coloplast user name and details (optional)
- Image caption (optional)
- Gallery controls
- Gallery progress
- Close button
Variants
Media should be presented consistently within a modal instance. Avoid mixing unrelated media types in the same experience unless it serves a clear purpose.
Single image
Image gallery (multiple images with navigation)
Embedded video (via external provider)
Orientation
Landscape 16:9
Portrait 9:16
Landscape 4:3
Portrait 3:4
Square 1:1
Behaviour
The Media modal follows the base modal interaction model with added behaviour for media:
- Opens from a user-triggered action (e.g. click/tap on media).
- Focus is trapped within the modal while open.
- Closes via close button, escape key, or overlay click (where applicable).
- Focus returns to the triggering element on close.
Media-specific interactions
- Gallery navigation
- Users can move between items using controls and keyboard arrows.
- Responsive scaling
- Media adjusts to fit the viewport without distortion.
- Zoom interaction (images)
- Users can zoom in to inspect details.
- Zoom must not break layout or navigation.
- Video playback
- Controlled via embedded player.
Content guidelines
Media should be the primary focus. Supporting elements must not compete for attention.
- Use high-quality media appropriate for larger display.
- Maintain consistent aspect ratios within galleries where possible.
- Provide captions only when they add meaningful context.
- Use for enlarging and focusing media
- Support both portrait and landscape formats
- Provide clear navigation in galleries
- Ensure zoom functionality is smooth and intuitive
- Keep the interface minimal and media-focused
- Interrupt users with unsolicited media modals
- Overload with controls or additional UI
- Mix unrelated media types without purpose
- Rely on the modal for primary content delivery
- Break layout or usability when zooming
Accessibility
The Media modal must meet all base modal accessibility requirements, with additional considerations for media.
General
- Fully keyboard navigable.
- Focus is trapped within the modal.
- Focus returns to the trigger on close.
- Clear and visible focus states.
- Meets WCAG 2.2 AA contrast requirements.
Media-specific
- Images
- Must include meaningful alt text.
- Zoom functionality
- Must support browser zoom up to 200% without loss of content or functionality.
- Content must not be clipped or inaccessible when zoomed.
- Layout must adapt without overlapping controls or hidden elements.
- Galleries
- Keyboard navigation supported (e.g. arrow keys).
- Current position communicated where relevant.
- Videos
- Use accessible embedded players.
- Playback controls provided by the provider must be usable via keyboard and screen reader.
Avoid motion or transitions that conflict with reduced motion preferences.