2

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>
KshitijV97
  • 347
  • 1
  • 4
  • 16
  • 1
    Put the `` element within the ` – GrahamTheDev Aug 27 '21 at 09:14
  • @GrahamRitchie I tried this, Still same issue – KshitijV97 Aug 27 '21 at 10:27
  • I have never seen captions or subtitle text be "focusable" elements with screen readers. You specifically mention NVDA. Does that mean JAWS and VoiceOver (Mac) **do** allow you to access the subtitles but NVDA does not? – slugolicious Aug 27 '21 at 15:03
  • @slugolicious No, Currently NVDA is the only screen reader I am able to test this with. – KshitijV97 Aug 29 '21 at 11:40
  • Ok. I don’t think any screen reader has access to subtitles or captions. You’d have to provide a transcript for screen readers. – slugolicious Aug 29 '21 at 17:06

0 Answers0