Skip to content

feat: Add Audio Description Support for Video Accessibility#222

Closed
abhalsod-sonata wants to merge 1 commit intorelease-ulmofrom
feat/TNL2-576
Closed

feat: Add Audio Description Support for Video Accessibility#222
abhalsod-sonata wants to merge 1 commit intorelease-ulmofrom
feat/TNL2-576

Conversation

@abhalsod-sonata
Copy link
Copy Markdown

Description:
This PR implements audio description (AD) functionality for video content in Open edX, enhancing accessibility compliance with WCAG 2.1 Success Criterion 1.2.5 (Audio Description - Prerecorded). Audio descriptions provide narrated explanations of visual elements in videos, making content accessible to users with visual impairments.

Key Changes:

  • Frontend Template (lms/templates/video.html): Added a conditional <audio> element for audio description tracks, rendered only when the feature is enabled.
  • Video Initialization (xmodule/js/src/video/01_initialize.js): Extended configuration to handle audio description preferences, including persistence via localStorage and fallback to server-side user state.
  • New Audio Description Module (xmodule/js/src/video/09_video_audio_description.js): A comprehensive JavaScript module that:
    • Manages a secondary <audio> element synchronized with the main video.
    • Provides a toggle button in the video controls for enabling/disabling AD.
    • Automatically mutes the original video audio when AD is active to prevent overlap.
    • Handles playback synchronization, seeking, speed changes, and volume adjustments.
    • Persists user preferences and integrates with the existing save state system.
  • Module Integration (xmodule/js/src/video/10_main.js): Registered the new VideoAudioDescription module in the video player initialization sequence.
  • Styling (xmodule/static/css-builtin-blocks/VideoBlockDisplay.css): Added CSS for the AD toggle button, including active/disabled states, hover/focus effects, and proper positioning in the secondary controls.

How It Works:

  • When an audio description source URL is configured for a video block, a toggle button appears in the video controls.
  • Activating AD mutes the video's original audio and plays the synchronized description track.
  • The AD audio stays in sync with video playback, seeking, pausing, and speed changes.
  • User preferences are saved and restored across sessions.
  • If no AD source is available, the button is rendered in a disabled state for discoverability.

Testing Notes:

  • Verified integration with existing video controls (play/pause, seek, speed, volume).
  • Tested synchronization accuracy and drift correction during playback.
  • Ensured proper cleanup on player destruction and state persistence.
  • Compatible with both HTML5 and YouTube video players.

Related Ticket: TNL2-576

This feature improves the learning experience for visually impaired users by providing essential context for video-based educational content.

@abhalsod-sonata
Copy link
Copy Markdown
Author

Close this #222 PR due to reason is same changes merge on #223 PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant