[譯] 如何使用 HTML tabindex 屬性

原文連接：How and when to use the tabindex attribute，by Ire Aderinokun（有刪改）

tabindex 屬性控制兩件事情：

1. 元素是否能聚焦：經過鍵盤這類輸入設備，或者經過 JS focus() 方法
2. 元素何時能聚焦：在用戶經過鍵盤與頁面交互時

聚焦順序

HTML 默認有 6 個元素支持聚焦：

• 帶 href 屬性的 <a> 標籤
• 帶 href 屬性的 <link> 標籤
• <button>
• <input>（排除 type="hidden"）
• <select>
• <textarea>

這些元素默認都能使用鍵盤 Tab 鍵，以及 JS focus 方法聚焦。

document.querySelector("a").focus();
複製代碼

試圖非可聚焦元素上聚焦，不會起做用。

document.querySelector("div").focus(); // Will not work
複製代碼

在使用 Tab 鍵聚焦元素時，聚焦順序等於元素在源碼文件中的出現順序。 儘管默認行爲涵蓋了咱們所需的大多數交互需求。但在某些狀況下，咱們可能有移除、添加聚焦，或者從新安排項目聚焦順序的須要，這個時候就要 tabindex 來幫忙了。

如何使用 tabindex

tabindex 能夠用在幾乎全部的元素上，無論默認這些元素時候支持聚焦。tabindex 屬性值必須是一個有效的整數——負值、0 和正值。

tabindex 負值

使用 tabindex 負值（好比 tabindex="-1"）的元素，就不能使用 Tab 鍵聚焦了。

<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<button type="button" tabindex="-1">I won’t be in focus :(</button>
<button type="button">I’ll be in focus last</button>
複製代碼

效果：

負值取 -1 取 -9999 沒有區別，但爲了可讀性和一致性考慮，仍是推薦一直使用 -1。

tabindex="0"

使用 tabindex="0" 的元素會插入到默認的聚焦順序之中，聚焦順序與在源碼中出現的順序有關。tabindex="0" 一般應用在不可聚焦的元素上，這些元素使用它以後，就好像本來就是可聚焦的同樣。

<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<div tabindex="0">I’m a DIV and will be in focus second</div>
<button type="button">I’ll be in focus last</button>
複製代碼

效果：

tabindex 正值

使用 tabindex 正值的元素的聚焦位置會放在沒有設置 tabindex 屬性的元素前面，並且聚焦順序是從小大到的（好比下面的兩個，聚焦順序就是 tabindex="1" -> tabindex="500"）

<button type="button" tabindex="1">I’m the first focusable item on the page</button>
<button type="button" tabindex="500">I’m the second</button>
複製代碼

效果：

tabindex 與 JS 編程聚焦

使用了 tabindex 屬性的元素均可以 JS 編程聚焦。咱們以使用了 tabindex 負值的 <div> 爲例：

<div tabindex="-1">I'm a div</div>
複製代碼

若是使用 Tab 鍵嘗試訪問，發現並不行。

但咱們可使用 focus() 方法聚焦元素。

<button type="button" onclick="document.getElementById('demo-div').focus();">
        Click me to focus the DIV
</button>
<div id="demo-div" tabindex="-1">I'm a div</div>
複製代碼

效果：

什麼時候使用 tabindex

tabindex 屬性可能很是有用，但若是使用不正確，可能會形成破壞性後果。 下面給出了不一樣 tabindex  值類型的使用場景。

什麼時候使用 tabindex="-1"

前面已經介紹，tabindex 負值將把元素從焦點序列中刪除，但可使用編程的方式對元素作聚焦。

模態框就是一個很好的說明例子。模態容器一般是不可聚焦的元素，像 <div> 或 <section> 這些元素，當模式窗口打開時，咱們會將焦點移到該窗口，以便屏幕閱讀器讀其內容。可是，咱們又不但願模式容器接受 Tab 聚焦。這時就可使用一個 tabindex 負值來實現。

<div id="modal" tabindex="-1">
    <!-- Modal content -->
</div>

<script> function openModal() { document.getElementById("modal").focus(); // Other stuff to show modal } </script>
複製代碼

什麼時候使用 tabindex="0"

tabindex="0"  一般用來爲不可聚焦元素添加可聚焦屬性。

一個比較好的用例就是在使用自定義元素的時候。好比，咱們在建立一個自定義按鈕元素，因爲它不是 <button>，所以默認它是沒法聚焦的。咱們可使用 tabindex 屬性爲它添加聚焦功能，就能像常規按鈕同樣會被安排焦點順序了。

<my-custom-button tabindex="0">Click me!</my-custom-button>
複製代碼

什麼時候使用 tabindex 正值

幾乎找不出使用 tabindex 正值的理由，實際上它被認爲是反模式（anti-pattern）。若是發現須要使用正值來修改元素的聚焦順序，那麼你實際須要作的多是要修改 HTML 元素的源碼順序了。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）