Skip to main content

Ensure correct usage of <track> elements for captions accessibility

Medium
accessibilityreacttypescript

What​

When implementing a video component with synchronized subtitles, verify that each <track> element includes the attribute kind set to 'captions'. Violations occur when the kind attribute is missing or has an incorrect value.

Why​

This rule is vital because it ensures that assistive technologies recognize and process the subtitles correctly, meeting accessibility standards such as WCAG 1.2.2. Clear semantic markup improves the user experience for people who rely on captions.

Fix​

Review your video components and add or correct the kind attribute in the <track> tags to use kind='captions'. This change aligns your code with accessibility guidelines and ensures proper behavior across different browsers.

Examples​

Example 1:​

Positive​

The <track> element correctly uses kind='captions', ensuring the subtitles are accessible.

import React from 'react';

const VideoPlayer: React.FC = () => {
  return (
    <div>
      <video controls width="600">
        <source src="video.mp4" type="video/mp4" />
        <track
          kind="captions"
          src="captions_en.vtt"
          srcLang="en"
          label="English Captions"
          default
        />
        Your browser does not support the video tag.
      </video>
    </div>
  );
};

export default VideoPlayer;

Negative​

The <track> element is missing the required kind='captions' attribute, which violates accessibility guidelines.

import React from 'react';

const VideoPlayer: React.FC = () => {
  return (
    <div>
      <video controls width="600">
        <source src="video.mp4" type="video/mp4" />
        <track
          src="captions_en.vtt"
          srcLang="en"
          label="English Captions"
          default
        />
        Your browser does not support the video tag.
      </video>
    </div>
  );
};

export default VideoPlayer;