跨瀏覽器，JavaScript的少，跳過導航鏈接

在上跳過導航鏈接的最佳做法最近搜索，這是最全面的解決方案，我可以找到：http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria 跨瀏覽器，JavaScript的少，跳過導航鏈接

我不喜歡這一個是什麼它需要Webkit瀏覽器上的JavaScript。這真的是我們看起來像跳過導航鏈接一樣簡單的最佳解決方案嗎？

是否有任何鏈接或樣本談論其他「更好」的解決方案？

來源

2011-02-02 Bart

我傾向於使用

#skip-to-nav, #skip-to-content 
{ 
    position: absolute; 
    right: 100%; 
}

我請確保＃跳過對導航和＃跳躍到內容的鏈接是在body元素。

Drupal 7的用途：

/** 
* Hide elements visually, but keep them available for screen-readers. 
* 
* Used for information required for screen-reader users to understand and use 
* the site where visual display is undesirable. Information provided in this 
* manner should be kept concise, to avoid unnecessary burden on the user. 
* "!important" is used to prevent unintentional overrides. 
*/ 
.element-invisible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
} 

/** 
* The .element-focusable class extends the .element-invisible class to allow 
* the element to be focusable when navigated to via the keyboard. 
*/ 
.element-invisible.element-focusable:active, 
.element-invisible.element-focusable:focus { 
    position: static !important; 
    clip: auto; 
}

我與屏幕閱讀器測試了，而他們似乎都對任何人誰也看不到屏幕做工精細。

至於Tab鍵順序，我不擔心用戶標籤到他們看不到的元素。我可能應該，但我發現絕大多數用戶不會使用tab鍵。那些誰傾向於更多地瞭解發生了什麼，所以恕我直言，它變得沒有意義。

編輯補充：

與@discojoe經過一番討論後，我決定，我想看看有點接近到什麼Drupal 7的使用隱蔽/揭示的內容，我也相應更新的代碼。

來源

2011-02-02 18:41:08 zzzzBov

注意，近視鍵盤的用戶也將使用跳過鏈接，而不僅僅是屏幕閱讀器用戶，所以最好讓跳過鏈接可見，這至少是重點。（實際上，屏幕閱讀器用戶可以使用快捷鍵跳轉到頁面上的許多元素，因此通常不太可能使用跳過鏈接而不是使用有視覺的鍵盤用戶） – discojoe 2011-02-02 22:47:16

在大多數情況下，跳過鏈接會中斷網頁設計的視覺流。此外，如果您的內容距離瀏覽器的用戶需要跳過鏈接的頁面太遠，那麼您做錯了。 – zzzzBov 2011-02-02 22:50:38

一個好的跳過鏈接應該總是可見的，以提醒用戶的存在。一個好的選擇是使用CSS在收到焦點時使跳轉鏈接可見。

考慮這個HTML

<div id="skip"><a href="#content">Skip to content</a></div>

使用這個CSS

#skip a { 
position: absolute; 
margin-left: -3000px; 
width: 1; 
height: 1; 
overflow: hidden; 
}

和

#skip a:focus, #skip a:active { 
margin-left: 0px; 
width: auto; 
height: auto; 
}

鏈接隱藏，直到它接收到焦點。 :focus迎合非IE瀏覽器，:active迎合IE用戶。鼠標用戶將永遠不會看到鏈接，因爲沒有使用:hover。

更新：03 \ 02 \ 11 鏈接到一些有用的文章在跳躍環節實施和可用性

來源

2011-02-02 22:44:01 discojoe

跨瀏覽器，JavaScript的少，跳過導航鏈接

回答

相關問題