隱藏的div跳轉（可訪問性）

Question

我有一個部分，其中隱藏了單擊時顯示的div。我試圖實現的是可訪問性合規性，如果我選中並打開其中一個部分，它將選中該部分的內容，然後返回到最初停止的位置。

例如，如果我選中並打開第1部分，我希望能夠通過第1部分的內容標籤，之後返回到打開第2部分的按鈕，等等......

我已創建我的HTML小提琴/腳本 https://jsfiddle.net/rjvw915r/10/

HTML例子：

<div id="dropdown-menus"> 
    <div id="section1-drop" class="drop-section hidden-panel"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    </div> 

    <div id="section2-drop" class="drop-section hidden-panel"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    </div> 
</div> 

<ul id="dropdown-links" class="menu main-tabs"> 
    <li> 
    <a class="panel-btn" 
     href="javascript:dropMenu('section1');" 
     id="drop-link-section1">section 1</a> 
    </li> 
    <li> 
    <a class="panel-btn" 
     href="javascript:dropMenu('section2');" 
     id="drop-link-section2">section 2</a> 
    </li> 
</ul> 

的JavaScript：

function dropMenu(menusection) { 
    if (!($('#dropdown-menus #' + menusection + '-drop').is(':hidden'))) { 

     // Select panel is open. Closes the panel. 
     $('#dropdown-menus #' + menusection + '-drop').slideUp(500); 
     $('#dropdown-menus #' + menusection + '-drop').removeClass('active'); 
     $('a#drop-link-' + menusection).removeClass('active'); 

     // Scroll to top of buttons. 
     var aid = $("#dropdown-links"); 
     $('html,body').animate({scrollTop: aid.offset().top-480},400,function(){}); 

    } else if ($('#dropdown-menus .drop-section').hasClass('active') 
       && $('#dropdown-menus #' + menusection + '-drop').is(':hidden')) { 

     // Another panel is open. 
     // Closes currently open panel and opens selected panel. 
     $('.menu a.active').removeClass('active'); 
     $('#dropdown-menus .active').slideUp(500,function(){ 
      $('#dropdown-menus #' + menusection + '-drop').slideDown(500); 
      $('#dropdown-menus #' + menusection + '-drop').addClass('active'); 
      $('a#drop-link-' + menusection).addClass('active'); 
     }).removeClass('active'); 

     // Scroll to top of panel. 
     var aid = $("#dropdown-menus"); 
     $('html,body').animate({scrollTop: aid.offset().top-155},400,function(){}); 

    } else { 

     // No panel currently open. Opens selected panel. 
     $('#dropdown-menus #' + menusection + '-drop').slideDown(500); 
     $('#dropdown-menus #' + menusection + '-drop').addClass('active'); 
     $('a#drop-link-' + menusection).addClass('active'); 

     // Scroll to top of panel. 
     var aid = $("#dropdown-menus"); 
     $('html,body').animate({scrollTop: aid.offset().top-155},400,function(){}); 
    } 
} 

謝謝！

Answer 1

您可以使用click事件來執行JavaScript操作，當點擊鏈接或按下回車鍵時。

<div id="dropdown-menus"> 
    <div id="section1-drop" class="drop-section hidden-panel"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    </div> 

    <div id="section2-drop" class="drop-section hidden-panel"> 
    <a href="#">Link 3</a> 
    <a href="#">Link 4</a> 
    </div> 
</div> 

<ul id="dropdown-links" class="menu main-tabs"> 
    <li> 
    <a class="panel-btn" 
     data-section="section1-drop" 
     id="drop-link-section1">section 1</a> 
    </li> 
    <li> 
    <a class="panel-btn" 
     data-section="section2-drop" 
     id="drop-link-section2">section 2</a> 
    </li> 
</ul> 

上面，我已經刪除了href屬性並增加了一個data-section元件，它指定該鏈接激活哪個部分。這更具語義和可讀性，現在我們可以在jQuery中設置我們的處理程序。

定義焦點處理程序：

// Setup the focus handler for the root links 
$('.panel-btn').on('click', function(e) { 
    var link = $(this); 
    var section = link.attr('data-section'); 

    // Pass in the current link and the section name to dropMenu 
    dropMenu($(this), section); 
}); 

我已經清理你的下拉菜單功能位，以澄清所發生的事情

function dropMenu(link, menusection) { 

    // Get the section specified by the menusection id 
    var section = $('#' + menusection); 

    // Get the open section by checking for the active class 
    var openSection = $('#dropdown-menus').find('.drop-section.active'); 

    // Anonymous function for activating a section and focussing the 
    // first link within the section 
    var showSection = function() { 
    // Slide the section into view 
    section.slideDown(500).addClass('active'); 

    // Focus the first link in the section. 
    section.find('a').first().focus(); 
    } 

    // If there is a section open, we want to slide it up first, 
    // then call showSection when that has completed. 

    if(openSection.length > 0) { 

    // If the open section is the one that was clicked, we want 
    // to simply close that section rather than open another 
    if(openSecion[0] === section[0]) { 
     openSection.slideUp(500).removeClass('active'); 
    } 
    else { 
     openSection.slideUp(500, showSection).removeClass('active'); 
    } 
    } 

    // Otherwise, we can just show the section straight away. 
    else { 
    showSection(); 
    } 
} 

