---
# System prepended metadata

title: 導覽功能
tags: [無障礙]

---

<style>
.blue {
  color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜Judy Shyu]

# 🚩導覽功能
指引2.4：可導覽成功準則2.4.1：跳過區塊（A級）
## 🔰每一個網頁皆有跳到主要內容區鏈結，且為網頁上第一個可取得鍵盤焦點的鏈結
這個鏈結在 HTML 結構中需要靠前，是網頁上第一個可以被聚焦的元件
```html!
<body>
<header>
<a href="#mainContent" title="跳到主要內容" class="sr-only sr-only-focusable">跳到主要內容</a>
</header>
<main id=”#mainContent”>...
```
:::danger
__➤ 測試方式：__ 進入頁面後直接按 Tab
:::

> 稽核評量碼
> GN1240100E 在每一個頁面頂端加入一個鏈結，直接連往主要的內容區域

## 🔰跳到主要內容區鏈結
* 該連結必須是網頁中第一個可以被聚焦的元件
* 預設為隱藏的狀態，配合 `:focus-visible` 使其被聚焦時變得明顯可見（不可直接使用 `display: none;` 或 `hidden`）
* 觸發後會將焦點設定到主要內容區
* 網站中每一頁都要有！
![1701930829397](https://hackmd.io/_uploads/Bk-_wkJUp.jpg)


---

指引2.4：可導覽成功準則2.4.7：焦點可視（AA級）
## 🔰使用鍵盤操作時，網頁中的鍵盤焦點具有高可見度，可明確得知焦點所在位置
* 善用 `:focus` 和 `:focus-visible`
* `:focus`
    * 聚焦元件時會被觸發（包含滑鼠、觸控、鍵盤）
* `:focus-visible`
    * 只會用鍵盤聚焦元件時會被觸發
* [web.dev 範例](https://web.dev/articles/style-focus?hl=zh-tw)

:::danger
__➤ 測試方式：__ 鍵盤 Tab 測試
:::

> 稽核評量碼
> CS2240700E 使用者介面取得焦點時，使其鍵盤焦點指示具高可見度
![image](https://hackmd.io/_uploads/r1mL_kkIp.png)
![image](https://hackmd.io/_uploads/HkwLOJy8T.png)
