Skip to content
Flint
Blog

mediaCaptions

Reports media elements without captions.

✅ This rule is included in the jsx logical and logicalStrict presets.

Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, and other relevant audio information.

Media elements (<audio> and <video>) should include a <track> element with kind="captions" to provide this accessibility feature. The only exception is that muted media does not require captions.

This is required for WCAG 1.2.2 and 1.2.3 compliance.

Examples

Section titled “Examples”
CE6audCB0sA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Daudio.m1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6vidCB0sA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dvideo.m1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6vidCd ivclassNa="meec-li">nt< sp ansty="le--1:#8844">CE6traCB0kiA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dsubtitl1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d>d ivclassNa="meec-li">CA<E6vidCd>d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6aDde<44AE spans="tyle--0:#7F">DECE6tD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dcapt1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<44AE spans="tyle--0:#7F">DBECE6aD<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6vDde<44AE spans="tyle--0:#7F">DECE6tD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dcapt1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<44AE spans="tyle--0:#7F">DBECE6vDdi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6vD61B0m44Adi>

When Not To Use It

Section titled “When Not To Use It”

If you’re not using media elements or have a different captioning system, you can disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”