Subtitles given to video in React are not accessible to NVDA screen reader

Viewed 107

This is the code that I am using to show a help video.

<video src={process.env.PUBLIC_URL + '/videos/guestHelpVideo.mp4'} width='100%' height='auto' controls>
    <track
        src={process.env.PUBLIC_URL + '/videos/help-video-subtitles.vtt'}
        label='English'
        kind='subtitles'
        srcLang='en'
        default
    />
</video>

The subtitles are visible on Chrome / Firefox

However NVDA screen reader is not able to read out the subtitles when video is played.

What change should I make so that NVDA screen reader can access and display those subtitles?

I tried removing src attribute and adding it in a different tag as suggested in a comment. It did not work

<video width='100%' height='auto' controls>
    <source src={process.env.PUBLIC_URL + '/videos/guestHelpVideo.mp4'} type='video/mp4' />
    <track
        src={process.env.PUBLIC_URL + '/videos/help-video-subtitles.vtt'}
        type='text/vtt'
        label='English'
        kind='captions'
        srcLang='en'
        default
    />
</video>
0 Answers
Related