尧图网页设计 
freeCodeCamp 响应式 Web 设计课程实战用 tabindex 精确控制多个元素的键盘焦点顺序【免费下载链接】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”是响应式 Web 设计Responsive Web Design超区块的收尾模块而本模块的最后一道挑战正是讲解tabindex的正整数值如何指定多个元素的键盘焦点Tab遍历顺序。读完后你将掌握tabindex三种取值正数、0、负数各自对应的焦点行为差异能按照“正数序列 → 默认元素 →tabindex0元素”的规则手工排布页面的 Tab 导航流并完整复现课程练习在一个名言页面上让搜索框和提交按钮成为键盘用户最先接触到的两个控件同时理解为什么正数tabindex在无障碍实践中需要谨慎使用。挑战在课程体系中的位置该挑战文件位于 applied-accessibility 模块模块标题为 “Use tabindex to Specify the Order of Keyboard Focus for Several Elements”使用 tabindex 指定多个元素的键盘焦点顺序challengeType为 0属于 HTML 交互式挑战。从 模块结构文件 可以确认它是applied-accessibility区块 22 道挑战中的最后一道其前一道挑战 Use tabindex to Add Keyboard Focus to an Element 刚刚讲完了tabindex0与负值的基础用法。整个区块又隶属于 responsive-web-design 超区块结构 的一部分帮助类别标注为 HTML-CSS。tabindex 的三种取值先看全景再聚焦正数要理解本挑战需要先把tabindex的完整语义放在一起看这部分承接前一道挑战的内容取值行为正整数1、2、…元素进入自定义 Tab 序列按数值升序优先于默认焦点流0元素可被键盘聚焦按 HTML 源码位置参与默认焦点流负数通常为 -1元素可以被程序化聚焦但不能通过键盘 Tab 到达默认情况下链接、表单控件等天然可聚焦元素会按照它们在 HTML 源码中出现的顺序获得焦点。给div、span、p这类非表单元素加上tabindex0可以使其按源码位置加入默认焦点流而负值典型为 -1一般用于弹窗等需要由脚本调用focus()的场景。本挑战聚焦的就是正整数这一支当tabindex的值设置为 1 或更大的正数时它指定了元素的精确 Tab 顺序。正数 tabindex 的焦点顺序规则核心行为可以归纳为一条遍历规则值为tabindex1的元素最先获得键盘焦点之后依次循环经过tabindex2、tabindex3等按数值升序排列的元素遍历完所有正数序列后才轮到默认可聚焦元素以及tabindex0的元素这部分恢复按 HTML 源码顺序遍历。课程给出的最简示例是div tabindex1I get keyboard focus, and I get it first!/divdiv tabindex2I get keyboard focus, and I get it second!/div按规则第一个div先于第二个div获得焦点即使它们在源码中的位置被其他元素分隔也不影响这个顺序。需要特别注意的是这种设定方式会覆盖默认的焦点顺序默认顺序以 HTML 源码为准。如果键盘用户预期从页面顶部自然开始导航却被直接“拽”到页面中部的某个控件体验会相当混乱。因此课程原文的结论是这种技巧在某些场景下确有必要但从无障碍角度讲应用之前务必谨慎。实战练习让搜索框成为 Tab 流的前两项挑战设定了一个具体场景Camper Cat 在他的 “Inspirational Quotes”励志名言页面上有一个搜索框他计划用 CSS 把它定位到页面右上角。由于视觉上它被移到了页首他希望搜索输入框和提交按钮成为 Tab 顺序中的前两项——这正是正数tabindex的典型适用场景视觉位置与源码位置解耦后用焦点顺序把两者重新对齐。具体要求给search输入框添加tabindex1给submit输入框添加tabindex2。初始代码seed中form部分留了两个空行待填写body div tabindex1 classoverlay/div header h1Even Deeper Thoughts with Master Camper Cat/h1 nav ul lia hrefHome/a/li lia hrefBlog/a/li lia hrefTraining/a/li /ul /nav /header form label forsearchSearch:/label input typesearch namesearch idsearch input typesubmit namesubmit valueSubmit idsubmit /form h2Inspirational Quotes/h2 blockquote pldquo;Theres no Theory of Evolution, just a list of creatures Ive allowed to live.rdquo;br - Chuck Norris/p /blockquote blockquote pldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.rdquo;br - TMNT/p /blockquote footercopy; 2018 Camper Cat/footer /body style body { height: 100%; margin: 0 !important; padding: 8px; } .overlay { margin: -8px; position: absolute; width: 100%; height: 100%; } /style标准解法solutions只在两个input上各加一个属性其余保持不动form label forsearchSearch:/label input tabindex1 typesearch namesearch idsearch input tabindex2 typesubmit namesubmit valueSubmit idsubmit /formoverlay 元素的作用课程说明中还有一个容易忽略的细节某些浏览器在用户点击页面上某个元素后可能会把焦点起点放到 Tab 顺序的中间位置。为了保证键盘用户总能从 Tab 顺序的起点开始页面里额外添加了一个元素来承担这个职责——也就是 seed 开头那个div tabindex1 classoverlay/div。从源码结构看它以绝对定位铺满整个视口position: absolute; width: 100%; height: 100%配合负margin抵消 body 内边距并且自身也持有tabindex1且位于所有其他正数焦点元素之前。这样无论上一次点击把焦点带到哪里下一次 Tab 都能回到序列头部保证“先搜索框、后提交按钮”的练习结果稳定可复现。自动化校验hints 断言如何验证你的修改该挑战附带了四条自动化断言它们也是理解验收标准最直观的方式// 1. search 输入框必须存在 tabindex 属性 assert.isNotNull(document.querySelector(#search)?.getAttribute(tabindex)); // 2. submit 输入框必须存在 tabindex 属性 assert.isNotNull(document.querySelector(#submit)?.getAttribute(tabindex)); // 3. search 的 tabindex 值必须为字符串 1 assert.equal(document.querySelector(#search)?.getAttribute(tabindex), 1); // 4. submit 的 tabindex 值必须为字符串 2 assert.equal(document.querySelector(#submit)?.getAttribute(tabindex), 2);注意后两条断言比较的是字符串1和2——HTML 属性取回的值始终是字符串这提醒我们tabindex在 DOM 层面的存储形态与在行为层面的整数值解析是两回事。在 freeCodeCamp 的前端中这类 HTML 挑战由 Challenges 模板 在浏览器内渲染并执行上述断言完成自动判分。小结正数 tabindex 的适用边界把本挑战与前一道tabindex0的挑战对照可以形成一条清晰的决策线元素需要按源码顺序获得键盘焦点 → 用tabindex0适用于非表单元素如前一个挑战中让p聚焦并触发:focus样式的场景需要让元素脱离源码位置、抢占焦点序列的前端典型如被 CSS 重排到视觉页首的控件→ 用tabindex1、2等正整数并接受它会覆盖默认焦点顺序的代价只需要脚本聚焦如弹窗→ 用负值-1不进入键盘 Tab 流。课程给出的告诫值得原样保留正数tabindex会重写用户预期的导航起点可能造成困惑因此在无障碍层面应当谨慎使用。这也是该挑战放在整个无障碍模块最后一道的用意——先教会你“能做”同时明确要求你“知道何时不该做”。【免费下载链接】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 响应式 Web 设计课程实战：用 tabindex 精确控制多个元素的键盘焦点顺序
freeCodeCamp 响应式 Web 设计课程实战用 tabindex 精确控制多个元素的键盘焦点顺序【免费下载链接】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”是响应式 Web 设计Responsive Web Design超区块的收尾模块而本模块的最后一道挑战正是讲解tabindex的正整数值如何指定多个元素的键盘焦点Tab遍历顺序。读完后你将掌握tabindex三种取值正数、0、负数各自对应的焦点行为差异能按照“正数序列 → 默认元素 →tabindex0元素”的规则手工排布页面的 Tab 导航流并完整复现课程练习在一个名言页面上让搜索框和提交按钮成为键盘用户最先接触到的两个控件同时理解为什么正数tabindex在无障碍实践中需要谨慎使用。挑战在课程体系中的位置该挑战文件位于 applied-accessibility 模块模块标题为 “Use tabindex to Specify the Order of Keyboard Focus for Several Elements”使用 tabindex 指定多个元素的键盘焦点顺序challengeType为 0属于 HTML 交互式挑战。从 模块结构文件 可以确认它是applied-accessibility区块 22 道挑战中的最后一道其前一道挑战 Use tabindex to Add Keyboard Focus to an Element 刚刚讲完了tabindex0与负值的基础用法。整个区块又隶属于 responsive-web-design 超区块结构 的一部分帮助类别标注为 HTML-CSS。tabindex 的三种取值先看全景再聚焦正数要理解本挑战需要先把tabindex的完整语义放在一起看这部分承接前一道挑战的内容取值行为正整数1、2、…元素进入自定义 Tab 序列按数值升序优先于默认焦点流0元素可被键盘聚焦按 HTML 源码位置参与默认焦点流负数通常为 -1元素可以被程序化聚焦但不能通过键盘 Tab 到达默认情况下链接、表单控件等天然可聚焦元素会按照它们在 HTML 源码中出现的顺序获得焦点。给div、span、p这类非表单元素加上tabindex0可以使其按源码位置加入默认焦点流而负值典型为 -1一般用于弹窗等需要由脚本调用focus()的场景。本挑战聚焦的就是正整数这一支当tabindex的值设置为 1 或更大的正数时它指定了元素的精确 Tab 顺序。正数 tabindex 的焦点顺序规则核心行为可以归纳为一条遍历规则值为tabindex1的元素最先获得键盘焦点之后依次循环经过tabindex2、tabindex3等按数值升序排列的元素遍历完所有正数序列后才轮到默认可聚焦元素以及tabindex0的元素这部分恢复按 HTML 源码顺序遍历。课程给出的最简示例是div tabindex1I get keyboard focus, and I get it first!/divdiv tabindex2I get keyboard focus, and I get it second!/div按规则第一个div先于第二个div获得焦点即使它们在源码中的位置被其他元素分隔也不影响这个顺序。需要特别注意的是这种设定方式会覆盖默认的焦点顺序默认顺序以 HTML 源码为准。如果键盘用户预期从页面顶部自然开始导航却被直接“拽”到页面中部的某个控件体验会相当混乱。因此课程原文的结论是这种技巧在某些场景下确有必要但从无障碍角度讲应用之前务必谨慎。实战练习让搜索框成为 Tab 流的前两项挑战设定了一个具体场景Camper Cat 在他的 “Inspirational Quotes”励志名言页面上有一个搜索框他计划用 CSS 把它定位到页面右上角。由于视觉上它被移到了页首他希望搜索输入框和提交按钮成为 Tab 顺序中的前两项——这正是正数tabindex的典型适用场景视觉位置与源码位置解耦后用焦点顺序把两者重新对齐。具体要求给search输入框添加tabindex1给submit输入框添加tabindex2。初始代码seed中form部分留了两个空行待填写body div tabindex1 classoverlay/div header h1Even Deeper Thoughts with Master Camper Cat/h1 nav ul lia hrefHome/a/li lia hrefBlog/a/li lia hrefTraining/a/li /ul /nav /header form label forsearchSearch:/label input typesearch namesearch idsearch input typesubmit namesubmit valueSubmit idsubmit /form h2Inspirational Quotes/h2 blockquote pldquo;Theres no Theory of Evolution, just a list of creatures Ive allowed to live.rdquo;br - Chuck Norris/p /blockquote blockquote pldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.rdquo;br - TMNT/p /blockquote footercopy; 2018 Camper Cat/footer /body style body { height: 100%; margin: 0 !important; padding: 8px; } .overlay { margin: -8px; position: absolute; width: 100%; height: 100%; } /style标准解法solutions只在两个input上各加一个属性其余保持不动form label forsearchSearch:/label input tabindex1 typesearch namesearch idsearch input tabindex2 typesubmit namesubmit valueSubmit idsubmit /formoverlay 元素的作用课程说明中还有一个容易忽略的细节某些浏览器在用户点击页面上某个元素后可能会把焦点起点放到 Tab 顺序的中间位置。为了保证键盘用户总能从 Tab 顺序的起点开始页面里额外添加了一个元素来承担这个职责——也就是 seed 开头那个div tabindex1 classoverlay/div。从源码结构看它以绝对定位铺满整个视口position: absolute; width: 100%; height: 100%配合负margin抵消 body 内边距并且自身也持有tabindex1且位于所有其他正数焦点元素之前。这样无论上一次点击把焦点带到哪里下一次 Tab 都能回到序列头部保证“先搜索框、后提交按钮”的练习结果稳定可复现。自动化校验hints 断言如何验证你的修改该挑战附带了四条自动化断言它们也是理解验收标准最直观的方式// 1. search 输入框必须存在 tabindex 属性 assert.isNotNull(document.querySelector(#search)?.getAttribute(tabindex)); // 2. submit 输入框必须存在 tabindex 属性 assert.isNotNull(document.querySelector(#submit)?.getAttribute(tabindex)); // 3. search 的 tabindex 值必须为字符串 1 assert.equal(document.querySelector(#search)?.getAttribute(tabindex), 1); // 4. submit 的 tabindex 值必须为字符串 2 assert.equal(document.querySelector(#submit)?.getAttribute(tabindex), 2);注意后两条断言比较的是字符串1和2——HTML 属性取回的值始终是字符串这提醒我们tabindex在 DOM 层面的存储形态与在行为层面的整数值解析是两回事。在 freeCodeCamp 的前端中这类 HTML 挑战由 Challenges 模板 在浏览器内渲染并执行上述断言完成自动判分。小结正数 tabindex 的适用边界把本挑战与前一道tabindex0的挑战对照可以形成一条清晰的决策线元素需要按源码顺序获得键盘焦点 → 用tabindex0适用于非表单元素如前一个挑战中让p聚焦并触发:focus样式的场景需要让元素脱离源码位置、抢占焦点序列的前端典型如被 CSS 重排到视觉页首的控件→ 用tabindex1、2等正整数并接受它会覆盖默认焦点顺序的代价只需要脚本聚焦如弹窗→ 用负值-1不进入键盘 Tab 流。课程给出的告诫值得原样保留正数tabindex会重写用户预期的导航起点可能造成困惑因此在无障碍层面应当谨慎使用。这也是该挑战放在整个无障碍模块最后一道的用意——先教会你“能做”同时明确要求你“知道何时不该做”。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考