如何使我的點擊可以通過鍵盤選項卡

我有這個鏈接，看起來更像是一個按鈕 - 但每當我通過鍵盤測試我的標籤導航時 - 此鏈接永遠不會，用戶也無法使用它。如何使我的點擊可以通過鍵盤選項卡

我該如何使它符合ADA標準並使用aria通過鍵盤訪問？

<div class="styles"> 
    <a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a> 
</div>

2017-10-19 bluePearl

沒有HREF就無法集中;改用''按鈕。 –

@GregMcMullen - 工作！ – bluePearl

@GregMcMullen這就是爲什麼我們有「tabindex」屬性。值「0」根據它在DOM中的位置給它一個邏輯標籤順序。無需切換到按鈕。 – Tom

您必須添加tabindex屬性。

<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>

值0給它基於DOM元素的順序上的自然標籤索引。

2017-10-19 19:19:11 Tom

有沒有在任何地方使用tabindex的垮臺？我覺得如果我要做一個html更改，那麼我將不得不確保tabindex計數是最新的。 – bluePearl

@bluePearl如果你使用值0，那麼它只是簡單地使它像它具有href屬性那樣可以聚焦。你沒有指定訂單 - 瀏覽器爲你做這件事。所以不，沒有倒臺。這是如何完成的。如果您有興趣，請查看我剛剛添加到我的答案中的其他文檔以獲取更多信息。 – Tom

當我嘗試這個 - 當我使用tabindex = 0時，我無法導航或單擊（輸入）鏈接。它變得焦點但不工作。 – bluePearl

錨元素是本地可聚焦的。您的鏈接未獲得關注的原因是因爲它沒有href屬性。

處理這個問題將是一個不存在的URL片段標識符添加到href屬性，像這樣的另一種方法：

<div class="styles"> 
    <a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a> 
</div>

2017-10-20 14:31:32 Josh

回答