這都是非常標準的，但你現在需要處理部分之間的移動，就像您期望使用Tab鍵本地發生一樣。問題在於，因爲你的'drop部分'在根鏈接之上，所以從放置部分的最後一個鏈接開始的tab鍵總是會回到第1部分，因爲這是文檔中的下一個tabbable元素。爲了防止這種情況，我們需要解決一些默認功能並實現我們自己的功能。

首先，你需要配置一個​​處理程序來捕獲黏合它發生

// Setup a keydown handler to handle tabbing on section links 
$('.drop-section').on('keydown', 'a', function(e) { 
    if(e.keyCode === TAB_KEY) { 
    var link = $(this); 

    // Flag determins whether to prevent default tab behaviour 
    var preventDef = false; 

    // Travel to previous link on SHIFT + TAB 
    if(e.shiftKey) { 
     preventDef = travelPrevious(link); 
    } 

    // Travel to next link on TAB 
    else { 
     preventDef = travelNext(link); 
    } 

    // Prevent default focus behaviour 
    if(preventDef) { 
     e.preventDefault(); 
    } 
    } 
}); 

在此之前，我們需要的函數來處理下一個標籤，和前一個標籤

// Handles travelling to the next link 
function travelNext(link) { 
    var next = link.next(); 

    if(next.length > 0) { 
    // Continue with default behaviour of moving to next link 
    return false; 
    } 

    // Drop section parent ID 
    var parentId = link.parents('.drop-section').attr('id'); 

    // Root link whose data-section attribute matches parent ID 
    var rootLink = $('.panel-btn[data-section=' + parentId + ']').parent(); 

    // Next root link to move to. 
    var nextLink = rootLink.next().find('a'); 

    // Focus on the next root link, which will fire dropMenu for 
    // the next section. 
    nextLink.focus(); 

    // Prevent default behaviour 
    return true; 
} 

function travelPrevious(link) { 
    var prev = link.prev(); 

    if(prev.length > 0) { 
    // Continue with default behaviour of moving to previous link 
    return false; 
    } 

    // Drop section parent ID 
    var parentId = link.parents('.drop-section').attr('id'); 

    // LI container for Root link whose data-section attribute matches parent ID 
    var rootLink = $('.panel-btn[data-section=' + parentId + ']').parent(); 

    // Previous root link to move to. 
    var prevLink = rootLink.prev().find('a'); 

    // Focus on the previous root link, which will fire dropMenu for 
    // the previous section. 
    prevLink.focus(); 

    // Prevent default behaviour 
    return true; 
} 

這是仍然不是一個完整的解決方案，因爲它無法處理到達所有部分的結尾或開始。這應該是一個開始，我相信它會回答你的第一個問題。如果您對此有其他疑問，您應該單獨詢問他們。

這裏是一個小提琴例如 https://jsfiddle.net/rjvw915r/17/

UPDATE

如果你的鏈接包含在下拉段內的非標準的方式，上面的方法將不太工作，因爲它使用尋找直接兄弟的next和prev函數。如果每個a標籤包含在div或li包裝中，則它們沒有直接兄弟姐妹。

我們可以通過回顧已知父元素並通過選擇器查找所有兄弟來解決此問題。在keydown函數中，我們將添加一些額外的代碼來檢索這些元素，並將它們傳遞到旅行函數中。

$('.drop-section').on('keydown', 'a', function(e) { 
    if(e.keyCode === TAB_KEY) { 
     var link = $(this); 

     // Retrieve all available links within the parent. 
     var linkCollection = link.parents('.drop-section').find('a'); 

     ... 

在每一個我們通過這些鏈接行駛功能在

preventDef = travelPrevious(link, linkCollection); 

... 

preventDef = travelNext(link, linkCollection); 

通過查找當前鏈路的指標，我們能夠確定它是否之前或之後有任何兄弟姐妹。

在travelNext功能，我們檢查，看看是否有任何聯繫後

// Find where the current link sits within the collection 
var linkIndex = linkCollection.index(link); 
var nextIndex = linkIndex + 1; 

if(nextIndex < linkCollection.length) { 
    // Continue with default behaviour of moving to next link. 
    return false; 
} 

在travelPrevious功能，我們檢查，看看是否有任何鏈接它

// Find where the current link sits within the collection 
var linkIndex = linkCollection.index(link); 
var nextIndex = linkIndex - 1; 

if(nextIndex >= 0) { 
    // Continue with default behaviour of moving to previous link 
    return false; 
} 

查看更新後的前小提琴https://jsfiddle.net/rjvw915r/18/