freeCodeCamp Applied Accessibility用自定义 CSS 实现仅屏幕阅读器可见的 sr-only 技术【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 课程中 Applied Accessibility可访问性实战板块的核心挑战——Make Elements Only Visible to a Screen Reader by Using Custom CSS为主体讲解如何用一小段自定义 CSS.sr-only把内容在视觉上移出浏览器窗口、同时保留给屏幕阅读器读取。读完后你将掌握该 CSS 规则的完整写法与每个属性值的作用、常见隐藏却导致读屏失效的错误写法并能结合一个堆叠条形图 隐藏数据表格的真实页面场景完成可复制、可运行的实现。为什么先讲语义化再讲 CSS该挑战位于课程板块 Applied Accessibility 的第 15 个位置共 21 个挑战见 challengeOrder。原文档特意指出这个板块前面的挑战全部没有用到任何 CSS这恰恰说明了重要性——在引入视觉设计之前先建立合理的文档大纲和语义化标签。而 CSS 的魔力同样能提升可访问性当你想把仅供屏幕阅读器阅读的内容从视觉上隐藏起来时就需要用 CSS 把这类元素定位到浏览器窗口的可视区域之外。典型应用场景图表的替代数据呈现原文档给出的核心场景是当信息以视觉形式存在比如一张图表时屏幕阅读器用户需要一种替代的呈现方式比如表格来获取同样的数据。这个场景在课程中前后呼应同板块的前一个挑战 Improve Chart Accessibility with the figure Element 教你用figure和figcaption为图表提供语义化分组与文字说明并明确提到另一个挑战会讲解如何用 CSS 把图表数据对应的表格版本移到屏幕外off-screen供屏幕阅读器用户使用——即本挑战。挑战的练习背景是Camper Cat 为自己的训练页面做了一个堆叠条形图stacked bar chart展示每周在 Stealth Agility、Combat、Weapons 三项训练上花费的小时数并同时为视障用户提供了完整的数据表格。该表格已经带了sr-only类名但 CSS 规则还没填完需要补上关键属性值。sr-only 规则的完整写法与逐行解析原文档给出的标准 CSS 规则如下.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; }各属性值的含义position: absolute让元素脱离正常文档流为后续的绝对定位left提供依据left: -10000px把元素整体左移到视口左侧 10000 像素处远远超出任何常规屏幕的可视区域width: 1px; height: 1px把元素尺寸压到 1 像素。这里不能写成 0px原因见下一节top: auto纵向位置不限制保持自动overflow: hidden即使 1 像素的内容放不下也不产生溢出避免产生意外的滚动条。这样处理后的元素人眼看不到已移出可视区、不影响布局绝对定位脱离了文档流但仍存在于 DOM 和可访问性树中屏幕阅读器照常朗读。两条常见的错误隐藏写法原文档特别强调以下两种 CSS 做法达不到相同效果是开发中最容易踩的坑display: none;或visibility: hidden;—— 会把内容对所有人隐藏包括屏幕阅读器用户。屏幕阅读器同样读不到这些元素把尺寸写成零值例如width: 0px; height: 0px;—— 这会把元素从文档流中移除在可访问性树上被排除屏幕阅读器会直接忽略它。这正是本规则必须使用1px而非0px的根本原因1px的元素仍是可访问性树的有效成员而零尺寸元素会被读屏软件跳过。值得佐证的是freeCodeCamp 网站自身的样式中也维护了一个.sr-only类见 global.css/* WCAG fix */ .sr-only { color: white; background-color: black; }从源码结构看该仓库在基础sr-only定位规则之上追加了color: white; background-color: black的WCAG fix。这是一种行业常见做法当用户开启浏览器高对比度模式或系统级强制颜色时overflow: hidden之外的元素可能因颜色被系统覆盖而闪出可见文字俗称 invisible text 问题将文字与背景显式设为白底黑字之外的组合黑底白字可确保即使命中可见区域也是不可辨识的从而维持视觉上隐藏。完整实战在训练页面上应用 sr-only 表格下面是该挑战的完整起始代码seed。页面上已经有一个用figure/figcaption包裹的堆叠条形图占位以及一个带sr-only类的完整数据表格style中的.sr-only规则留有四个待填的空head style .sr-only { position: ; left: ; width: ; height: ; top: auto; overflow: hidden; } /style /head body header h1Training/h1 nav ul lia href#stealthStealth amp; Agility/a/li lia href#combatCombat/a/li lia href#weaponsWeapons/a/li /ul /nav /header section h2Master Camper Cats Beginner Three Week Training Program/h2 figure !-- Stacked bar chart of weekly training -- p[Stacked bar chart]/p br / figcaptionBreakdown per week of time to spend training in stealth, combat, and weapons./figcaption /figure table classsr-only captionHours of Weekly Training in Stealth, Combat, and Weapons/caption thead tr th/th th scopecolStealth amp; Agility/th th scopecolCombat/th th scopecolWeapons/th th scopecolTotal/th /tr /thead tbody tr th scoperowWeek One/th td3/td td5/td td2/td td10/td /tr tr th scoperowWeek Two/th td4/td td5/td td3/td td12/td /tr tr th scoperowWeek Three/th td4/td td6/td td3/td td13/td /tr /tbody /table /section section idstealth h2Stealth amp; Agility Training/h2 articleh3Climb foliage quickly using a minimum spanning tree approach/h3/article articleh3No training is NP-complete without parkour/h3/article /section section idcombat h2Combat Training/h2 articleh3Dispatch multiple enemies with multithreaded tactics/h3/article articleh3Goodbye, world: 5 proven ways to knock out an opponent/h3/article /section section idweapons h2Weapons Training/h2 articleh3Swords: the best tool to literally divide and conquer/h3/article articleh3Breadth-first or depth-first in multi-weapon training?/h3/article /section footercopy; 2018 Camper Cat/footer /body注意这张表格本身也体现了可访问性细节caption提供了表格标题表头使用scopecol行头使用scoperow让屏幕阅读器在逐行朗读时能正确报出这是哪一列/哪一行的上下文。这正是sr-only隐藏方式的价值——表格虽然人眼不可见但其完整的可访问性语义被完整保留。参考答案只需用absolute、-10000px、1px、1px四个值补全 CSS 规则style .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; } /style其余 HTML 结构保持不变。完成后的完整解法见 挑战文件中的 --solutions 段。测试如何验证你的 CSS该挑战的测试套件hints 段完整内容见 挑战原文从两个维度验证实现维度一计算样式浏览器实际生效的值。测试直接读取 DOM 中.sr-only元素的计算样式并断言const srOnly document.querySelector(.sr-only); const position window.getComputedStyle(srOnly).position; assert.equal(position, absolute); const left window.getComputedStyle(srOnly).left; assert.equal(left, -10000px);getComputedStyle返回的是浏览器解析后的最终值因此left必须是计算后的-10000px——这解释了为什么填left: -10000px有效而填其他负值如left: -9999px会失败。维度二源码匹配。对width和height采用正则直接匹配你的代码文本assert.match(code, /width:\s*?1px/gi); assert.match(code, /height:\s*?1px/gi);这类计算样式 源码正则的双重校验正是 freeCodeCamp 经典编辑器classic editor挑战的标准测试模式源码中的--hints--段落被转成测试用例由挑战框架在沙箱环境中执行执行环境可参考 frame.ts测试运行组件见 test-suite.tsx。小结sr-only 的正确使用边界适用需要视觉隐藏、读屏可读的内容——图表的替代数据表格、跳转链接的辅助文本、仅辅助读屏的上下文说明等不适用真正对所有人都不需要展示的内容那应该直接删除或用语义手段处理禁用display: none、visibility: hidden和0px尺寸——它们会让屏幕阅读器一并失去这些内容实现要点position: absolute 大负值left1px宽高 overflow: hidden缺一不可。掌握这一技术后你可以把它与前面讲过的figure/figcaption图表语义化组合使用figure负责让图表对读屏用户可解释sr-only表格负责让图表的原始数据对读屏用户可获取两者共同构成数据可视化可访问性的完整方案。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp Applied Accessibility：用自定义 CSS 实现“仅屏幕阅读器可见“的 sr-only 技术
freeCodeCamp Applied Accessibility用自定义 CSS 实现仅屏幕阅读器可见的 sr-only 技术【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 课程中 Applied Accessibility可访问性实战板块的核心挑战——Make Elements Only Visible to a Screen Reader by Using Custom CSS为主体讲解如何用一小段自定义 CSS.sr-only把内容在视觉上移出浏览器窗口、同时保留给屏幕阅读器读取。读完后你将掌握该 CSS 规则的完整写法与每个属性值的作用、常见隐藏却导致读屏失效的错误写法并能结合一个堆叠条形图 隐藏数据表格的真实页面场景完成可复制、可运行的实现。为什么先讲语义化再讲 CSS该挑战位于课程板块 Applied Accessibility 的第 15 个位置共 21 个挑战见 challengeOrder。原文档特意指出这个板块前面的挑战全部没有用到任何 CSS这恰恰说明了重要性——在引入视觉设计之前先建立合理的文档大纲和语义化标签。而 CSS 的魔力同样能提升可访问性当你想把仅供屏幕阅读器阅读的内容从视觉上隐藏起来时就需要用 CSS 把这类元素定位到浏览器窗口的可视区域之外。典型应用场景图表的替代数据呈现原文档给出的核心场景是当信息以视觉形式存在比如一张图表时屏幕阅读器用户需要一种替代的呈现方式比如表格来获取同样的数据。这个场景在课程中前后呼应同板块的前一个挑战 Improve Chart Accessibility with the figure Element 教你用figure和figcaption为图表提供语义化分组与文字说明并明确提到另一个挑战会讲解如何用 CSS 把图表数据对应的表格版本移到屏幕外off-screen供屏幕阅读器用户使用——即本挑战。挑战的练习背景是Camper Cat 为自己的训练页面做了一个堆叠条形图stacked bar chart展示每周在 Stealth Agility、Combat、Weapons 三项训练上花费的小时数并同时为视障用户提供了完整的数据表格。该表格已经带了sr-only类名但 CSS 规则还没填完需要补上关键属性值。sr-only 规则的完整写法与逐行解析原文档给出的标准 CSS 规则如下.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; }各属性值的含义position: absolute让元素脱离正常文档流为后续的绝对定位left提供依据left: -10000px把元素整体左移到视口左侧 10000 像素处远远超出任何常规屏幕的可视区域width: 1px; height: 1px把元素尺寸压到 1 像素。这里不能写成 0px原因见下一节top: auto纵向位置不限制保持自动overflow: hidden即使 1 像素的内容放不下也不产生溢出避免产生意外的滚动条。这样处理后的元素人眼看不到已移出可视区、不影响布局绝对定位脱离了文档流但仍存在于 DOM 和可访问性树中屏幕阅读器照常朗读。两条常见的错误隐藏写法原文档特别强调以下两种 CSS 做法达不到相同效果是开发中最容易踩的坑display: none;或visibility: hidden;—— 会把内容对所有人隐藏包括屏幕阅读器用户。屏幕阅读器同样读不到这些元素把尺寸写成零值例如width: 0px; height: 0px;—— 这会把元素从文档流中移除在可访问性树上被排除屏幕阅读器会直接忽略它。这正是本规则必须使用1px而非0px的根本原因1px的元素仍是可访问性树的有效成员而零尺寸元素会被读屏软件跳过。值得佐证的是freeCodeCamp 网站自身的样式中也维护了一个.sr-only类见 global.css/* WCAG fix */ .sr-only { color: white; background-color: black; }从源码结构看该仓库在基础sr-only定位规则之上追加了color: white; background-color: black的WCAG fix。这是一种行业常见做法当用户开启浏览器高对比度模式或系统级强制颜色时overflow: hidden之外的元素可能因颜色被系统覆盖而闪出可见文字俗称 invisible text 问题将文字与背景显式设为白底黑字之外的组合黑底白字可确保即使命中可见区域也是不可辨识的从而维持视觉上隐藏。完整实战在训练页面上应用 sr-only 表格下面是该挑战的完整起始代码seed。页面上已经有一个用figure/figcaption包裹的堆叠条形图占位以及一个带sr-only类的完整数据表格style中的.sr-only规则留有四个待填的空head style .sr-only { position: ; left: ; width: ; height: ; top: auto; overflow: hidden; } /style /head body header h1Training/h1 nav ul lia href#stealthStealth amp; Agility/a/li lia href#combatCombat/a/li lia href#weaponsWeapons/a/li /ul /nav /header section h2Master Camper Cats Beginner Three Week Training Program/h2 figure !-- Stacked bar chart of weekly training -- p[Stacked bar chart]/p br / figcaptionBreakdown per week of time to spend training in stealth, combat, and weapons./figcaption /figure table classsr-only captionHours of Weekly Training in Stealth, Combat, and Weapons/caption thead tr th/th th scopecolStealth amp; Agility/th th scopecolCombat/th th scopecolWeapons/th th scopecolTotal/th /tr /thead tbody tr th scoperowWeek One/th td3/td td5/td td2/td td10/td /tr tr th scoperowWeek Two/th td4/td td5/td td3/td td12/td /tr tr th scoperowWeek Three/th td4/td td6/td td3/td td13/td /tr /tbody /table /section section idstealth h2Stealth amp; Agility Training/h2 articleh3Climb foliage quickly using a minimum spanning tree approach/h3/article articleh3No training is NP-complete without parkour/h3/article /section section idcombat h2Combat Training/h2 articleh3Dispatch multiple enemies with multithreaded tactics/h3/article articleh3Goodbye, world: 5 proven ways to knock out an opponent/h3/article /section section idweapons h2Weapons Training/h2 articleh3Swords: the best tool to literally divide and conquer/h3/article articleh3Breadth-first or depth-first in multi-weapon training?/h3/article /section footercopy; 2018 Camper Cat/footer /body注意这张表格本身也体现了可访问性细节caption提供了表格标题表头使用scopecol行头使用scoperow让屏幕阅读器在逐行朗读时能正确报出这是哪一列/哪一行的上下文。这正是sr-only隐藏方式的价值——表格虽然人眼不可见但其完整的可访问性语义被完整保留。参考答案只需用absolute、-10000px、1px、1px四个值补全 CSS 规则style .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; } /style其余 HTML 结构保持不变。完成后的完整解法见 挑战文件中的 --solutions 段。测试如何验证你的 CSS该挑战的测试套件hints 段完整内容见 挑战原文从两个维度验证实现维度一计算样式浏览器实际生效的值。测试直接读取 DOM 中.sr-only元素的计算样式并断言const srOnly document.querySelector(.sr-only); const position window.getComputedStyle(srOnly).position; assert.equal(position, absolute); const left window.getComputedStyle(srOnly).left; assert.equal(left, -10000px);getComputedStyle返回的是浏览器解析后的最终值因此left必须是计算后的-10000px——这解释了为什么填left: -10000px有效而填其他负值如left: -9999px会失败。维度二源码匹配。对width和height采用正则直接匹配你的代码文本assert.match(code, /width:\s*?1px/gi); assert.match(code, /height:\s*?1px/gi);这类计算样式 源码正则的双重校验正是 freeCodeCamp 经典编辑器classic editor挑战的标准测试模式源码中的--hints--段落被转成测试用例由挑战框架在沙箱环境中执行执行环境可参考 frame.ts测试运行组件见 test-suite.tsx。小结sr-only 的正确使用边界适用需要视觉隐藏、读屏可读的内容——图表的替代数据表格、跳转链接的辅助文本、仅辅助读屏的上下文说明等不适用真正对所有人都不需要展示的内容那应该直接删除或用语义手段处理禁用display: none、visibility: hidden和0px尺寸——它们会让屏幕阅读器一并失去这些内容实现要点position: absolute 大负值left1px宽高 overflow: hidden缺一不可。掌握这一技术后你可以把它与前面讲过的figure/figcaption图表语义化组合使用figure负责让图表对读屏用户可解释sr-only表格负责让图表的原始数据对读屏用户可获取两者共同构成数据可视化可访问性的完整方案。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考