制作沒有href的鏈接

Question

在我工作的網站上使用了第三方腳本，用簡單的<a>替換了幾個<a href="">實例。 由於腳本的另一部分，鏈接仍然有效。 但它們不再被用戶代理視為鏈接。

我可以通過添加tabindex="0"將它們恢復到選項卡式導航順序，但是如何讓輔助技術將它們作為鏈接發布或將它們包含在頁面上所有鏈接的列表中？

添加role="link"有所幫助嗎？

我正在推動第三方改進他們的腳本，以便 href 保持不變。 但與此同時，我該如何最好地修復正在造成的損害？

更新：我無法將原始href或類似href="#"回鏈接，因為第三方代碼將不再執行其功能。 我希望他們改進他們的代碼以便我可以，但現在我需要使鏈接可以在沒有“href”的情況下訪問。

Answer 1

為了使非HREF <a>的行為像<a> （並且可以訪問），你就必須添加role=link ， tabindex=0 ，風格它看起來像一個真正的鏈接，並添加鍵盤處理程序代碼將返回視為點擊。

role="link"是不夠的； 屏幕閱讀器可能會將其報告為鏈接，但如果沒有tabindex="0"和適當的視覺樣式，視力正常的用戶將無法首先使用 Tab 鍵訪問它，並且如果沒有鍵盤事件處理程序，則只有鼠標用戶可以能夠點擊它。 （從技術上講，屏幕閱讀器用戶通常有熱鍵來模擬鼠標點擊，但只有鍵盤視力的用戶通常沒有這個選項，所以不要依賴它。）

或者，如果（如果大的話！）您正在使用的瘋狂腳本允許它，您可以嘗試在原始腳本中填充“鍵盤點擊源”（我的術語） <a> ：所以您有：

<a>foo</a>

您將其替換為：

<a><a class='shim' href="javascript:void(0)">foo</a></a>

（僅當您需要執行稍后描述的事件內容時才需要class='shim' ...）您可以在 jQuery 中使用以下內容執行此操作：（借用 Jack 的回答）

$("a:not([href])").wrapInner("<a class='shim' href='javascript:void(0)'></a>")

這是如何工作的，內部新添加的<a ...>有一個href ，因此它作為鏈接公開並且是可選項卡的。 更重要的是，如果用戶按 Tab 鍵並按回車鍵，默認的 A 行為會將鍵盤輸入轉換為click事件。 這個特定的 A 有一個返回 undefined/void(0) 的href ，所以沒有實際的導航發生，但點擊事件仍然會冒泡到原始 A，它開始對其采取行動。

（這是一個簡潔的模式，允許一些父元素——通常是 DIV 或類似元素——來處理點擊事件，添加一個可以從鍵盤獲取點擊事件的子 tabbable A 為您提供鼠標和鍵盤都可用的 UI。）

這里需要注意的是，它假定您的原始腳本不關心事件的target 。 如果該腳本確實檢查了這一點，當它看到來自墊片 A 而不是原始 As 的點擊事件時，它會感到困惑。 解決此問題的一種方法是捕獲並重新引發事件，這可能很繁瑣，並且可能僅適用於最近的瀏覽器 - 例如使用以下內容：

// 'shim' class used so we can do this:
$("a.shim").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    // the following works if listener using jQuery or is setting onclick directly, otherwise...
    // $(e.target).parent().click();.

    // More general way to raise events; may need alternate for IE<9
    var e2 = document.createEvent("UIEvents");
    e2.initUIEvent("click", true, true, window, 1);
    e.target.parentNode.dispatchEvent(e2)
});

Answer 2

雖然它不是很漂亮，但您可以使用 jQuery 獲得所有沒有href屬性的錨點；

$("a:not([href])")

然后，您可以將這些鏈接上的href屬性設置為“#”，這將使它們再次作為常規鏈接工作。

這是一個有效的 JSFiddle

很抱歉用 jQuery 解決方案回復……但是在常規 JavaScript 中執行此操作會更加冗長。

另一種方法是給錨點一個角色，然后以這種方式選擇它們：

$("a[role='link']")