防止標籤在地址欄中循環

Question

我意識到這可能是一個可以獨立使用的可訪問性問題，但我想知道是否有可能阻止標籤在標籤週期中訪問地址欄。

我的應用程序有另一種循環輸入區域的方法，但許多新用戶本能地嘗試使用該選項卡，並且它不像預期的那樣工作。

Answer 1

您可以使用全局tabindex attribute來控制標籤順序（以及哪些元素應該能夠獲得焦點）。

但是，您無法阻止用戶使用此屬性選項卡進入不受該頁面控制的另一個上下文（例如瀏覽器的地址欄）。 （雖然可能與JavaScript結合使用）。

對於這樣的（邪惡！）用例，您必須查看鍵盤陷阱。

WCAG 2.0的指導原則爲：2.1.2 No Keyboard Trap。在Understanding SC 2.1.2你可以找到「技術及故障」這一方針：

• F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
• FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap
• G21: Ensuring that users are not trapped in content

因此，也許你通過得到一些想法這樣一個陷阱怎麼會是可能的。

Answer 2

您可以使用Javascript並捕獲具有最高「tabindex」的元素上的「keydown」事件。如果用戶按下沒有「Shift」鍵（event.shiftKey == false）的「TAB」鍵（event.keyCode == 9），那麼只需將焦點設置爲具有最低tabindex的元素。

然後，您還需要對具有最低tabindex的元素進行相反的操作。捕獲此元素的「keydown」事件。如果用戶使用「Shift」鍵（event.shiftKey == true）按下「TAB」鍵（event.keyCode == 9），則將焦點設置爲具有最高tabindex的元素。

這將有效地防止使用TAB鍵集中地址欄。我在當前的項目中使用這種技術。

如果正確的按鍵組合被按下，不要忘記取消keydown事件！使用JQuery它是「event.preventDefault（）」。在標準的Javascript中，我相信你只是「返回false」。

下面是我用一個jQuery拉丹片段...

$('#dos-area [tabindex=' + maxTabIndex + ']').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == false) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=1]').focus(); 
     } 
    }); 
    $('#dos-area [tabindex=1]').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == true) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=' + maxTabIndex + ']').focus(); 
     } 
    }); 

也請記住，設置的tabindex = 0有哪些東西集中的順序不希望的結果。我總是記得（爲我的目的）tabindex是一個基於1的索引。

Answer 3

我曾經在tabindex 1和最後一個tabindex上添加了兩個微小的不可見元素。爲這兩個添加一個onFocus：具有tabindex 1的元素應該關注最後一個真實元素，具有最大tabindex的元素應該關注第一個真實元素。確保你把重點放在Dom上的第一個真實元素：加載。

Answer 4

我用m-albert解決方案，它的工作原理。但在我的情況下，我不控制tabindex屬性。我的意圖是將焦點放在頁面頂部的工具欄（第一個控件），當用戶離開頁面上的最後一個控件時。

$(':input:visible').last().on('keydown', function (e) { 
    if (e.keyCode == 9 && e.shiftKey == false) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     $(':input:visible', context).first().focus(); 
    } 
}); 

凡方面可以是任何jQuery對象，選擇，甚至文件，也可以忽略它。

滾動動畫當然是可選的。

Answer 5

這是一個通用的jQuery實現，您不必查找最大選項卡索引。請注意，如果您在DOM中添加或刪除元素，此代碼也可以工作。

$('body').on('keydown', function (e) { 
    var jqTarget = $(e.target); 
    if (e.keyCode == 9) { 

     var jqVisibleInputs = $(':input:visible'); 
     var jqFirst = jqVisibleInputs.first(); 
     var jqLast = jqVisibleInputs.last(); 

     if (!e.shiftKey && jqTarget.is(jqLast)) { 
      e.preventDefault(); 
      jqFirst.focus(); 
     } else if (e.shiftKey && jqTarget.is(jqFirst)) { 
      e.preventDefault(); 
      jqLast.focus(); 
     } 
    } 
}); 

但是，您應該注意，上面的代碼僅適用於可見輸入。有些元素可能會成爲文檔的主動元素，即使它們沒有被輸入，所以如果是你的情況，你應該考慮將它們添加到$(':input:visible')選擇器。

我沒有添加代碼滾動到關注要素，因爲這可能不是每個人都想要的行爲......如果你需要它，只是在調用之後將其添加到focus()