오른쪽 트랙에 1.Am 있습니까? 그렇지 않으면 누군가가 약간의 변화를 추천 할 수 있습니까?
예, 당신은 좋은 방법으로 절대적으로 시작했습니다. 당신이 그것을 향상시키고 자한다면 탭의 일부는 탭과 관련된 역할을 할 수 있지만 그것이 기능적이다.
2.AJAX를 통해 기사를로드하려면 변경해야합니까?
아니요. 괜찮을 것입니다. 라이브 영역이어야한다는 사실 (NVDA만으로 테스트)은 새로운 컨텐츠가 발표된다는 것을 의미합니다. 이것은 당신이 겪고있는 행동입니까?
3.Do 탐색 태그가 필요합니까?
아니요,하지만 문서의 비트가 무엇인지 분명하게 밝혀주는 데 도움이 될 것이라고 생각합니다. 비록 내가 아래에서 한 일을 탭리스트로 표시한다면, 그것은 네비게이션 요소라는 사실이 더 이상 발표되지 않는다는 점에 유의하십시오.
4. 여기에 WAI-ARIA 역할이 충분합니까?
ARIA 역할을 통해 상태와 속성도 포함하는 경우, 본질적으로 동적 콘텐츠로드 (해당되는 경우)가 적용되어야합니다. 사용자의 키보드 포커스 나 사물을 그대로 옮기는 경우는 없습니다. IMO, 사용자가 클릭 한 내용과 제공하는 콘텐츠 사이에 많은 탐색 항목이있는 경우에만이 작업을 수행하고 싶을 것입니다.
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>
이 정보가 도움이되기를 바랍니다.
"대부분의 의미 론적 마크 업"에 대한 질문은 주로 의견을 바탕으로하며 확고한 대답보다는 토론과 논쟁을 불러 일으키는 경향이 있습니다. 가장 접근성이 높은 마크 업을 요청한 경우, 특히 어떤 종류의 장애에 대해 주로 생각하고 있는지 설명하면 더욱 건설적입니다. 그러나 "탭 섹션"과 "탭 컨텐트"(특히 기술 구현 관점, 즉 탭이 어떻게 작동해야하는지)에서 무엇을 의미하는지 설명해야합니다. –