多个头和ARIA角色 [英] Multiple Headers and ARIA Roles

问题描述

我有一个HTML结构，其中有2个标题：在页面的tippity顶部，它有一些导航项目和按钮，下面是另一个包含徽标和我称之为主导航的部分。

因为全宽CSS3渐变，所以它们在包装器中被分开，所以我的结构看起来像这样：

 < div id =topWrap> 
< div id =topNavWrap> 
< nav id =utilityLinks> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>页面< / a>< / li> 
< li>< a href =＃>页面< / a>< / li> 
< li>< a href =＃>页面< / a>< / li> 
< li>< a href =＃>页面< / a>< / li> 
< / ul> 
< / nav> 
< div id =quickLinks> 
< ul> 
< li>< a href =＃>登入< / a>< / li> 
< li>< a href =＃>联络人< / 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 =＃>主要服务网页< / a>< / li> 
< li>< a href =＃>主要服务网页< / a>< / li> 
< li>< a href =＃>主要服务网页< / a>< / li> 
< li>< a href =＃>主要服务网页< / a>< / li> 
< li>< a href =＃>主要服务网页< / a>< / li> 
< / ul> 
< / nav> 
< / div> 
< / div> 
  

我的问题是：

1. 在这种情况下，将 nav 元素都包装在头元素，我只是将我的主要 nav 和徽标包裹在标题元素中，还是将它们包装成一个大 header 元素




2. 使用Aria时，我应该使用 role =在我的主导航栏或我的主要标题元素




$ b中添加了主 $ b

解决方案

是的，使用标头这两种方法都是有意义的。 b
$ b

由于头文件对文档大纲没有影响，因此您可以使用一个或多个头元素;它不影响意义。如果没有理由不使用一个元素（也就是说，没有内容不应该是头部的一部分），请使用一个元素。





ARIA角色主要 用于页面的主要内容。导航通常不是主要内容，除非它是页面的唯一内容和目的。但是，在这种情况下，您不会使用标头元素，因为它的工作是排除不被认为是主要内容的一部分的内容。

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 and what I would call the main navigation.

Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this:

<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>

My question is:

1. In this situation is it acceptable to wrap both of these nav elements in a header element, do I just wrap my main nav and logo in a header element, or do I wrap both in one big header element?

2. When using Aria, should I use role="main" on my main navigation or my main header element?

解决方案

Yes, it makes sense to use header for both of these.

As header has no influence on the document outline, it’s up to you use one or several header elements; it doesn’t affect the meaning. If there is no reason not to use one element (i.e., there is no content inbetween that should not be part of header), go with one element.

The ARIA role main is for the main content of a page. Navigation is typically not the main content, unless it’s the only content and purpose of a page. However, in that case you wouldn’t use the header element, as its job is to "exclude" content that is not considered to be part of the main content.

这篇关于多个头和ARIA角色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！