다수의 헤더와 ARIA 역할

Question

나는 정말로 2 개의 헤더가있는 HTML 구조를 가지고있다 : 페이지의 윗부분에 약간의 네비게이션 아이템과 버튼이있다. 그 아래에는 로고를 가지고있는 다른 섹션과 내가 main 항해. 이 상황에서

1. 는 포장에 허용 :

   <div id="topWrap"> 
       <div id="topNavWrap"> 
        <nav id="utilityLinks"> 
         <ul> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">Page</a></li> 
          <li><a href="#">Page</a></li> 
          <li><a href="#">Page</a></li> 
          <li><a href="#">Page</a></li> 
         </ul> 
        </nav> 
        <div id="quickLinks"> 
         <ul> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Contact</a></li> 
         </ul> 
        </div> 
       </div> 
   </div> 
   
   <div id="headerWrap"> 
       <div id="header"> 
        <div id="logo"><a href="#"><img src="logo.png" /></a></div> 
        <nav id="mainNav"> 
         <ul> 
          <li><a href="#">Main Service Page</a></li> 
          <li><a href="#">Main Service Page</a></li> 
          <li><a href="#">Main Service Page</a></li> 
          <li><a href="#">Main Service Page</a></li> 
          <li><a href="#">Main Service Page</a></li> 
         </ul> 
        </nav> 
       </div> 
   </div> 
   

   내 질문은 :

   두

   은 나의 구조는 다음과 같이 보입니다 때문에 전체 폭 CSS3 그라데이션의 래퍼 오프 구분된다 이 두 nav 요소를 모두 header 요소에 넣으려면 nav 요소와 로고를 header 요소로 묶어 야합니까? 아니면 두 요소를 모두 하나의 큰 header 요소로 래핑합니까?

2. Aria을 사용할 때 role="main"을 내비게이션이나 내 주 header 요소에 사용해야하나요?

Answer 1

예, 두 가지 모두에 대해 header을 사용하는 것이 좋습니다.

header은 문서 개요에 영향을 미치지 않으므로 하나 또는 여러 개의 header 요소를 사용해야합니다. 의미에 영향을 미치지 않습니다. 하나의 요소를 사용하지 않아야하는 이유가 없다면 (즉, 사이에 내용이 없으므로 header의 일부가 아니어야 함) 하나의 요소로 이동하십시오.

ARIA role main은 페이지의 주 콘텐츠입니다. 탐색은 페이지의 유일한 콘텐츠와 목적이 아니라면 대개 기본 콘텐츠가 아닙니다. 그러나이 경우 header 요소를 사용하지 않아야합니다. 작업은 "exclude" content that is not considered to be part of the main content입니다.

Answer 2

nav 요소를 사용하는 경우 단순히 헤더에 포장하면 안됩니다. 한 페이지에서 여러 헤더 요소를 사용할 수 있지만 내용 영역 인 '섹션'의 상단을 나타내야합니다.

더 적합한 HTML 설정은 다음과 같습니다

<header id="topWrap" role="banner"> 
    <div id="topNavWrap"> 
     <nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2"> 
      <h2 class="at" id="utilityLinksH2">Site menu</h2> 
      <ul> 
       <li><a href="#">Home</a></li> 
       ... 
      </ul> 
     </nav> 
     <div id="quickLinks"> 
      <ul> 
       <li><a href="#">Login</a></li> 
       ... 
      </ul> 
     </div> 
    </div> 

    <div id="headerWrap"> 
    <div id="header"> 
     <div id="logo"><a href="#"><img src="logo.png" /></a></div> 
     <nav id="mainNav" aria-describedby="mainNavH2"> 
     <h2 class="at" id="mainNavH2">Service menu</h2> 
     <ul> 
       <li><a href="#">Main Service Page</a></li> 
       ... 
     </ul> 
     </nav> 
    </div> 
    </div> 
</header> 

주목할만한 점은 다음과 같습니다

• 는 banner의 역할과 더불어, header에 훨씬 포장. 페이지 상단의 사이트 가구를 나타 내기 위해 페이지에서 한 번만 사용해야합니다. (본문에서 사용하는 경우 헤더는 see the last example in the HTML5 spec에 적용됩니다.)
• 각 nav에 숨겨진 서브 제목 (.at을 사용하여 화면을 벗어나게)을 지정하면 aria-describedby입니다.

메인은 일반적으로 H1 바로 위에서 시작하는 페이지의 기본 콘텐츠 (페이지 고유)를 래핑해야합니다. 오직 하나만 있어야합니다.