本篇文章學習之重點：
當我們使用電腦載入 Facebook 或 Twitter 的網站時，會要求註冊或是登入才能擁有瀏覽網頁的權限，這時候我們需要填寫「帳號」、「密碼」等資訊，整個操作情境是：
而這個點一下的動作，會使你的帳號欄位（也就是 input[type="text"] 元素）成為焦點，我們稱為 focus，成為焦點就可以開始打字，輸入資訊。
tab 鍵也可以讓 input 取得焦點在 WCAG 2.0 及 2.1 中，提及「頁面上的所有功能都應該可透過鍵盤操作。」，除非像是無法使用鍵盤操作的功能，如：手寫功能。
WCAG 2.1 - 2.1.1 Keyboard
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
而以上提及的臉書登入情境，有些人也許會更習慣全程使用鍵盤操作：
沒想到擁有合理的網頁焦點策略，能讓所有使用者獲得更完善的使用者體驗！這將是實踐無障礙很棒也很重要的起始點，現在就來學學吧！
首先，學會使用鍵盤瀏覽網頁，親自操作過才能更加瞭解元素的行為表現。
以維基百科為例：擁有焦點的元素，會產生一個類似邊框的線，叫做 outline ， outline 的樣式會因為瀏覽器實作而有些微差異。
Tab：正向選取對焦。Shift + Tab：反向選取對焦。方向鍵 可以在 select 元素中切換選項。
Option + Tab：正向選取對焦。Option + Shift + Tab：反向選取對焦。方向鍵 可以在 select 元素中切換選項。MacOS 可以在設定中透過修改要對焦的項目：「系統偏好設定」>「鍵盤」>「快速鍵」中，將全面鍵盤操控的選項改為「所有控制選項」設定讓 Safari 更容易瀏覽。
發現頁面上元素的焦點有其順序，而作為開發者，保持焦點跟 UI 相同的順序非常重要，這代表不論受眾是誰，都能以平等方式獲取我們在網頁上精心安排的內容。
<input>
<button>
<select>
（圖片來源：Udacity 課程）
<h1> 標籤<p>
<img>
上述元素都沒辦法透過鍵盤 focus，因為是不需與使用者互動的元素，天生無法使用 tab 獲得焦點，自然沒有自帶的 tab 順序，自然也無法用鍵盤事件處理，閱讀 W3C 文件。
WCAG 2.1 - 1.3.2 Meaningful Sequence
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
試試 tab 以下範例！
<button>First</button>
<button>Second</button>
<button>Last</button>
https://codepen.io/askie/pen/GRKwYJV?editors=1010
<button style="float: right;">First</button>
<button>Second</button>
<button>Last</button>
感覺到差異了嗎？若是倚靠鍵盤的使用者會覺得極度難用啊！所以在使用 CSS 去更動元素視覺順序都要盡量避免。
tabindex 屬性開發網頁時，有時我們會需要去調整 tab 的順序，在 HTML 中，有一個叫做 tabindex 的屬性可以幫我們辦到這件事情，那麼什麼時候會需要呢？比如說當我們刻一些組件，如下拉式選單（Dropdown）、僅在顯示時需要 focus 的燈箱（Modal）...等。
tabindex 介紹tabindex="-1"
focus() 方法取得焦點。tabindex="0"
focus() 方法取得焦點。tabindex="5" 這是 Anti-pattern，不建議！
tab 時，都會成為最開始 focus 的那一個，改變了一般瀏覽流程的認知順序。
搜尋無障礙資料，會發現很多教學跟文章內容提及這個屬性，但通常不建議針對 <h1> 主標題、 <p> 段落文字、 <img> 圖片等內容加上 tabindex 屬性喔！針對「需要和使用者互動的元件」加上「對焦的行為」才是最合適的，比如：按鈕、頁籤、搜尋框或任何要使用者輸入資料的元素。
tabindex 之前，不妨想想：這個東西需要與使用者「互動（Interact）」嗎？至於 tabindex 在組件上該怎麼實作，就留到之後的實作時間吧！
註：即使覺得圖片很重要，但只要加上合適的替代文字，螢幕閱讀器的使用者一樣能知道你要表達什麼內容。
搜尋無障礙資料，會發現很多教學跟文章內容提及這個屬性，但通常不建議針對 主標題、 段落文字、 圖片等內容加上 tabindex 屬性喔！針對「需要和使用者互動的元件」加上「對焦的行為」才是最合適的，比如：按鈕、頁籤、搜尋框或任何要使用者輸入資料的元素。
使用者應該會需要知道文章內容吧？
如果是大功能區標題建議使用嗎？
iThome鐵人賽
看影片追技術