<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)