In our previous guide on testing videos for accessibility, we audited our content library and looked for gaps like missing captions, inaccessible players, unlabeled elements, and others. But quick fixes aren’t enough if you’re building or embedding video players at scale.
This guide is for teams that want to build an EAA-compliant video infrastructure from the ground up. Whether you’re working inside a headless CMS, managing a component library, or supporting multilingual content across platforms, Cloudinary gives you the tools to deliver accessible video at scale.
We’ll walk through how to:
- Meet EAA video playback requirements, like keyboard navigation and screen reader compatibility.
- Customize subtitles, contrast, and layout to meet WCAG 2.1 AA standards.
- Support alternate audio and multiple languages.
- Embed fully accessible players into modern stacks using Cloudinary’s APIs and SDKs.
To meet European Accessibility Act (EAA) accessibility standards, your video player and content must address the following:
- Keyboard navigation. All controls (play/pause, volume, captions) must be operable without the use of a mouse.
- Screen reader compatibility. Accessible Rich Internet Applications (ARIA) roles and labels, logical focus order, and accessible metadata.
- Subtitles and audio descriptions. Required for all prerecorded content.
- Color contrast. Subtitles and controls must maintain a contrast ratio of at least 4.5:1.
- Multilingual support. Alternate audio and subtitles for tracks to enhance language accessibility.
Cloudinary Video is an API-first platform that automates video management, optimization, and delivery of high-performing video experiences. Cloudinary makes it easy to implement these video features through its Video Player Studio and Video Player components. Its Video Player is fully customizable, EAA-compliant, and built to adapt to modern frameworks like React, Vue, and headless CMS architectures.
Key features include:
- Accessibility-first design. Full keyboard navigation, screen reader support, and ARIA-labeled controls
- Custom theming. Modify fonts, colors, icons, and layouts to match your brand and meet contrast guidelines
- Multi-language support. Add captions, subtitles, and alternate audio tracks with ease
- Automations. Auto-generate transcripts and subtitle files using AI integrations like Google AI Video Transcription and Microsoft Azure Video Indexer
- CMS and frontend integrations. Embed accessible players into platforms like Contentful, Sanity, or Next.js apps using Cloudinary’s SDKs or APIs
To use these features, create a free Cloudinary account and upload your video assets. Once uploaded, you can enhance videos with subtitles, alternate audio tracks, and fully styled players, either via Cloudinary’s UI or API. Let’s examine how Cloudinary features address each of the EAA requirements.
To comply with EAA, your video player must be entirely operable without the use of a mouse. This ensures accessibility for users who navigate using keyboards, switch devices, or other assistive technologies.
- Keyboard operability. All interactive elements must function solely via the keyboard. This includes support for standard navigation keys: Tab, Shift + Tab, Enter, Space, and arrow keys.
- Focus visibility. Every control must show a clear, visible focus outline when selected with the keyboard. This focus indicator must have a minimum contrast ratio of 3:1 against the surrounding colors.
- Accessibility for dynamic content.Users must be able to pause, stop, or hide moving content at any time using only the keyboard.
- Labeling controls. Buttons and controls require descriptive labels and accessible roles (e.g., “Play video”, “Toggle captions”) that are exposed to screen readers via ARIA attributes.
Cloudinary’s Video Player is a customizable HTML5-based player designed for smooth video playback with advanced features, allowing you to deliver optimized videos across devices.
Starting from version 2.3.3, Cloudinary Video Player offers built-in accessibility features, such as:
- Full keyboard navigation. Standard keyboard shortcuts, such as the Space or Enter key to toggle playback, the Arrow keys for seeking and volume adjustment, and the F key to enter or exit full-screen mode. Tab navigation is also fully supported, with each control reachable in logical order. These controls are designed to be intuitive for keyboard-only users while maintaining the same functionality available to mouse users.
- Screen reader compatibility. The player uses ARIA attributes to define roles and states for all controls, creating seamless interaction with screen readers. Cloudinary’s implementation includes proper ARIA attributes for all controls, such as
role="slider"for the volume and progress bars, along with appropriate aria-valuenow, aria-valuemin, andaria-valuemaxvalues. These attributes can be inspected using browser developer tools, where the accessibility panel reveals whether each control is labeled correctly and accessible to keyboard users. - Visible focus indicators. Each active control displays a clear focus outline when navigated with the keyboard, supporting users with visual tracking needs.
Simply put, the Cloudinary Video Player is designed to be fully operable without a mouse, maintaining compliance with EAA.
Captions and subtitles are essential for making video content accessible to users who are deaf or hard of hearing, non-native speakers, and even those who just prefer to watch on mute. To align with the EAA guidelines, video players should support accurate, synchronized text alternatives for spoken content and provide multilingual options when applicable.
Cloudinary supports automated transcription through integrations with Google AI Video Transcription and Microsoft Azure Video Indexer, enabling the generation of accurate speech-to-text transcripts from uploaded video files. This helps create subtitle files in real time, making content not only accessible but also more searchable and SEO-friendly.
In terms of multilingual support, Cloudinary allows you to specify the language and, optionally, the regional dialect in which you need your transcript files to be. For instance, to generate a transcript in Canadian French during upload:
cloudinary.v2.uploader
.upload("abt_cloudinary_french.mp4",
{ resource_type: "video",
raw_convert: "google_speech:fr-CA" })
.then(result=>console.log(result));Code language: JavaScript (javascript)Subtitle tracks can also be managed directly within Cloudinary’s Video Player Studio, the visual interface for customizing playback. You can associate multiple caption and subtitle tracks with a single video, whether they’re manually uploaded or automatically generated from .transcript files. To do this, upload the .vtt files for each language and assign their corresponding labels, as shown in the image below.
According to EAA standards, all interactive controls must maintain a contrast ratio of at least 4.5:1 relative to their background. The purpose of this requirement is to ensure that text, icons, and other user interface elements are sufficiently distinguishable for users with visual impairments, such as those with low vision or color blindness.
Cloudinary’s Video Player Studio not only allows you to configure playback options, like autoplay, looping, and muted start, but it also provides extensive customization options for fonts, colors, and layout.
To fully comply with accessibility standards, you can use these theming options to make sure every interactive control (buttons, sliders, text labels, etc.) meets the required 4.5:1 contrast ratio. While customizing the player’s design, choose color combinations for backgrounds, text, and icons, such as play/pause, volume adjustments, or subtitle toggles, that are easily readable.
Implementing these measures within Cloudinary’s Video Player Studio guarantees that your video player not only aligns with your brand’s visual identity but also conforms to critical accessibility standards.
Whether you’re embedding videos into a product page, landing page, or educational content hub, Cloudinary’s Player Studio and APIs allow you to configure the player to meet EAA requirements. Cloudinary works with popular CMS platforms (e.g., Contentful, Sanity, Strapi) via API-based embeds. You can configure the player’s behavior and accessibility settings within your content schema or automate them during the media upload process.
This setup guarantees that any team publishing content through your CMS or e-commerce backend can embed a video player that’s both visually branded and accessibility compliant without needing to write manual code every time.
Meeting the European Accessibility Act (EAA) video requirements shouldn’t just be avoiding legal penalties. It’s an opportunity for your organization to show commitment to inclusive design and accessibility. By utilizing Cloudinary Video’s accessibility features, you’re creating a better video experience for users across all abilities, devices, and languages. Sign up for a free Cloudinary account today to implement EAA-compliant video features like keyboard navigation, screen reader support, and multilingual subtitles.
