A common thread in dev communities right now: teams ship great video content, then realize some users cannot access it without captions, transcripts, keyboard controls, or audio descriptions. Accessibility is not just compliance, it is usability and reach.<\/p>\n\n\n\n
Hi folks, I am updating our video player and need practical guidance on accessibility. Specifically: How to make videos accessible, and what is WCAG? I am looking for a concrete checklist and examples that cover captions, transcripts, audio descriptions, keyboard navigation, and format choices.<\/em><\/p>\n\n\n\n The Web Content Accessibility Guidelines (WCAG) focuses on making web content like videos and other media accessible for everyone. It\u2019s a technical standard<\/a> maintained by the World Wide Web Consortium (W3C), and outlines how websites should approach displaying content.<\/p>\n\n\n\n Native controls are keyboard accessible. If you build a custom UI, wire up common shortcuts:<\/p>\n\n\n Keep captions synchronized, concise, and include speaker IDs and non-speech audio when relevant.<\/p>\n\n\n\n After you have captions and transcripts in place, you can host and deliver accessible variants efficiently. For example, upload your video and VTT files, then reference them from your HTML with multiple formats and a poster image.<\/p>\n\n\n Alternatively, you can also use Cloudinary to add auto-captions<\/a> to your videos dynamically, and at scale.<\/p>\n\n\n\n Provide captions, transcripts, and audio descriptions. Make controls keyboard friendly and visible, avoid auto-play with audio, and ship multiple formats and qualities. Use a reliable CDN to deliver optimized video and VTT. If you are already managing media in the cloud, you can host videos and caption files together and reference them directly in your HTML.<\/p>\n\n\n\n Ready to optimize accessible video at scale and deliver fast across devices? Create a free Cloudinary account<\/a> and streamline your video pipeline.<\/p>\n","protected":false},"excerpt":{"rendered":"Answer:<\/h2>\n\n\n\n
WCAG-aligned checklist for video<\/h2>\n\n\n\n
\n
Reference HTML implementation<\/h2>\n\n\n
<figure<\/span>><\/span>\n\n\u00a0\u00a0<!-- The <video> element provides the main media content with user controls --><\/span>\n\n\u00a0\u00a0<video<\/span>\n\n\u00a0\u00a0\u00a0\u00a0id<\/span>=\"howto-video\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0width<\/span>=\"640\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0controls<\/span>\n\n\u00a0\u00a0\u00a0\u00a0preload<\/span>=\"metadata\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0poster<\/span>=\"thumbnail.jpg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0aria-describedby<\/span>=\"howto-caption\"<\/span>\n\n\u00a0\u00a0><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Source for the main video file --><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<source<\/span> src<\/span>=\"example-video.mp4\"<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Captions track for viewers who are deaf or hard of hearing --><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<track<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src<\/span>=\"captions-en.vtt\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0kind<\/span>=\"captions\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0srclang<\/span>=\"en\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label<\/span>=\"English captions\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Audio descriptions track for users who are blind or have low vision --><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<track<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src<\/span>=\"descriptions-en.vtt\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0kind<\/span>=\"descriptions\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0srclang<\/span>=\"en\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label<\/span>=\"Audio descriptions\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Fallback text and links for browsers that don't support video --><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<p<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Your browser does not support HTML5 video. Watch the\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a<\/span> href<\/span>=\"example-video.mp4\"<\/span>><\/span>MP4<\/a<\/span>><\/span> or read the\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a<\/span> href<\/span>=\"transcript.html\"<\/span>><\/span>transcript<\/a<\/span>><\/span>.\n\n\u00a0\u00a0\u00a0\u00a0<\/p<\/span>><\/span>\n\n\u00a0\u00a0<\/video<\/span>><\/span>\n\n\u00a0\u00a0<!-- Figure caption provides context and acts as a video label --><\/span>\n\n\u00a0\u00a0<figcaption<\/span> id<\/span>=\"howto-caption\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0How to froth milk for lattes\n\n\u00a0\u00a0<\/figcaption<\/span>><\/span>\n\n<\/figure<\/span>><\/span>\n\n<!-- Links to additional accessible resources: full transcript and described version --><\/span>\n\n<p<\/span>><\/span>\n\n\u00a0\u00a0<a<\/span> href<\/span>=\"transcript.html\"<\/span>><\/span>Full transcript<\/a<\/span>><\/span> \u2022\n\n\u00a0\u00a0<a<\/span> href<\/span>=\"example-video-described.mp4\"<\/span>><\/span>Audio-described version<\/a<\/span>><\/span>\n\n<\/p<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nKeyboard support for custom UIs<\/h3>\n\n\n\n
const<\/span> v = document<\/span>.getElementById('product-video'<\/span>);\ndocument<\/span>.addEventListener('keydown'<\/span>, e => {\n\u00a0 if<\/span> (document<\/span>.activeElement !== v) return<\/span>;\n\u00a0 switch<\/span> (e.key) {\n\u00a0 \u00a0 case<\/span> ' '<\/span>:\n\u00a0 \u00a0 \u00a0 e.preventDefault();\n\u00a0 \u00a0 \u00a0 v.paused ? v.play() : v.pause();\n\u00a0 \u00a0 \u00a0 break<\/span>;\n\u00a0 \u00a0 case<\/span> 'ArrowRight'<\/span>:\n\u00a0 \u00a0 \u00a0 v.currentTime += 5<\/span>;\n\u00a0 \u00a0 \u00a0 break<\/span>;\n\u00a0 \u00a0 case<\/span> 'ArrowLeft'<\/span>:\n\u00a0 \u00a0 \u00a0 v.currentTime -= 5<\/span>;\n\u00a0 \u00a0 \u00a0 break<\/span>;\n\u00a0 \u00a0 case<\/span> '+'<\/span>:\n\u00a0 \u00a0 \u00a0 v.playbackRate = Math<\/span>.min(2<\/span>, v.playbackRate + 0.25<\/span>);\n\u00a0 \u00a0 \u00a0 break<\/span>;\n\u00a0 \u00a0 case<\/span> '-'<\/span>:\n\u00a0 \u00a0 \u00a0 v.playbackRate = Math<\/span>.max(0.5<\/span>, v.playbackRate - 0.25<\/span>);\n\u00a0 \u00a0 \u00a0 break<\/span>;\n\u00a0 }\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nFormats and delivery tips<\/h2>\n\n\n\n
\n
Captions and VTT quick primer<\/h2>\n\n\n
WEBVTT<\/span>\n\n00:00<\/span>:00.000<\/span> --<\/span>> 00:00<\/span>:02.500<\/span>\nIntro<\/span> music<\/span> and<\/span> title<\/span> animation<\/span>\n\n00:00<\/span>:02.500<\/span> --<\/span>> 00:00<\/span>:06.000<\/span>\nNarrator<\/span>: Welcome<\/span> to<\/span> the<\/span> product<\/span> tour<\/span>.<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nEnhancing the workflow with Cloudinary<\/h2>\n\n\n\n
<video<\/span> controls<\/span> width<\/span>=\"800\"<\/span>\n\u00a0 aria-label<\/span>=\"Product demo video\"<\/span>\n\u00a0 poster<\/span>=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_800,c_fill,q_auto\/product-demo-poster.jpg\"<\/span>><\/span>\n\u00a0 <source<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/f_mp4,q_auto\/vproduct-demo\"<\/span> type<\/span>=\"video\/mp4\"<\/span>><\/span>\n\u00a0 <source<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/f_webm,q_auto\/vproduct-demo\"<\/span> type<\/span>=\"video\/webm\"<\/span>><\/span>\n\u00a0 <track<\/span> kind<\/span>=\"captions\"<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/raw\/upload\/product-demo.en.vtt\"<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 srclang<\/span>=\"en\"<\/span> label<\/span>=\"English\"<\/span> default<\/span>><\/span>\n<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nTesting checklist<\/h2>\n\n\n\n
\n
TL;DR<\/h2>\n\n\n\n
Learn More<\/h2>\n\n\n\n
\n