5568 sujets

Sémantique web et HTML

Bonjour,

J'ai un template avec 2 colonnes : une colonne principale et une supplémentaire.

La colonne supplémentaire comprend : le menu vertical (menu secondaire car mon menu principale est dans mon <header>), un module méteo, un module recherche et un texte d'appel pour une offre.

Sans la présence du menu, j'aurai mis spontanément la balise <aside> pour cette colonne. Mais cet élément doit être utilisé pour du contenu indirectement apparenté et je ne sais pas comment considéré le menu du coup.

Merci pour votre aide !
Administrateur
Bonjour,

Bonne question ! D'après ta description du zoning, je dirais :

<div><!-- la colonne supplémentaire -->
  <nav role='navigation'>
    <!-- menu scondaire -->
  </nav>
  <aside role='complementary'>
    <iframe title='meteo'>
    </iframe>
    <form id='search' role='search '>
    </form>
    <div class='appel_offre'>
    </div>
  </aside>
</div>


Avec un div supplémentaire pour styler la colonne en CSS, on a les zones importantes balisées par des éléments HTML5.
J'ai ajouté les 3 landmarks ARIA (attributs role) qui conviennent dans cette partie de la page (manque banner, contentinfo et form ailleurs dans la page)
Modifié par Felipe (11 Mar 2011 - 17:01)
Pareil que Felipe.
Par contre, comment traiter la double navigation (principale + secondaire). Deux éléments NAV successifs (si on ne compte pas les DIV, neutres), et basta?
Administrateur
Du peu que je sache, oui, il n'y a pas de role spécifique qu'on pourrait ajouter pour les distinguer, enfin j'en ai pas vu sur d'autres sites cités en exemple pour les landmarks ARIA.
1/ j'imagine que toutes les aides - pardon, Assistances Techniques - listent les zones dans l'ordre d'apparition dans le code HTML donc la navigation principale apparait avant la secondaire
2/ je vois qu'un titre en début de navigation secondaire pour expliquer les choses mais je ne sais pas si c'est une bonne idée. Pour la navigation principale certainement pas, elle est reconnaissable sans qu'il y ait besoin d'un titre (ou alors il y a un sacré problème d'ergonomie !) mais pour la secondaire ?
ARIA ne propose pas de mécanisme pour rajouter un label textuel libre pour décrire une «zone» dans une interface?
Avec une interface faite à base de frames, on peut le faire via title. Ce serait dommage de pas avoir de mécanisme équivalents pour les sections HTML5 (ou <div role="...">), et de devoir passer par l'ajout de titres HN masqués (ce qui pose de multiples problèmes).
Merci les gas !

Pour la navigation secondaire, je met un titre qui est celui de la catégorie dans laquelle je me trouve (rappel du menu principal).

Bonne journée !