如同您在「連結」一文中所學,含有 href
屬性的 <a>
元素會建立連結,讓使用者透過點選或輕觸來追蹤。在「清單」一文中,您已瞭解如何建立內容清單。在本單元中,您將瞭解如何將連結清單分組,以建立導覽功能。
導覽有幾種類型,且可透過多種方式顯示。文字中連結至同一網站內其他網頁的命名錨定標記,視為本機導覽。當本地導覽包含一系列連結,顯示目前網頁的階層與網站結構相關,或是使用者沿著這些網頁前往目前網頁時,就稱為導覽標記。
頁面目錄是另一種本地導覽功能。網站地圖是指包含網站上每個網頁階層連結的網頁。導覽至網站頂層頁面的導覽選單 (可能會出現在每個頁面上) 稱為全域導覽。全域導覽可透過多種方式顯示,包括導覽列、下拉式選單和彈出式選單。同一個網站可能會根據可視區域大小,以不同方式顯示全域導覽功能。
請務必確保使用者可以透過最少的點擊次數前往網站上的任何網頁,同時確保導覽介面直覺易懂,不會過於繁雜。不過,導覽元素並沒有特定規定。MachineLearningWorkshop.com 是單頁網站,因此在右上方設有本地導覽列,這是多頁網站通常放置全域導覽列的位置。
「跳至內容」連結
有些網站會提供「跳至內容」連結,通常是焦點順序中的第一個元素。如下所示:
<a href="#main" class="skip-link button">Skip to main</a>
當使用者點選或將焦點移至此元素,並按下 Enter
時,系統會捲動網頁,並將焦點移至具有 main
ID 的元素 (可能是主要內容)。
<main id="main">
為了提升可用性和無障礙性,請務必讓使用者略過每個網頁重複出現的內容區塊,例如共用標題和主要導覽項目。有了跳轉連結,當鍵盤使用者按下 tab
時,就能快速前往網頁上的新內容。這樣一來,使用者就不必在繁雜的選單中切換分頁。
大多數設計師都不喜歡在頁面頂端顯示這類連結。您可以隱藏該連結。不過,請注意,當連結獲得焦點時 (也就是使用者透過鍵盤在頁面上瀏覽連結時),連結必須對使用者可見。
使用類似 .visually-hidden:not(:focus):not(:active)
的選取器,只在非聚焦和非活動狀態下隱藏內容。
如同所有連結文字,名稱應清楚指出連結會將使用者帶往何處。連結目標應為網頁主要內容的開頭。
目錄
主要內容的第一個元素是 <h1>
標題,其中包含此頁面的標題:<h1>Navigation</h1>
。主要標題後方會簡短說明本教學課程的內容。
在較小的螢幕上,目錄會顯示在標題之後。在較大的螢幕上,顯示在靠右對齊的側欄中。
<nav>
是用於導覽區段的最佳元素。它會自動通知螢幕閱讀器和搜尋引擎,某個區塊的角色為 navigation
,也就是地標角色。
請加入 aria-label
屬性提供導覽用途的簡短說明。在這種情況下,該屬性的值會與「On this page」文字重複。如要參照可見文字,請改用 aria-labelledby
。
使用 id
時,可能會如下所示:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
...
</nav>
除了減少重複內容,可見文字也會由翻譯服務翻譯,但屬性值可能不會。如果有適當的標籤文字,請盡可能使用該文字,而非屬性文字。
「本頁內容」導覽是指目錄。如要使用 aria-label
,請提供該內容,而不要重複顯示的文字:
<nav aria-label="Table of Contents">
<p>On this page</p>
...
</nav>
如要在元素上提供無障礙名稱,請不要加入元素名稱。螢幕閱讀器會向使用者提供元素名稱。舉例來說,使用 <nav>
元素時,請勿加入「navigation」一詞,因為語意元素中已包含該資訊。
雖然導覽項目不一定要在清單中建立巢狀結構,但使用清單可讓螢幕閱讀器使用者瞭解導覽中有多少清單項目,進而知道連結的數量。
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
<ul role="list">
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</nav>
避免變更分頁順序
目錄可能會顯示在標題後方、較小的螢幕上,或是在右側對齊的側欄中。加入兩組相同的導覽選單,但只顯示其中一個,就是反模式。
我們使用 CSS 將導覽列顯示為側欄,適用於寬度超過 1254 像素的頁面。
雖然使用者習慣在改變裝置或放大字型時,會喜歡內容的回應式和位置,但並不知道分頁順序會隨著改變。網頁版面配置必須能讓使用者存取、可預測,且在整個網站上保持一致。在這種情況下,目錄的位置無法預測。
網頁導覽標記
導覽標記可提供次要導覽功能,協助使用者瞭解自己在網站上的所在位置。導覽標記通常會指出目前文件的網址階層,以及目前網頁在網站結構中的位置。
從使用者的角度來看,網站結構可能與伺服器中的檔案結構不同,沒關係。使用者不需要知道如何整理檔案,但需要能夠瀏覽內容。
麵包屑可讓使用者瞭解網站的架構。這樣一來,使用者就能使用 back
函式前往任何祖系區段,而不需要逐一瀏覽先前造訪的所有網頁。
如果網站具有階層目錄結構 (例如 web.dev),麵包屑導覽通常會包含指向首頁或主機名稱的連結,以及指向網址路徑中各個目錄的索引檔案連結。您可以選擇納入目前的網頁,但需要特別留意。
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
導覽標記的各個部分會顯示從目前網頁返回首頁的路徑,並顯示中間的每個層級。
每個 Learn HTML 模組頁面都有相同的導覽標記,可在 web.dev
的 Learn
區段中顯示 HTML
課程的階層。
程式碼應如下所示:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">web.dev</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">HTML</a>
</li>
</ol>
</nav>
<nav>
元素是地標,可告知輔助技術,以導覽標記的形式在網頁上呈現導覽標記。「導覽標記」的無障礙名稱 (透過 aria-label
提供),可在相同文件中與其他導覽地標區分導覽。
每個連結之間都會加上內容分隔符。這些分隔符可透過 CSS 產生,並顯示在每個清單項目 (從第二個開始) 之前。
[aria-label^="breadcrumbs" i] li + li::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
rotate: 45deg;
opacity: .8
}
螢幕閱讀器不會「看到」這些圖示,這是最佳做法。麵包屑連結之間的分隔符應隱藏在螢幕閱讀器中。此外,這類元素也必須與背景形成足夠的對比,這和網頁上的任何其他文字和視覺元素一樣。
我們的範例程式碼使用排序清單,因為項目會列舉,所以比未排序清單更適合。role="list"
是因為某些 CSS 顯示屬性值會移除某些元素的語義而新增。
一般而言,導覽標記的首頁連結應該會顯示「首頁」,而不是網站名稱或網站標誌。由於麵包屑位於文件頂端,因此使用這種反模式是合理的做法。
目前的頁面「導覽」未包含在麵包屑中。
目前頁面
當目前網頁包含在麵包屑中時,文字最好不是連結,且目前網頁的清單項目應包含 aria-current="page"
。如未列出,有助於指出後續的標題就是目前頁面的標題或其他符號。
讓我們看看採用這種做法的導覽標記替代版本:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
麵包屑可能與使用者前往目前網頁時所採取的線性步驟不同。到目前為止,您可以將已完成的步驟清單巢狀在 <nav>
中,但不應標示為麵包屑。
本機導覽
下一個導覽元件會顯示在大多數中型和較大尺寸的裝置上,左側欄會提供篩選列,以及「學習 HTML」中各部分的連結。這些連結和篩選列是位置導覽功能。
如果您是透過行動裝置造訪這個網站,或是螢幕較窄,則系統會在您載入這個頁面時隱藏側欄。您可以透過頂端導覽列中的
存取。在寬螢幕上顯示永久的本機導覽,與在較窄螢幕上顯示本機導覽的主要差異,在於箭頭會導回主要頂端導覽,然後關閉導覽。
這份文件的連結與本機導覽中的其他連結相同。 不過,該連結的外觀可能與其他連結略有不同,以便向視障使用者指出這是目前的頁面。因此,建議您使用 CSS 產生這種差異
您也可以使用 aria-current="page"
屬性來識別目前的網頁。讓輔助技術知道連結至目前網頁。
理想情況下,這個清單項目在本機導覽中的 HTML 應類似下列內容:
<li>
<a aria-current="page" aria-selected="true" href="/learn/html/navigation">
Navigation
</a>
</li>
全域導覽
全域導覽可前往網站的頂層網頁,且網站的每個網頁都相同。網站的全域導覽也可以由分頁組成的巢狀結構清單,這些連結會導向網站的所有子區段或其他選單。
其中可能包含標題區段、按鈕和搜尋小工具。這些額外功能並非必要。您必須在每個頁面上顯示導覽,且每個頁面都相同,當然,所有連往目前頁面的連結都必須顯示 aria-current="page"
。
全域導覽可提供一致的方式,讓使用者前往應用程式或網站中的任何位置。Google 網站的網頁頂端沒有全域導覽列。Yahoo! 是的,雖然所有主要的 Yahoo! 資源都有不同的樣式,但大部分的部分內容都相同。
新聞和體育全球導覽標頭的內容相同。但是,在運動頁面上顯示使用者圖示的對比不夠清楚,就算訪客看似完美,也能輕鬆理解。兩個區段都設有全域導覽,下方則有區段專屬的局部導覽。
與全域導覽類似,所有頁面的頁尾必須相同。但這只是唯一的相似之處。全域導覽可從產品角度,導覽至網站的所有部分。頁尾中的導覽元素沒有特定規定。
一般來說,頁尾會包含公司連結,例如法律聲明、關於公司的資訊、職缺頁面,以及相關外部來源的連結,例如社群媒體。
這個頁面的頁尾包含兩組導覽元素:三欄組成的相關 web.dev 導覽,以及單獨的 Google 條款和隱私權導覽。頁尾導覽包含如何為 web.dev 貢獻內容、web.dev 團隊提供的相關內容,以及外部社群媒體連結。
接下來要學習如何標記資料表
進行隨堂測驗
測驗您對導覽功能的瞭解程度。
哪一個元素可用來標記網站的主要導覽?
<breadcrumb>
<navigation>
<nav>
一個網頁上可以有多個導覽元素嗎?