1.我在正確的軌道上？如果沒有人可以推薦一些改變？
是的，你絕對是以一種好的方式開始的。如果您想改進它，某些選項卡的東西可能會被賦予一些與選項卡相關的角色，但它的功能仍是如此。
2.如果要通過AJAX加載文章，我需要進行更改嗎？
不，應該沒問題。事實上，它是一個現場區域應該（僅用於NVDA測試）意味着新內容被宣佈。這是你之後的行爲嗎？
3.我需要導航標籤嗎？
不，但我認爲這有助於使文件清楚地表明文檔的用途。但請注意，如果您按照以下所做的操作將其標記爲Tablist，則導航元素不會再公佈。
4. WAI-ARIA的角色在這裏足夠嗎？
如果通過ARIA角色你還包括狀態和屬性，那麼基本上你應該被加載動態內容（如果這就是你以後的內容）。沒有任何情況可以移動用戶的鍵盤焦點或任何事物。國際海事組織，如果用戶點擊的內容和你給他們的內容之間有很多導航的話，你只會真的想這麼做。
5.是否使用這些正確的WAI-ARIA角色？
你不遠處。如果你真的想要一個標籤式的體驗，那麼你需要tablist，tab和tabpanel角色。我會舉一個例子。
我已經採取了你的代碼，並做了一個人爲的但工作的例子來測試它。它不會在AJAX中加載任何內容，只是顯示和隱藏內容。在我給出這個答案之前，我想確定一下，但是我會把代碼放在這裏以防萬一。
<html>
<head>
<title>Aria test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').on('click', function() {
hideArticles();
deslectAllTabs();
$(this).attr('aria-selected', true);
var tab = '#' + $(this).attr('aria-controls');
$(tab).show();
});
});
function hideArticles() {
$('article').hide();
}
function deslectAllTabs() {
$('nav a').attr('aria-selected', false);
}
</script>
<style type="text/css">
article { display: none; }
</style>
</head>
<body>
<section>
<nav role="tablist">
<a href="#tab" aria-controls="content1" id="tab1" role="tab">Stuff1</a>
<a href="#tab" aria-controls="content2" id="tab2" role="tab">Stuff2</a>
<a href="#tab" aria-controls="content3" id="tab3" role="tab">Stuff3</a>
</nav>
<section id="content" aria-live="polite" role="region">
<article id="content1" role="tabpanel">The lazy dog jumped over the quick fox</article>
<article id="content2" role="tabpanel">If you click this tab then your life will be better</article>
<article id="content3" role="tabpanel">Know your roles</article>
</section>
</section>
</body>
</html>
我希望這會有所幫助。
關於「大多數語義標記」的問題主要是基於意見的，並傾向於產生討論和辯論而不是確切的答案。如果您要求最方便的標記，這將更具建設性，尤其是如果您解釋了您主要想到的哪種殘疾。但是你也應該解釋一下「標籤部分」和「標籤內容」（特別是從技術實現的角度來看，即標籤應該如何工作）。 –