Interactive content and controls

User interface components and navigation must be operable by all users, regardless of their physical abilities or the input methods they use. This means ensuring that users can interact with and navigate your content using various methods including keyboards, screen readers, voice commands, or other assistive technologies.

For media content, operability encompasses several key areas: providing alternatives to motion-based content for users with vestibular disorders, ensuring all interactive elements are keyboard accessible, and designing interfaces that work seamlessly with assistive technologies. Users with motor impairments, visual disabilities, or other conditions need content that responds predictably to their preferred interaction methods.

This section covers Cloudinary's tools and widgets that support operable interfaces, including techniques for managing animated content, implementing keyboard-accessible galleries, and creating video players that work with assistive technologies.

Operability considerations

Consider how users will interact with and control your media content. Some users rely on keyboards instead of mice, others may be sensitive to motion and flashing content, and many need the ability to pause or adjust audio that plays automatically. Design your media experiences to accommodate different interaction methods and user preferences.

Cloudinary's UI widgets have been built with operability considerations in mind, including keyboard navigation, focus management, and user control features. For detailed information about the accessibility features available in these components, see the Cloudinary Product Gallery widget and Cloudinary Video Player sections.

Convert animations to still images

Many users have vestibular disorders, seizure conditions, or other sensitivities that make animated content problematic or even dangerous. WCAG Success Criterion 2.3.3 requires that motion animation triggered by interaction can be disabled unless the animation is essential to the functionality. Additionally, some users simply prefer reduced motion for better focus and less distraction.

Cloudinary provides several approaches to make animated content accessible by converting animations to still images or providing user control over motion.

Understanding motion sensitivity

Users may need reduced motion for various reasons:

• Vestibular disorders: Inner ear conditions that cause dizziness and nausea from motion
• Seizure disorders: Flashing or rapid motion can trigger seizures
• Attention disorders: Animation can be distracting and make it difficult to focus
• Migraine triggers: Motion can trigger or worsen migraines
• Battery conservation: Reducing animation saves device battery life
• Bandwidth limitations: Still images use less data than animated content

Extracting still frames from animations

You can extract a single frame from an animated GIF or video to create a still image alternative. This is useful for providing a static version of animated content.

Original animation Still frame (page 3)

Use the page parameter (pg_) to extract a specific frame from an animated GIF:

You can also extract the first frame by converting the format to a static image format like JPG or PNG:

Implementing user-controlled motion preferences

The most accessible approach is to respect user preferences for reduced motion. Modern browsers support the prefers-reduced-motion CSS media query, which you can combine with Cloudinary transformations to serve appropriate content.

Here's an interactive demo showing how to implement motion preferences:

🎬 Enable Motion 🚫 Reduce Motion

Current setting: Motion enabled

Current image URL:
https://res.cloudinary.com/demo/image/upload/c_scale,w_400/kitten_fighting.gif

Implementation examples

Here are some examples of respecting the prefers-reduced-motion setting:

React:

HTML:

CSS:

Video posters

For video content, you can extract a poster frame to show when motion is reduced:

The poster frame uses the start offset (so_) parameter to extract a frame from 10.2 seconds into the video.

You can also use so_auto to let Cloudinary automatically choose the best frame to use as the poster.

Cloudinary Product Gallery widget

The Cloudinary Product Gallery widget provides comprehensive accessibility features that ensure users with disabilities can effectively navigate and interact with product galleries. The widget includes keyboard navigation, screen reader support, and customizable display options that meet WCAG operability requirements.

Keyboard accessibility

The Product Gallery enables full keyboard accessibility for users who cannot use a mouse or rely on assistive technologies. All interactive elements are accessible using standard keyboard navigation:

Accessible configuration options

For the most accessible experience, Cloudinary recommends these configuration settings:

Screen reader support

The Product Gallery provides semantic markup for screen readers and uses alt text from your configured metadata sources. You can specify where the gallery should look for alt text using the accessibilityProps parameter:

Using structured metadata for alt text:

Using contextual metadata for alt text:

If no alt text source is configured or the specified metadata field is empty, the gallery defaults to descriptive text in the format "Gallery asset n of m".

Focus management and visual indicators

The Product Gallery provides clear visual focus indicators that help users understand their current position within the gallery:

• High contrast focus rings: Clearly visible borders around focused elements
• Logical tab order: Sequential navigation through thumbnails, main viewer, and controls
• Focus trapping: When zoom is activated, focus remains within the zoom interface
• Expanded mode benefits: In expanded mode, focus areas are more visually prominent

Video accessibility features

When displaying videos in the Product Gallery, accessibility features include:

• Keyboard controls: Spacebar to play/pause, Enter to activate full controls
• Screen reader announcements: Video state changes are announced to assistive technology
• Simplified controls: The controls: "play" option reduces interface complexity
• Caption support: When using the Cloudinary Video Player, captions and subtitles are fully supported

Responsive accessibility

The Product Gallery maintains accessibility across different viewport sizes:

• Mobile optimization: Touch-friendly controls and appropriate sizing
• Viewport breakpoints: Maintains usability as layout adapts to screen size
• Consistent navigation: Keyboard accessibility preserved across all breakpoints

Cloudinary Video Player

The Cloudinary Video Player is designed to provide an inclusive video experience that meets WCAG 2.1 AA compliance standards. The player includes comprehensive accessibility features that ensure users with visual, auditory, motor, and cognitive impairments can fully engage with video content through assistive technologies, keyboard navigation, and other accessibility-friendly enhancements.

Accessibility features overview

The Cloudinary Video Player provides extensive accessibility support including:

• Full keyboard navigation: All controls accessible via Tab key with clear focus indicators
• Screen reader compatibility: ARIA attributes and semantic markup for assistive technologies
• Closed captions and subtitles: Multi-language support with customizable styling (refer to Video captions)
• Audio descriptions: Support for descriptive audio tracks and caption-based descriptions (refer to Audio descriptions)
• Video chapters: Easy navigation to key sections for improved usability
• Adjustable playback: Variable speed controls for better comprehension
• High-contrast UI: Customizable themes for improved visibility (refer to Customizable caption styling)

Live accessibility demo

Here's a working Cloudinary Video Player demonstrating accessibility features. Try navigating the controls using only your keyboard (Tab, Space, Arrow keys) and notice the clear focus indicators:

Keyboard navigation controls

Implementation example

Here's how to configure the Cloudinary Video Player with optimal accessibility settings: