分頁
這個食譜模式演示了用於顯示分頁的導航模式，使用者可以在其中移動內容頁面，例如搜尋結果。
依賴項
分頁模式通常以一行顯示專案。為了確保使用螢幕閱讀器的人能夠理解分頁，我們將這些專案標記為 <nav> 元素內的列表，然後使用 CSS 將佈局以視覺方式顯示為一行。
通常，分頁元件將水平居中於內容下方。
示例
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
html
<nav aria-label="pagination">
<ul class="pagination">
<li>
<a href="">
<span aria-hidden="true">«</span>
<span class="visuallyhidden">previous set of pages</span>
</a>
</li>
<li>
<a href=""><span class="visuallyhidden">page </span>1</a>
</li>
<li>
<a href="" aria-current="page">
<span class="visuallyhidden">page </span>2
</a>
</li>
<li>
<a href=""> <span class="visuallyhidden">page </span>3 </a>
</li>
<li>
<a href=""> <span class="visuallyhidden">page </span>4 </a>
</li>
<li>
<a href="">
<span class="visuallyhidden">next set of pages</span
><span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
css
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
nav {
border-top: 1px solid #eeeeee;
margin-top: 1em;
padding-top: 0.5em;
font: 1.2em sans-serif;
display: flex;
justify-content: center;
}
.pagination {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.pagination li {
margin: 0 1px;
}
.pagination a {
display: block;
padding: 0.5em 1em;
border: 1px solid #999999;
border-radius: 0.2em;
text-decoration: none;
}
.pagination a[aria-current="page"] {
background-color: #333333;
color: white;
}
已做出的選擇
此模式使用 flexbox 佈局 — 一個 flex 容器巢狀在另一個容器中。<nav> 元素被指定為 flex 容器，以便我們可以在其中使用 justify-content 屬性將列表居中。
列表本身也成為一個 flex 容器，將專案排列成一行。為了使專案之間留有間距，我們可以在 flex 專案上使用 margin，或者在 flex 容器上新增 gap。
css
.pagination {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2px;
}
可訪問性考慮
我們希望確保使用螢幕閱讀器的人理解此導航的功能以及單擊連結後將前往何處。為此，我們在 <nav> 元素上添加了 aria-label="pagination"。
我們還添加了一些額外的內容，這些內容將被螢幕閱讀器讀取，但在視覺上是隱藏的，並在分頁箭頭設定了 aria-hidden 屬性。
本文件末尾的“另請參閱”部分包含指向相關輔助功能主題的連結。
另見
justify-content,gap- 瞭解您的 ARIA：“hidden”與“none” (2018)
- 僅供螢幕閱讀器使用者使用的不可見內容（透過 WebAIM.org (2020)）
- 編寫兼顧輔助功能的 CSS (2017)
- a11y 樣式指南：分頁