訪客從搜尋引擎直接進入文章，看完後想找同類教程，卻不知道這篇放在哪個分類。頁首的全站選單能帶他去其他地方，但未必能回答「這篇文章屬於哪一層」。麵包屑適合補上這條路徑，讓讀者回到文章的上層內容。
它顯示的是網站內容階層，例如「首頁 → 精品教程 → WordPress 實作 → 文章名稱」。這與瀏覽器的上一頁不同：讀者可能從站外進來，沒有走過那些分類頁，仍應能透過麵包屑理解目前所在位置。
先決定這篇文章真正的上層
先選一篇文章，把每一層對應到實際可開啟的頁面。「精品教程」應是教程入口，「WordPress 實作」應是列出相關教程的頁面。不要為了讓路徑看起來完整，加入不存在的分類，或把幾個同層標籤排成父子關係。
一篇文章可能同時屬於多個分類，這時要先決定主要路徑。可以依網站原有的主要分類設定，或由維護者訂下穩定的選擇方式。不要讓顯示順序隨資料庫回傳順序改變，否則同一篇文章可能今天在 WordPress，明天又像在網站營運底下。
分類太多時，先處理內容組織，再顯示麵包屑。麵包屑不能替你決定分類，也不應把所有分類塞成一長串。讀者需要的是一條可理解、可返回的路，不是文章所有屬性的集合。
把路徑放在文章標題附近
在自建示範頁中，我們把麵包屑放在文章標題上方，依序顯示首頁、精品教程、WordPress 實作及當前文章。前三層是連結，最後一層只是目前頁面的名稱。這樣讀者還沒開始閱讀，就能知道文章在教程區裡的位置。
我們點擊「WordPress 實作」後，頁面顯示相同名稱的分類入口，並列出這篇文章。這才是有用的返回路徑。若連結跳到首頁、空頁或另一個分類，就算麵包屑文字正確，訪客仍然找不到同類內容。
路徑不要比標題更搶眼。較小的字級和清楚的連結樣式就夠了，但不能淡到難以辨認。也不要把整條路徑做成一個連結，讀者點不同的層級，應該能去到不同的上層頁面。
用導覽結構表達，不只排幾個箭頭
WAI 的麵包屑模式把它視為一個有名稱的導覽區域，列出通往父層的連結。網站可以用 nav 包住有順序的項目，並給這個導覽區一個容易理解的名稱。當前頁面若是連結，可用 aria-current="page" 表示；若當前項目不是連結，模式並不要求一定加這個屬性。
<nav aria-label="麵包屑">
<ol>
<li><a href="/">首頁</a></li>
<li><a href="/tutorials/">精品教程</a></li>
<li><a href="/wordpress/">WordPress 實作</a></li>
<li><span>換主題前的選單記錄</span></li>
</ol>
</nav>上面網址是結構示例，實際套用時要換成網站真正存在的入口。斜線或箭頭只是視覺分隔，不應被誤認成另一個可點擊項目。用 CSS 呈現分隔符號時，也要檢查輔助工具的讀取方式，避免每一層都夾著重複而無意義的符號。
如果頁面本來有主要導覽、文章目錄和麵包屑，三者要用不同名稱。不要全部叫「導覽」，讓使用輔助工具的人難以分辨。文章目錄帶讀者跳到這篇文章的段落，麵包屑則帶讀者回到站內父層；兩者各自保留用途。
長標題和小螢幕怎麼處理？
先用一篇真的長標題查看換行。整條路徑可以分行，但連結文字要完整可讀，不要為了維持單行，讓前三層都變成省略號。若當前文章名稱已在下方完整顯示，網站也可縮短最後一項的顯示文字，前提是仍容易對上同一篇文章。
手機上空間較小，若完整階層過長，可以評估只保留有用的上層返回入口。GOV.UK 的麵包屑元件也提供小螢幕呈現方式；採用任何做法前，仍要確認被省略的層級不會使訪客失去重要選擇。不要只隱藏麵包屑，卻沒有其他返回分類的入口。
用鍵盤走一次路徑，焦點應能逐一停在父層連結，且看得見目前停在哪裡。最後一項若只是文字，就不必增加假的按鈕或無用途的 Tab 停留點。這篇示範以桌機路徑操作為主，手機則可依自己網站的內容長度再安排版面。
避免兩套麵包屑同時出現
WordPress 主題和 SEO 外掛可能都提供麵包屑。如果文章上方突然出現兩條相近的路徑，先查看是哪兩處輸出，再決定保留一套。不要只用 CSS 隨便藏掉其中一條，卻留下重複的導覽或兩套不同路徑，後續分類調整時容易再出現矛盾。
若現有主題提供麵包屑開關，先在測試站啟用並核對實際路徑；需要插入模板函式時，交給維護者放在適合的位置。不要把某個外掛專用的函式直接貼到另一個網站，否則外掛不存在時可能造成錯誤。
完成後拿三種文章驗一次
選一篇單一分類文章、一篇多分類文章和一篇長標題文章。分別從外部連結直接打開，確認不依賴訪客先走過分類頁；再點每個父層連結，確認名稱與落點相符。移動文章分類後，也要再看一次路徑是否跟著更新。
最後問一個很具體的問題：讀者看完這篇，能不能從路徑找到同類文章？如果父層頁只有空列表或難以辨認的名稱，下一步應修那個入口。麵包屑做得再漂亮，也不能代替一個可用的分類頁。
評論0