Command Palette

Search for a command to run...

Accessibility use case

Captions and Transcripts

Captions access guidance for Tamil DS

How users access audio/video via text, mapped to WCAG 1.2.2 (Captions) and WCAG 1.2.3 (Audio Description).

Detailed guidance for real users, assistive technology, component behavior, testing, and release checks.

Who this supports

Deaf users, hard-of-hearing users, users in noisy places, users without headphones, language learners, and people who need searchable records.

Assistive technology

Closed captionsOpen captionsTranscriptsLive captioningMedia players with text tracks

Primary risk

Video or audio becomes inaccessible when the only information is spoken, sounded, or shown briefly without a text equivalent.

Accessible Media Card Mock

🔴 Simulated Playback0:15 / 1:30
தமிழில் அத்தியாவசிய தகவல்களை காண்போம்.

Interactive Transcript

Real user scenario

A student watches a Tamil UX lesson in a library without audio. Captions show the spoken explanation, speaker changes, important sound cues, and technical terms. A transcript lets them search for Figma, spacing, or accessibility later.

How people use this access method

1

Captions synchronize text with spoken audio and meaningful non-speech sounds.

2

Transcripts provide a full text version of the media.

3

Users may read captions while watching, search transcripts afterward, or use translation tools.

4

Live captions help real-time sessions but need correction for official records.

5

Good captions include punctuation, speaker identification, and relevant sound cues.

Design requirements

These requirements are product requirements, not optional polish. If a Tamil DS component or page breaks one of these rules, users may be blocked even when the visual interface looks finished.

Provide a text transcript or alternative for audio-only content (WCAG 1.2.1 Audio-only and Video-only).

Provide captions for every instructional or informational video (WCAG 1.2.2 Captions).

Provide transcripts for long audio and video content.

Provide Audio Descriptions for video content where important visual information is not spoken (WCAG 1.2.3/1.2.5).

Do not burn captions into video when users need control over size, language, or contrast.

Keep captions readable on mobile and avoid covering important UI in the video.

Identify speakers when the speaker is not obvious.

Include meaningful sound cues such as error tone, applause, or alarm.

Use technical terms consistently in captions and transcripts.

Let users pause, replay, and scrub content easily.

Accessible code implementation

Use this correct, semantic React/HTML/CSS implementation pattern as a template when building or styling components for this specific access method:

<!-- Closed-Captioned Accessible HTML5 Video Player -->
<div className="space-y-4 w-full">
  <video 
    controls 
    preload="metadata" 
    className="w-full rounded-md border border-border bg-slate-950 aspect-video"
    aria-label="How to use the Tamil DS Accessibility Panel"
  >
    <source src="/media/a11y-tutorial.mp4" type="video/mp4" />
    
    {/* Captions Tracks for multiple languages */}
    <track 
      label="Tamil" 
      kind="captions" 
      srcLang="ta" 
      src="/media/captions_ta.vtt" 
      default 
    />
    <track 
      label="English" 
      kind="captions" 
      srcLang="en" 
      src="/media/captions_en.vtt" 
    />
    
    Your browser does not support HTML5 video.
  </video>
  
  {/* Collapsible searchable transcript */}
  <details className="border border-border rounded-md bg-card p-3">
    <summary className="text-sm font-semibold cursor-pointer select-none">
      தமிழில் முழு உரை வடிவம் (Searchable Transcript)
    </summary>
    <div className="mt-3 text-xs leading-relaxed text-muted-foreground space-y-2 max-h-40 overflow-y-auto">
      <p><span className="font-bold text-primary">[0:02]</span> வணக்கம். இந்த காணொளியில் தமிழ் வடிவமைப்பு அமைப்பை எவ்வாறு பயன்படுத்துவது என்பதை விளக்குவோம்...</p>
      <p><span className="font-bold text-primary">[0:30]</span> முதலில் கீழே உள்ள மிதக்கும் அணுகல் குறியீட்டைத் தேர்வு செய்யவும்...</p>
    </div>
  </details>
</div>
Technical breakdown: This HTML snippet demonstrates how to leverage native HTML5 <track> elements to deliver closed captions. Standard webvtt caption tracks allow the browser to overlay legible, scalable text synchronized with speech. Pairing this with a collapsible, searchable transcript (<details>) ensures Deaf or sensory-fatigued users can scan the entire audio track without playing the media.

Component behavior implications

Accessibility becomes real at component level. The same page may pass content review but fail when dialogs, forms, menus, cards, or status messages do not expose the right behavior.

Video embeds should include nearby transcript or summary links.

Cards that promote videos should mention caption or transcript availability.

Modal video players must keep caption controls reachable.

Audio players need visible time, speed, transcript, and download options.

Course pages should expose searchable transcript sections.

Live event pages need a post-event corrected transcript.

Testing script

Run this script before release. Automated checks are useful, but they do not replace trying the actual access method and completing a real task from start to finish.

Watch the video with audio muted.

Check whether all spoken instructions are available in captions or transcript.

Inspect caption readability on mobile.

Confirm captions do not cover important visual content.

Search the transcript for key terms.

Check speaker labels and sound cues.

Review Tamil and English terms for spelling consistency.

Common failures and fixes

Failure

Auto captions are published without correction

Review technical terms, names, punctuation, and speaker labels before release.

Failure

Captions hide the UI being demonstrated

Position captions carefully or provide a transcript with screenshots.

Failure

Transcript is a wall of text

Add headings, timestamps, speaker labels, and summary sections.

Failure

Important audio cue has no caption

Caption meaningful non-speech sounds, not only spoken words.

Failure

Silent visual demonstrations lack context for blind users

Add an audio description track or ensure the speaker describes the visual action.

Tamil public-service context

Tamil DS must work for Tamil-first, English-first, and bilingual users across phones, desktops, kiosks, classrooms, offices, and public-service counters. These notes keep the guidance connected to local product reality.

Tamil technical lessons often mix English tool names with Tamil explanation; captions should preserve product terms accurately.

Many users watch educational content on mobile without headphones, so captions are not optional.

Transcripts help Tamil learners translate, search, and revise complex UX terms.

Release checklist

Captions are available and corrected.

Transcript is available for long media.

Caption contrast and size are readable.

Speaker and sound cues are included.

Media controls are keyboard accessible.