如何使用「跳過導航」連同Durandal路由器

我目前正在研究一個需要遵循「WCAG 2.0」準則的HTML5單頁應用程序。如何使用「跳過導航」連同Durandal路由器

我使用Twitter Bootstrap作爲前端框架，而Durandal.js用於SPA部分。

在不干擾Durandal.js'router？的情況下實施「Skip navigation」技術的最佳方式是什麼？哪裏是放置標記的最佳地點，Durandal是明智的。 index.html的？ shell.html？（index.html可能爲時過早，因爲我的i18n模塊可能還沒有加載，但那是另一個問題;））

這是一個使用Bootstrap的示例（只對屏幕閱讀器可見），但因爲Durandal有一個基於散列的路由系統，所以我們可能會遇到問題。

<body> 
    <a href="#content" class="sr-only">Skip to main content</a> 
    <div class="container" id="content"> 
    The main page content. 
    </div> 
</body>

謝謝。

---編輯---

這是我如何實現它：

HTML：

<a tabindex="1" href="#" id="skipNavigation" data-bind="click: skipNavigation"> 
    Skip to main content 
</a>

CSS：

個

#skipNavigation { 
    background-color: transparent; 
    color: transparent; 
} 

#skipNavigation:focus { 
    background-color: #f5c03a; 
    color: #222; 
}

JS：

skipNavigation: function() { 
    var module = router.activeInstruction().config.moduleId.split("/")[1], 
     $elem = $('#content'); 

    if (module === "xxx") { 
    $elem = $('.selector'); 
    } else if (module === "yyy") { 
    $elem = $('.selectorY'); 
    } 

    $elem.focus(); 

    system.log("Skipping navigation for page '" + module + "', and setting focus to element '" + $elem.selector + "'"); 
}

來源

2014-01-27 Remi Sture

您可以使用JQuery focus（）方法跳轉到頁面上的主要內容。

例如：

<body> 
    <a href="javascript:$('#content').focus();" class="sr-only">Skip to main content</a> 
    <div class="container" id="content"> 
    The main page content. 
    </div> 
</body>

當您使用迪朗達爾（恭喜的方式）我會假設JavaScript是好的。

來源

2014-01-27 16:31:16

完美！謝謝，@Garry！ –

你可能只是無法加載路由器模塊。

app.configurePlugins({ 
    dialog: true 
}); 

app.start().then(function() { 
    viewLocator.useConvention(); 
    app.setRoot('viewmodels/shell'); 
});

來源

2014-01-27 14:43:15

但我希望路由器是活躍的。有辦法處理這兩種情況嗎？ –

對不起，我不完全明白什麼是跳過導航，請原諒我的無知，但如果您可以參考一個非技術規範文檔和解釋，也許我可以改進我的答案。 –

對不起，我的壞。也許這更清楚了？ http://a11yproject.com/posts/skip-nav-links/ –

你也可以使用原生JS-功能：

var el = document.getElementById(elID); 
el.scrollIntoView(true);

來源

2014-03-19 08:10:27 Kris

如何使用「跳過導航」連同Durandal路由器

回答

相關問題