顯示：無，下拉菜單和屏幕閱讀器

Question

我經常讀到使用顯示：無下拉菜單（如完成here）是不好的做法，因爲屏幕閱讀器無法訪問。

本文內容：http://simplyaccessible.com/article/better-for-accessibility/撰文指出，從顯示位置關閉左替代：無有也是缺點，並提出以下，使訪問的下拉菜單鍵盤：

選項2：使用顯示：無，並有一個：焦點狀態匹配：懸停 ，使其顯示：塊，並將子菜單項目帶到 頁面，讓他們獲得焦點，但只有當他們在 屏幕。

該：重點調整是用JavaScript實現的。他舉了一個例子http://examples.simplyaccessible.com/css-menu/option-2.php。

問題1： 屏幕閱讀器是否可以訪問選項2的下拉菜單？屏幕閱讀器是否閱讀整個頁面，然後你可以通過頁面標籤，他們讀出的鏈接？這是否意味着當人員通過時，子菜單隻能被屏幕閱讀器讀取？

問題2： 使用顯示：無對我來說很大的優勢，我可以使用jQuery的功能，如.slideDown（）和.slideUp（）其上添加一個漂亮的動畫效果下拉式菜單。如果我使用位置：絕對並隱藏左下方的子菜單，那我怎麼能得到類似於.slideDown（）和.slideUp（）？

Answer 1

答案1：簡單的答案是肯定的。

較長的答案：

屏幕閱讀器有很多選擇來移動頁面各處，列出所有可用的錨等NVDA，例如，還可以通過鼠標交互讀取信息。然而，通常，可訪問性討論的焦點在於鍵盤用戶，因爲他們經常被開發人員遺忘。如果用戶瀏覽頁面，可見錨點（不顯示任何）可以有焦點並被讀取。因此，只有鍵盤用戶才能訪問子菜單（在選項2中）。這適用於視覺和屏幕閱讀器鍵盤用戶。您可以添加自己的鍵盤交互，以便內容在標籤之外可用。但請記住，最終用戶可能不知道如何使用菜單。您還需要注意已經綁定到屏幕閱讀器的鍵。

答案2：簡單的答案 - 你可能要考慮CSS3的動畫/轉換。

說明：

滑動方面可使用最大高度和溢流隱藏被動畫（如果你有可變高度）。因此，默認情況下，子菜單的最大高度爲0，然後當添加類時，可以將其設置爲您認爲合理的數字。

.menu li { position:relative; } 
.sub-menu { 
    position:absolute; 
    top:100%; 
    left:0; 
    width:100%; 
    max-height:0; 
    opacity:0; 
    overflow:hidden; 
    transition:all 0.3s ease-in; 
} 
.active > .sub-menu { max-height:99em; opacity:1; } 

如果您製作9999像素，過渡/動畫的外觀和感覺會受到與250像素不同的影響。下面就是一個簡單的CSS例子：

更長的討論點：

世上本沒有隱藏與不放過，對顯示器沒有對菜單位置絕對的菜單中，如果使用多少好處方法與您提到的選項類似。您可以參加關於什麼時候禁用JS並需要可用內容的討論。默認情況下不顯示會阻止鍵盤用戶獲取內容（屏幕閱讀器確實理解Javascript）。但是如果我們真的希望這對於所有沒有使用Javascript的用戶來說都是完美的，那麼JS辯論會帶來進一步的困境。由於內容只在位置絕對偏左的位置被視覺隱藏，所以作爲視覺用戶的鍵盤用戶將能夠專注於錨點但不會看到內容並且可能會丟失（因爲它仍然不在屏幕上）。

因此，如果我們真的想在所有情況下考慮所有用戶，這並不容易。我們必須有時設置一些限制，漸進式增強是一個可能需要記住的方面。也許子菜單隻適用於Javascript用戶。如果內部頁面具有子部分鏈接的導軌導航，那麼無論屏幕閱讀器用戶還是視覺鍵盤用戶，非JS用戶仍然可以訪問該網站的所有頁面。