面包屑導(dǎo)航符合規(guī)范兼容原則的落地方法

一、語(yǔ)義代碼規(guī)范（SEO + 瀏覽器兼容）

1. 使用標(biāo)準(zhǔn) HTML 語(yǔ)義標(biāo)簽
   采用 <nav aria-label="面包屑導(dǎo)航"> 包裹整體，內(nèi)部用 <ol> 有序列表承載每一層級(jí)，<li> 包裹單項(xiàng)，不使用純 div 堆砌，讓瀏覽器、爬蟲(chóng)識(shí)別導(dǎo)航結(jié)構(gòu)。
2. 引入面包屑結(jié)構(gòu)化數(shù)據(jù)（Schema）
   添加 BreadcrumbList 結(jié)構(gòu)化標(biāo)記，搜索引擎可直接抓取層級(jí)路徑，搜索結(jié)果展示路徑錨點(diǎn)，兼容各大搜索引擎收錄規(guī)則。
3. 鏈接地址真實(shí)有效
   每一級(jí) a 標(biāo)簽指向?qū)��?yīng)分類(lèi)頁(yè)面，無(wú)空鏈接、死鏈接、跳轉(zhuǎn)錯(cuò)誤，全站路徑與后臺(tái)欄目架構(gòu)一一對(duì)應(yīng)。

二、無(wú)障礙 WCAG 規(guī)范（讀屏設(shè)備、殘障用戶兼容）

1. 完善 ARIA 無(wú)障礙屬性

• 外層 nav 添加 aria-label="頁(yè)面位置導(dǎo)航"；
• 當(dāng)前頁(yè)面項(xiàng)添加 aria-current="page"，讀屏軟件自動(dòng)識(shí)別當(dāng)前位置；
• 分隔符不使用純視覺(jué)符號(hào)，可搭配 aria-hidden="true" 避免讀屏重復(fù)朗讀箭頭。

2. 色彩對(duì)比度達(dá)標(biāo)
   文字與背景對(duì)比度≥4.5:1，淺灰弱文字禁止用于淺色背景，兼顧色弱、視力不佳用戶識(shí)別。
3. 鍵盤(pán)操作兼容
   面包屑鏈接支持 Tab 鍵盤(pán)切換焦點(diǎn)，focus 狀態(tài)有清晰高亮樣式，僅靠鍵盤(pán)可完整操作跳轉(zhuǎn)。

三、多終端響應(yīng)式兼容（PC / 平板 / 手機(jī)）

1. 統(tǒng)一全局位置規(guī)則
   全站固定放在主導(dǎo)航下方、頁(yè)面標(biāo)題上方，不隨意更換擺放位置，形成統(tǒng)一用戶認(rèn)知。
2. 超長(zhǎng)層級(jí)折疊適配

• PC 端：層級(jí)過(guò)多時(shí)省略中間層級(jí)，顯示「首頁(yè) ... 二級(jí)分類(lèi) 當(dāng)前頁(yè)」；
• 移動(dòng)端：自動(dòng)收縮，只保留首頁(yè)、上一級(jí)、當(dāng)前頁(yè)，防止文字橫向溢出、擠壓布局。

3. 尺寸自適應(yīng)
   字號(hào)、內(nèi)外邊距跟隨屏幕縮放，移動(dòng)端加大鏈接點(diǎn)擊熱區(qū)，防止誤觸。

四、全站視覺(jué)規(guī)范統(tǒng)一（產(chǎn)品設(shè)計(jì)體系兼容）

1. 統(tǒng)一視覺(jué)組件規(guī)則
   全站固定一套分隔符（> //）、字號(hào)、色值、間距，不出現(xiàn)多個(gè)頁(yè)面多種面包屑樣式。
2. 樣式輕量化兼容
   不使用復(fù)雜漸變、陰影、動(dòng)效，低版本瀏覽器也能正常渲染，避免樣式錯(cuò)亂、遮擋內(nèi)容。

五、業(yè)務(wù)場(chǎng)景規(guī)則兼容

1. 區(qū)分頁(yè)面是否需要面包屑
   首頁(yè)、彈窗、單頁(yè)落地頁(yè)、二級(jí)以?xún)?nèi)淺層級(jí)頁(yè)面不展示，統(tǒng)一業(yè)務(wù)判斷邏輯，全站規(guī)則一致。
2. 不同頁(yè)面類(lèi)型邏輯統(tǒng)一
   資訊、商品、文檔頁(yè)面面包屑生成規(guī)則標(biāo)準(zhǔn)化，不出現(xiàn)同層級(jí)頁(yè)面路徑寫(xiě)法不一致的問(wèn)題。

精簡(jiǎn)背誦版（答題專(zhuān)用）

1. 代碼語(yǔ)義化，使用 nav、ol 標(biāo)簽，添加面包屑結(jié)構(gòu)化數(shù)據(jù)，適配搜索引擎；
2. 遵循無(wú)障礙標(biāo)準(zhǔn)，配置 ARIA 屬性、滿足色彩對(duì)比度、支持鍵盤(pán)操作，兼容讀屏設(shè)備；
3. 做響應(yīng)式適配，PC 與移動(dòng)端超長(zhǎng)層級(jí)自動(dòng)折疊，布局不溢出；
4. 全站視覺(jué)、擺放位置、交互樣式統(tǒng)一，適配全頁(yè)面設(shè)計(jì)體系；
5. 鏈接路徑真實(shí)有效，頁(yè)面展示規(guī)則統(tǒng)一，適配網(wǎng)站不同業(yè)務(wù)頁(yè)面。