「單頁網站/RWD」修訂間的差異
跳至導覽
跳至搜尋
（→主要元件） |
（→主要元件） |
||
| 第14行： | 第14行： | ||
===開關=== | ===開關=== | ||
<pre><input type='checkbox' id='menu-switcher' aria-label='切換主要選單' aria-controls='xo-globalnav' /> | <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> | + | <label id='menu-toggle' for='menu-switcher' title='開啟／關閉選單'> |
| + | <span class='hamburger-line' aria-hidden='true'></span> | ||
| + | </label></pre> | ||
<ol> | <ol> | ||
於 2026年10月20日 (二) 20:38 的修訂
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