1

페이지 고유 탐색 메뉴 인 기본 헤더 요소가 있습니다. 보시다시피 h1 요소는에 대한 링크입니다 (메뉴는 페이지 상단에 고정되어 있고 나머지는 아래로 스크롤됩니다).html <header role = "menubar"> w3 유효성 검사기에서 유효성 검사를하지 않음

예 : w3 validator

<header role="menubar"> 
    <a href="#top"> 
     <h1>Main Title</h1> 
    </a> 
    <ul role="menu"> 
     <li role="menuitem"> 
      <a href="#presentation">presentation</a> 
     </li> 
     <li role="menuitem"> 
      <a href="#picture">picture</a> 
     </li> 
     <li role="menuitem"> 
      <a href="#downloads">downloads</a> 
     </li> 
    </ul> 
</header> 

나는 메시지로 얻을 :

Error: Bad value menubar for attribute role on element header.

합니다.

헤더 요소에 대한 허용 ARIA 역할이있는 W3 recommendation page for single pages에 나를 참조 :

banner role (default - do not set) or presentation.

합니다.

'기본 - 설정되지 않는'올바른 역할은 (정말 같은 옵션이 있기 때문에 헤더 요소

'배너'와 '표현'의 이전 버전과 호환되지 않을 것되지되지 않은 참조 bannerpresentation)

그래서 내 질문 :

  • 는 무엇을해야합니까

    ? 가장 쉬운 방법은 헤더 요소 을 div 요소로 대체하는 것입니다. 하지만 의미 상 덜 좋다고 생각합니다. 그게 바로 입니까?

  • 이 경우는 정말 W3C 사람들에 의해 고려하거나 100 % 잘못 (I 접근성에 초점을 의미 수준 에 의미) 그렇게하지 않았을 수도 그것입니다.

  • 다른 옵션이 있습니까?

은 무엇 현재 코드가 표시하는 메뉴 바 있지만 탐색 목록이 아닙니다

+0

안녕하세요 @ChristopheStrobbe, 빠른 댓글에 감사드립니다. 나는 국가와 속성이없는 단순화 된 버전의 메뉴를 게시했습니다. 그 이유는 그것이 내 관심 이었기 때문입니다. 어쨌든, 내 질문에 대한 답변은 nav 방법을 가리 켰습니다. 나는 nav 요소가 다른 페이지들에 대한 링크만을 가져야한다고 생각했지만, 그 요소의 W3C 페이지를 검사하는 것은 페이지 내에있는 부분들에 대한 링크를 포함 할 수도 있다는 것을 알았다. 비록 여전히 의미 론적 관점에서 볼 때 헤더가 nav보다 정확하다고 생각하기 때문에 헤더 일 수는 없다는 점이 유감입니다. – quasi

답변

2

을 :) 감사합니다. <header role="menubar"> 대신 <nav>이 필요하며 목록 요소에서 역할 속성을 제거해야합니다. 메뉴 막대를 구현하는 경우 코드가 매우 불완전합니다.

메뉴 막대에 HTML5 및 WAI-ARIA 사용에 대한 조언은 Recommended WAI-ARIA implementation for navigation bar/menu을 참조하십시오.