freeCodeCamp 響應(yīng)式 Web 設(shè)計(jì)課程實(shí)戰(zhàn)用 tabindex 精確控制多個(gè)元素的鍵盤焦點(diǎn)順序【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在 freeCodeCamp 的課程體系中“應(yīng)用無障礙Applied Accessibility”是響應(yīng)式 Web 設(shè)計(jì)Responsive Web Design超區(qū)塊的收尾模塊而本模塊的最后一道挑戰(zhàn)正是講解tabindex的正整數(shù)值如何指定多個(gè)元素的鍵盤焦點(diǎn)Tab遍歷順序。讀完后你將掌握tabindex三種取值正數(shù)、0、負(fù)數(shù)各自對應(yīng)的焦點(diǎn)行為差異能按照“正數(shù)序列 → 默認(rèn)元素 →tabindex0元素”的規(guī)則手工排布頁面的 Tab 導(dǎo)航流并完整復(fù)現(xiàn)課程練習(xí)在一個(gè)名言頁面上讓搜索框和提交按鈕成為鍵盤用戶最先接觸到的兩個(gè)控件同時(shí)理解為什么正數(shù)tabindex在無障礙實(shí)踐中需要謹(jǐn)慎使用。挑戰(zhàn)在課程體系中的位置該挑戰(zhàn)文件位于 applied-accessibility 模塊模塊標(biāo)題為 “Use tabindex to Specify the Order of Keyboard Focus for Several Elements”使用 tabindex 指定多個(gè)元素的鍵盤焦點(diǎn)順序challengeType為 0屬于 HTML 交互式挑戰(zhàn)。從 模塊結(jié)構(gòu)文件 可以確認(rèn)它是applied-accessibility區(qū)塊 22 道挑戰(zhàn)中的最后一道其前一道挑戰(zhàn) Use tabindex to Add Keyboard Focus to an Element 剛剛講完了tabindex0與負(fù)值的基礎(chǔ)用法。整個(gè)區(qū)塊又隸屬于 responsive-web-design 超區(qū)塊結(jié)構(gòu) 的一部分幫助類別標(biāo)注為 HTML-CSS。tabindex 的三種取值先看全景再聚焦正數(shù)要理解本挑戰(zhàn)需要先把tabindex的完整語義放在一起看這部分承接前一道挑戰(zhàn)的內(nèi)容取值行為正整數(shù)1、2、…元素進(jìn)入自定義 Tab 序列按數(shù)值升序優(yōu)先于默認(rèn)焦點(diǎn)流0元素可被鍵盤聚焦按 HTML 源碼位置參與默認(rèn)焦點(diǎn)流負(fù)數(shù)通常為 -1元素可以被程序化聚焦但不能通過鍵盤 Tab 到達(dá)默認(rèn)情況下鏈接、表單控件等天然可聚焦元素會(huì)按照它們在 HTML 源碼中出現(xiàn)的順序獲得焦點(diǎn)。給div、span、p這類非表單元素加上tabindex0可以使其按源碼位置加入默認(rèn)焦點(diǎn)流而負(fù)值典型為 -1一般用于彈窗等需要由腳本調(diào)用focus()的場景。本挑戰(zhàn)聚焦的就是正整數(shù)這一支當(dāng)tabindex的值設(shè)置為 1 或更大的正數(shù)時(shí)它指定了元素的精確 Tab 順序。正數(shù) tabindex 的焦點(diǎn)順序規(guī)則核心行為可以歸納為一條遍歷規(guī)則值為tabindex1的元素最先獲得鍵盤焦點(diǎn)之后依次循環(huán)經(jīng)過tabindex2、tabindex3等按數(shù)值升序排列的元素遍歷完所有正數(shù)序列后才輪到默認(rèn)可聚焦元素以及tabindex0的元素這部分恢復(fù)按 HTML 源碼順序遍歷。課程給出的最簡示例是div tabindex1I get keyboard focus, and I get it first!/divdiv tabindex2I get keyboard focus, and I get it second!/div按規(guī)則第一個(gè)div先于第二個(gè)div獲得焦點(diǎn)即使它們在源碼中的位置被其他元素分隔也不影響這個(gè)順序。需要特別注意的是這種設(shè)定方式會(huì)覆蓋默認(rèn)的焦點(diǎn)順序默認(rèn)順序以 HTML 源碼為準(zhǔn)。如果鍵盤用戶預(yù)期從頁面頂部自然開始導(dǎo)航卻被直接“拽”到頁面中部的某個(gè)控件體驗(yàn)會(huì)相當(dāng)混亂。因此課程原文的結(jié)論是這種技巧在某些場景下確有必要但從無障礙角度講應(yīng)用之前務(wù)必謹(jǐn)慎。實(shí)戰(zhàn)練習(xí)讓搜索框成為 Tab 流的前兩項(xiàng)挑戰(zhàn)設(shè)定了一個(gè)具體場景Camper Cat 在他的 “Inspirational Quotes”勵(lì)志名言頁面上有一個(gè)搜索框他計(jì)劃用 CSS 把它定位到頁面右上角。由于視覺上它被移到了頁首他希望搜索輸入框和提交按鈕成為 Tab 順序中的前兩項(xiàng)——這正是正數(shù)tabindex的典型適用場景視覺位置與源碼位置解耦后用焦點(diǎn)順序把兩者重新對齊。具體要求給search輸入框添加tabindex1給submit輸入框添加tabindex2。初始代碼seed中form部分留了兩個(gè)空行待填寫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標(biāo)準(zhǔn)解法solutions只在兩個(gè)input上各加一個(gè)屬性其余保持不動(dòng)form label forsearchSearch:/label input tabindex1 typesearch namesearch idsearch input tabindex2 typesubmit namesubmit valueSubmit idsubmit /formoverlay 元素的作用課程說明中還有一個(gè)容易忽略的細(xì)節(jié)某些瀏覽器在用戶點(diǎn)擊頁面上某個(gè)元素后可能會(huì)把焦點(diǎn)起點(diǎn)放到 Tab 順序的中間位置。為了保證鍵盤用戶總能從 Tab 順序的起點(diǎn)開始頁面里額外添加了一個(gè)元素來承擔(dān)這個(gè)職責(zé)——也就是 seed 開頭那個(gè)div tabindex1 classoverlay/div。從源碼結(jié)構(gòu)看它以絕對定位鋪滿整個(gè)視口position: absolute; width: 100%; height: 100%配合負(fù)margin抵消 body 內(nèi)邊距并且自身也持有tabindex1且位于所有其他正數(shù)焦點(diǎn)元素之前。這樣無論上一次點(diǎn)擊把焦點(diǎn)帶到哪里下一次 Tab 都能回到序列頭部保證“先搜索框、后提交按鈕”的練習(xí)結(jié)果穩(wěn)定可復(fù)現(xiàn)。自動(dòng)化校驗(yàn)hints 斷言如何驗(yàn)證你的修改該挑戰(zhàn)附帶了四條自動(dòng)化斷言它們也是理解驗(yàn)收標(biāo)準(zhǔn)最直觀的方式// 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 層面的存儲(chǔ)形態(tài)與在行為層面的整數(shù)值解析是兩回事。在 freeCodeCamp 的前端中這類 HTML 挑戰(zhàn)由 Challenges 模板 在瀏覽器內(nèi)渲染并執(zhí)行上述斷言完成自動(dòng)判分。小結(jié)正數(shù) tabindex 的適用邊界把本挑戰(zhàn)與前一道tabindex0的挑戰(zhàn)對照可以形成一條清晰的決策線元素需要按源碼順序獲得鍵盤焦點(diǎn) → 用tabindex0適用于非表單元素如前一個(gè)挑戰(zhàn)中讓p聚焦并觸發(fā):focus樣式的場景需要讓元素脫離源碼位置、搶占焦點(diǎn)序列的前端典型如被 CSS 重排到視覺頁首的控件→ 用tabindex1、2等正整數(shù)并接受它會(huì)覆蓋默認(rèn)焦點(diǎn)順序的代價(jià)只需要腳本聚焦如彈窗→ 用負(fù)值-1不進(jìn)入鍵盤 Tab 流。課程給出的告誡值得原樣保留正數(shù)tabindex會(huì)重寫用戶預(yù)期的導(dǎo)航起點(diǎn)可能造成困惑因此在無障礙層面應(yīng)當(dāng)謹(jǐn)慎使用。這也是該挑戰(zhàn)放在整個(gè)無障礙模塊最后一道的用意——先教會(huì)你“能做”同時(shí)明確要求你“知道何時(shí)不該做”?！久赓M(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考