开发工具CLILint格式化静态分析代码质量构建工具【免费下载链接】toolsUnified developer tools for JavaScript, TypeScript, and the web项目地址https://gitcode.com/gh_mirrors/to/tools点击查看免费下载本篇技术指南聚焦 Rome本仓库统一 JavaScript/TypeScript 与 Web 开发工具链的 lint 规则useMediaCaption。该规则用于保证页面中的audio与video多媒体元素必须携带用于字幕的track子元素属于 Rome 默认推荐的 a11y无障碍规则。阅读完本文你将掌握该规则的判定逻辑、合法与非法写法、在rome.json中的配置方式以及其与 ESLint 插件 jsx-a11ymedia-has-caption的对应关系。规则概览项目说明规则名称useMediaCaption引入版本v12.0.0推荐状态是Rome recommended所属分组a11y无障碍诊断分类lint/a11y/useMediaCaptionESLint 对应规则media-has-caption规则的核心职责强制audio和video元素必须包含一个track元素用于字幕captions。规则文档位于 website/src/pages/lint/rules/useMediaCaption.md其声明与注册代码位于 crates/rome_js_analyze/src/analyzers/a11y/use_media_caption.rs。为什么需要这条规则字幕captions不仅服务于听力障碍用户也为所有观众提供音频信息的文字呈现。Rome 在规则诊断中给出的注释说明如下Captions support users with hearing-impairments. They should be a transcription or translation of the dialogue, sound effects, musical cues, and other relevant audio information.即字幕服务于听力受损用户其内容应当是对话、音效、音乐提示及其他相关音频信息的转录或翻译。这与 HTML 标准中track kindcaptions的语义一致——captions类型表示对白与关键音效的文字化而subtitles仅提供翻译文本不含音效描述因此该规则只认可kindcaptions。规则的判定逻辑源码级解读从 crates/rome_js_analyze/src/analyzers/a11y/use_media_caption.rs 的实现可以看出规则以AstAnyJsxElement为查询对象逐一对 JSX 元素执行如下判定流程元素名匹配仅当元素的名称 token 为video或audio时进入检查源码第 51-52 行。跳过条件一muted属性若元素带有muted属性无论取值如何直接视为合法、不报错第 53 行。其语义是静音视频不产生可听内容因此无需字幕。跳过条件二展开属性若元素带有 JSX 展开属性spread attribute如{...props}规则直接跳过第 54-57 行。因为字幕轨道可能通过展开属性注入静态分析无法确认规则选择放行以避免误报。子元素检查对于显式闭合的audio.../audio/video.../video元素规则遍历其全部子元素找出track元素并要求其kind属性的初始值为字符串captions大小写不敏感源码第 80-90 行通过to_lowercase()比较。判定结果若元素既非muted、也无展开属性、且不包含kindcaptions的track子元素则报告诊断。自闭合形式的video //audio /因为没有子元素可承载track必然触发诊断源码第 100 行直接返回节点范围。诊断信息由 use_media_caption.rs 生成主消息为 Provide atrackfor captions when usingaudioorvideoelements.并附上上述关于字幕用途的提示。诊断分类lint/a11y/useMediaCaption在 crates/rome_diagnostics_categories/src/categories.rs 中定义。非法写法Invalid规则文档与源码测试 crates/rome_js_analyze/tests/specs/a11y/useMediaCaption/invalid.jsx 共同覆盖了以下所有触发诊断的写法video /audiochild/audioaudiotrack //audioaudiotrack kindsubtitles //audiovideotrack //videovideotrack kindsubtitles //videovideoFoo/videoaudioFoo/audio需要特别注意的是仅仅存在track元素是不够的kind必须为captionskindsubtitles同样会被判为非法如上述第 4、6 个示例所示。命令行运行后Rome 会输出形如下方的诊断a11y/useMediaCaption.js:1:2 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Provide a track for captions when using audio or video elements. 1 │ video / │ ^^^^^^^^ ℹ Captions support users with hearing-impairments. They should be a transcription or translation of the dialogue, sound effects, musical cues, and other relevant audio information.合法写法Valid规则文档与测试 crates/rome_js_analyze/tests/specs/a11y/useMediaCaption/valid.jsx 覆盖了以下合法场景audio track kindcaptions {...props} / /audiovideo muted {...props}/video规则认可的合法写法类型包括包含kindcaptions的track子元素audiotrack kindcaptions //audio videotrack kindcaptions //videokind取值大小写不敏感Captions同样合法源码通过to_lowercase()归一化比较audiotrack kindCaptions //audio videotrack kindCaptions //video多个track中只要存在一个kindcaptions即合法audiotrack kindCaptions /track kindsubtitles //audio videotrack kindCaptions /track kindsubtitles //video带muted属性的多媒体元素属性值true或裸属性均合法audio muted{true}/audio video muted{true}/video video muted/video带展开属性的元素字幕可能由 props 注入静态分析放行audio {...props} / video {...props} /非多媒体元素与自定义组件不受影响div / MyDiv /在 rome.json 中配置该规则useMediaCaption在配置层面对应字段use_media_caption类型为OptionRuleConfiguration定义于 crates/rome_service/src/configuration/linter/rules.rs。由于该规则在 declare_rule! 中标记为recommended: true它默认随 Rome 的推荐规则集生效无需显式声明。如需在项目中显式启用或关闭该规则可在rome.json的linter.rules.a11y下按名称useMediaCaption配置{ linter: { rules: { a11y: { useMediaCaption: error } } } }常用取值说明取值效果error触发时作为错误报告默认推荐行为warn触发时仅输出警告off关闭该规则不再检查若需关闭整个 a11y 分组后再单独开启某条规则可配合分组的recommended开关组合使用。规则属于a11y分组这一事实与诊断分类路径lint/a11y/useMediaCaption一致。更完整的规则禁用与选项说明参见仓库中的 linter 文档对应原文中的 Disable a rule 与 Rule options 两节。与 ESLint jsx-a11y media-has-caption 的对应关系Rome 官方将该规则标注为 ESLint 插件eslint-plugin-jsx-a11y中media-has-caption规则的等价实现这一点同时记录在规则文档与 规则源码 的注释中。因此如果你此前在 ESLint 项目中使用过jsx-a11y/media-has-caption迁移到 Rome 时可直接用useMediaCaption获得同等的无障碍检查能力无需重复配置两套规则。如何验证规则行为仓库为每条 lint 规则维护了结构化的测试用例useMediaCaption的输入样例位于 crates/rome_js_analyze/tests/specs/a11y/useMediaCaption/invalid.jsx 与 valid.jsx对应的诊断快照分别为invalid.jsx.snap与valid.jsx.snap。这些样例覆盖了上文列举的几乎所有边界情况缺失track、错误kind、大小写、muted、展开属性、自定义组件是理解规则精确行为的首选参考资料。你也可以直接对自己项目中的 JSX/TSX 文件运行 Rome 的 lint 检查观察该规则的实际诊断输出。小结useMediaCaption是 Rome 默认开启的无障碍 lint 规则之一通过静态分析 JSX 中的audio/video元素确保多媒体内容始终提供kindcaptions的字幕轨道从而兼顾听力受损用户的信息获取需求。掌握它的触发条件缺track、kind非 captions与豁免条件muted、展开属性即可在日常开发中写出既合规又符合无障碍实践的多媒体代码。赞分享开发工具CLILint格式化静态分析代码质量构建工具【免费下载链接】toolsUnified developer tools for JavaScript, TypeScript, and the web项目地址https://gitcode.com/gh_mirrors/to/tools点击查看免费下载相关推荐Rome Lint 规则 noDoubleEquals强制使用 与 ! 的 Lint 规则及自动修复实现Rome Lint 规则 noDoubleEquals强制使用 与 ! 的 Lint 规则及自动修复实现 本文以 Rome 官方文档中的 noDo开发工具CLILint格式化静态分析代码质量构建工具TiDB In Action基于4.0版本的分布式数据库终极指南TiDB In Action基于4.0版本的分布式数据库终极指南 TiDB 是一款开源的分布式 NewSQL 数据库基于 4.0 版本的《TiDB In A开发工具CLILint格式化静态分析代码质量构建工具Front-End-Checklist 无障碍规则实战为 meter 元素提供可访问名称aria-meter-nameFront End Checklist 无障碍规则实战为 meter 元素提供可访问名称aria meter name 导读 本文基于 Front End上一篇text-to-video-synthesis-colab社区精选15个令人惊叹的AI视频作品及提示词分享下一篇GitHub_Trending/co/content JavaScript应用快速开发MDN辅助工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考