「單頁網站/RWD」修訂間的差異
跳至導覽
跳至搜尋
（→主要元件） |
|||
| 第11行： | 第11行： | ||
==主要元件== | ==主要元件== | ||
| + | |||
| + | ===開關=== | ||
| + | <pre><input type='checkbox' id='menu-switcher' aria-label='切換主要選單' aria-controls='xo-globalnav' /> | ||
| + | <label id='menu-toggle' for='menu-switcher' title='開啟／關閉選單'><span class='hamburger-line' aria-hidden='true'></span></label></pre> | ||
| + | |||
<ol> | <ol> | ||
<li> menu-switcher：是一個 input type 為 checkbox | <li> menu-switcher：是一個 input type 為 checkbox | ||
於 2026年10月20日 (二) 20:37 的修訂
HTML,CSS
HTML
- tabindex：HTML 的全局屬性(Global Attribute)，控制網頁元素是否能接收鍵盤焦點(如按下 Tab 鍵)以及鍵盤導航的順序。
- aria-label：告訴讀屏軟件某個元素是什麼。
- aria-controls：識別其內容或呈現受到設定該屬性之元素所控制的元素
主要元件
開關
<input type='checkbox' id='menu-switcher' aria-label='切換主要選單' aria-controls='xo-globalnav' /> <label id='menu-toggle' for='menu-switcher' title='開啟／關閉選單'><span class='hamburger-line' aria-hidden='true'></span></label>
- menu-switcher：是一個 input type 為 checkbox