Multiple Headers and ARIA Roles

Question

I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo

Answer 1

If they are using nav elements you shouldn't simply wrap them in headers. Although you can use multiple header elements in a page, they should represent the top of a 'section', a content area.

A more suitable HTML setup would be:

  

      
 
          
Site menu
          

              
Home
              ...
          
      
      

          

              
Login
              ...
          
      
  

  

    

      

      

         
Service menu
         

              
Main Service Page
              ...
         
      
    
  

Notable points are:

• wrapping the whole lot in a header, with a role of banner. which should only be used once on a page to denote site furniture at the top of the page. (When used from the body the header applies to the, see the last example in the HTML5 spec.)
• Labelling each nav with a hidden sub-heading (use .at to move it offscreen), with aria-describedby.

Main should wrap the main content of the page (that is unique to the page), generally starting just above a H1. There should be only one.