2011-05-19 23 views
8

Hızlı bir soru yanıtı: HTML5 nav, özellikle de alt navigasyon (semantik bir bakış açısından).HTML5 alt nav semantik

Ana menü için üstbilgide <nav> var. Standart bir sayfanın sol tarafında, ikinci seviye nav var ve sağ üçüncü seviye nav var (hayır, ben siteyi tasarlamadım). 3 menü arasında ayrım yapmak için HTML5/ARIA bilge yapabileceğim bir şey var mı? Yoksa hepsi basit <nav> blokları mı?

Bu gerçek menülerin dışında herhangi bir ek bilgi olmadığından, sol veya sağ sütunlarda <aside>'a ihtiyacım olduğunu düşünmüyorum bile.

Herhangi bir düşünce/tavsiye çok takdir edilecektir.

cevap

3

Onlara id s semantik ilgili vererek ve aşağıdaki satırlar boyunca, HTML kodundaki önem sırasına göre yerleştirerek navigasyon bölümleri arasında ayrım olacaktır: Bundan daha

<body> 
    <nav id="main-navigation"> 
    <!-- The main menu goes here --> 
    </nav> 
    <nav id="sub-navigation"> 
    <!-- The left hand menu goes here --> 
    </nav> 
    <nav id="leaf-navigation"> 
    <!-- The right hand third level menu goes here --> 
    </nav> 

    <section id="content"> 
    <!-- Actual page content --> 
    </section> 
</body> 

Diğer, hiçbir bkz bölümler arasında daha fazla farklılaşma için gerçek ihtiyaç. Yukarıdaki yaklaşımın anlaşılması kolaydır, kolay anlaşılır olmalı ve semantik olarak açık, ki bu benim için kesinlikle yeterli.

+3

[** W3 HTML5 özellikleri **] (http://www.w3.org/wiki/HTML/Elements/nav) aşağıdakileri açıklamaktadır: "" nav öğesi yalnızca büyük gezinme bloklarından oluşan bölümler için uygundur “Bu, bir altbilgideki bir grup bağlantı için bir nav elemanının aşırı fazla olduğunu söylemeye devam ediyor. ** Sub-navigasyon tamamen tartışma için bana benziyor. ** Ben benzer bir durumdayım @Adi, soru sorumlusu: DHTML içerik sekmelerimin bir

5

Bu eski bir soru olabilir, ancak daha iyi bir cevap şimdi vardır:

<nav role="navigation" aria-labelledby="firstLabel"> 
    <h2 span id="firstLabel" class="hidden">Main menu</h2> 
    <ul/> 
</nav> 
... 
<nav role="navigation" aria-labelledby="secondLabel"> 
    <h2 span id="secondLabel" class="hidden">Local pages</h2> 
    <ul/> 
</nav> 

kullanıcı için:

Sen WEG-ARIA özelliklerini kullanmasına açıkça başlıkları kullanarak örtülü her gezinme bölümünü etiketlemek ve edebilirsiniz - ekran okuyucuları gibi, "Yerel sayfalar, gezinme" (bunu nasıl bildirildiğine göre değiştirmelerine rağmen) olarak rapor edebilirler.

W3C wiki page on using labelledby hakkında daha fazla bilgi edinin.