Sauter un niveau de titre ?

Bonjour le monde !

Ça touche à la sémantique, mais aussi à l'accessibilité alors je poste ici.

Techniquement, on ne devrait pas sauter un niveau de titre comme par exemple passer directement de <h1> à <h3> ou <h3> à </h5>.

1.2.1 Section headings (en)

HTML Techniques for Web Content Accessibility a écrit :

Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3). Do not use headings to create font effects; use style sheets to change font styles for example.

Mais moi, j'ai un document avec la structure suivante :

[b]TABLE DES MATIÈRES[/b]

[b]CHAPITRE 1    DISPOSITIONS GÉNÉRALES[/b]

- Article 01    Dénomination sociale    page 4
(...)
- Article 05    Objets    page 5

[b]CHAPITRE 2    LES MEMBRES[/b]

- Article 06    Catégorie de membres    page 6
(...)
- Article 11    Suspension ou expulsion    page 7

etc. (...)

[b]CHAPITRE 3    STRUCTURES ADMINISTRATIVES[/b]

* [b]Section I    Les Assemblées générales[/b]
- Article 12    Assemblée générale annuelle    page 8
(...)
- Article 21    Procédure d'élection    page 10

* [b]Section 2    Le Conseil d'administration[/b]
- Article 22    Composition    page 11
(...)
- Article 34    Conflit d'intérêt    page 13

etc. (...)

[b]CHAPITRE 4    DISPOSITIONS FINANCIÈRES[/b]

- Article 45    Exercice financier    page 18
(...)
- Article 48    Vérification    page 18

etc. (...)

Si j'utilise les listes de définition, ça va :

<h2>Table des matières</h2> => <h3>Chapitre 1</h3> => <dt>Article 01</dt>
<h2>Table des matières</h2> => <h3>Chapitre 3</h3> => </h4>Section 1</h4> => <dt>Article 12</dt>

Mais si je veux placer l'intitulé d'un article dans un niveau de titre :

<h2>Table des matières</h2> => <h3>Chapitre 1</h3> => <h?>Article 01</h?>
<h2>Table des matières</h2> => <h3>Chapitre 3</h3> => </h4>Section 1</h4> => <h5>Article 12</h5>

Je suis b é ?

Quoiqu'il me semble que l'usage de listes de définitions est approprié ici...

Par ailleurs, il semble que WGAG 2.0 sera moins contraignant sur ce point

Guideline 1.3 (en)

Web Content Accessibility Guidelines 2.0 a écrit :

Ensure that information, functionality, and structure are separable from presentation.
(...)

Bref... Sachant que certains utilisateurs se servent des niveaux de titres pour parcourir un document...

... comment coderiez-vous un tel document ?
Modifié par Stephan (29 Jun 2005 - 04:32)

Salut Stephan

<rien à voir>
pff... à concarneau il pleut
</rien à voir>

J'aurais également tendance à utiliser les listes de définition pour ce que tu décris (en fait c'est ce que je fais pour un plan de site par exemple). En étant vigilant sur le fait que quand on en arrive à ce balisage <dl> on est bien au point omega de l'arborescence et qu'en amont c'est bien la hiérarchie des entêtes de sections qui joue.

Ce qui semble être tout à fait le cas dans ce que tu présentes

Bonjour,

Effectivement, dans ton cas, la liste de définition semble être une bonne solution.
Concernant les WCAG 2.0, il est normal de ne pas trouver la réponse dans les directives elles-mêmes puisque cette version (d'après ses auteurs) doit être indépendante des technologies ou des langages.
En revanche quand on regarde les documents techniques pour mettre en oeuvre cette directive et les discussions relatives à ce sujet, on voit que le problème n'est pas encore résolu.
Les documents techniques, comme les WCAG 2.0, sont encore en cours de rédaction.

Cordialement,

Il me semble qu'en imprimerie, "sémantiquement parlant", il faudrait voir le problème "dans l'autre sens" : ce n'est pas ton "article" qui remonte au niveau de "section", mais "section" qui est un article divisé en sous-articles (comme les successions de chapitres qui incluent parfois des parties). Dans ce cas, tu aurais le même "hn" pour "articles" et "section", s'ils sont au même niveau.

Merci pour vos réponses toutes pertinentes

À supposer que je choisis les listes de définitions pour définir un article

Serait-il plus pertinent de faire plusieurs descriptions d'un même article...

<dl>
 <dt id="art31">Article 31 Convocation</dt>
 <dd>Les réunions du Conseil (...) tout autre endroit déterminé par le ou la Président(e).
 <dd>L'avis de convocation (...) lieu sans avis préalable de convocation.</dd>
</dl>

... où bien une seule définition comportant plusieurs paragraphes ?

<dl>
 <dt id="art31">Article 31 Convocation</dt>
 <dd>
  <p>Les réunions du Conseil (...) tout autre endroit déterminé par le ou la Président(e).</p>
  <p>L'avis de convocation (...) sans avis préalable de convocation.</p>
 </dd>
</dl>

J'opterais plus pour la deuxième solution étant donné que j'aurai des listes de toutes sortes à coder :

1- item
2- item
3- item
4- item

1) item
2) item
3) item
4) item

1. item
2. item
3. item
4. item

a) item
b) item
c) item
d) item

- item
- item
- item
- item

* item
* item
* item
* item

/me Je sais, ça manque de suite dans les idées, mais ce n'est pas moi qui ai rédigé alors du coup, je ne peux même pas changer une virgule (document légal)...

@Macpom > Selon ton raisonnement, ce ne serait pas plutôt « Chapitre » qui serait divisé en « Sections » ce qui donnerait :

<h2>Table des matières</h2> => <h3>Chapitre 1</h3> => <h4>Article 01</h4>
<h2>Table des matières</h2> => <h3>Chapitre 3</h3> => </h3>Section 1</h3> => <h4>Article 12</h4>

Modifié par Stephan (29 Jun 2005 - 17:29)

Stephan a écrit :


Serait-il plus pertinent de faire plusieurs descriptions d'un même article...

... où bien une seule définition comportant plusieurs paragraphes ?

Je trouve que l'utilisation de <dd> renvoit plus à l'idée d'item dont tu parles. L'utilisation d'une suite de <p> renvoit plutôt à une série d'élément constituant un discours.

Pour l'option "avec des titres", une simple remarque : en XHTML2.0, avec ses titres automatiques tant attendus, le problème soit-disant "sémantique" ne se pose même pas une fraction de seconde.

En effet, la hiérarchie des <sections> :
- Table > Chapitre > Article
- ou Table > Chapitre > Section > Article
... et leur titrage seront gérés de manière entièrement transparente
... en produisant effectivement un titre de niveau différent pour la <section> Article, selon que son parent est un chapitre ou une section.

Je ne vois donc aucune raison de ne pas utiliser ici en HTML XHTML1 les bons vieux titres <hn> pour l'ensemble de la structure.

Cela dit, les listes de définition, c'est très bien aussi
Modifié par Laurent Denis (30 Jun 2005 - 07:38)

Au passage, que fais-tu en matière de liens relatifs dans ce type de page ?

euh...

		<h2>TABLE DES MATIÈRES</h2>
		<ul>
			<li><a href="#chap1">CHAPITRE 1 DISPOSITIONS GÉNÉRALES</a>
				<ul>
					<li><a href="#art01">Article 01	Dénomination sociale</a> <span>page 4</span></li>
					<li><a href="#art02">Article 02	Incorporation</a> <span>page 4</span></li>
					<li><a href="#art03">Article 03	Siège social</a> <span>page 4</span></li>
					<li><a href="#art04">Article 04	Territoire</a> <span>page 4</span></li>
					<li><a href="#art05">Article 05	Objets</a> <span>page 5</span></li>
				</ul>
			</li>

et...

		<h2>RÈGLEMENTS GÉNÉRAUX</h2>
		<h3 id="chap1">CHAPITRE 1 DISPOSITIONS GÉNÉRALES</h3>
		<h4 id="art01">Article 1 Dénomination sociale</h4>
		<p>La présente corporation est connue et désignée sous le nom de LE TRAVERSIER, CENTRE DE JOUR ET D'ENTRAIDE EN SANTÉ MENTALE.</p>
		<h4 id="art02">Article 2 Incorporation</h4>
		<p>La présente corporation a été constituée par lettres patentes selon la troisième partie de la loi sur les compagnies de la province de Québec, en date du 25 avril 1989 librio C-1281, folio 20</p>
		<h4 id="art03">Article 3 Siège social</h4>
		<p>Le siège social de la corporation est situé dans la ville de Trois-Rivières ou à tout autre endroit pouvant être désigné par le Conseil d'Administration.</p>
		<h4 id="art04">Article 4 Territoire</h4>
		<p>Le territoire de la corporation se situe dans la région administrative de la Mauricie et correspond aux territoires des CSSS (Centre de Santé et Services Sociaux) Trois-Rivières et Les Chenaux. Toutefois, la Corporation pourra exceptionnellement agir ailleurs mais dans les limites de la région administrative 04-17.</p>
		<h4 id="art05">Article 5 Objets</h4>
		<p>À des fins purement charitables et philantropiques et sans intention de gains pécuniaires pour ses membres, la corporation entend poursuivre les objectifs suivants:</p>
		<ul>
			<li>1- Assurer le bien-être et le développement des personnes vivant ou ayant vécu avec un diagnostic de maladie mentale, en facilitant leur réinsertion sociale et en développant leur autonomie;<br />- Par des activités de promotion, de prévention, de développement des compétences, d'information sur les droits et d'intégration sociale</li>
			<li>2- Accueillir et regrouper les personnes concernées pour favoriser leur prise en charge et briser leur isolement;</li>
			<li>3- Créer pour ces personnes un lieu favorisant la création de liens d'appartenance et d'entraide</li>
			<li>4- Défendre les droits et promouvoir les intérêts individuels et collectifs des personnes vivant ou ayant vécu avec un diagnostic de maladie mentale;</li>
			<li>5- Sensibiliser la population aux besoins et au vécu des personnes vivant ou ayant vécu avec un diagnostic de maladie mentale;</li>
			<li>6- Se procurer aux fins mentionnées ci-dessus, des fonds ou autres biens par voie de souscription publique :<br />- Recevoir des dons, legs et autres contributions de même nature en argent, en valeurs mobilières ou immobilières, administrer de tels dons, legs et contributions; organiser des campagnes de souscriptions dans le but de recueillir des fonds pour des fins charitables.</li>
		</ul>

Stephan a écrit :
euh...

Pardon, ce fut un peu abrupt

je pensais à :

<link rel="chapter"...  />
<link rel="section"...  />
<link rel="subsection"...  />

Ah ! Ok !

Je vais y jeter un oeil...

Merci

@Laurent Denis,

1- j'ai 51 articles, devrais-je avoir 51 <link rel="subsection"... /> dans le <head> ?

2- À qui cela va t-il servir ?

lol

C'est bien pour cela que je posais la question

C'est un très bon exemple pour réfléchir à l'utilisation des liens relatifs.

En se souvenant que trop de liens tuent le lien :
- rel="home", ou index, ou help, first, up, etc... sont d'une utilité et d'une valeur remarquable, parce qu'il n'y a qu'un seul lien : je ne me casse pas les pieds à chercher où le gars a planqué son lien graphique vers son plan de site, ou à me demander où est le fil d'ariane : je clique directo dans mon interface usuelle.
- rel ="chapter", section, etc. peuvent rapidement devenir totalement imbuvables, par exemple avec 51 liens dans un interface très primitif (le menu que déroule FF en pareil cas)

Au passage, je me suis toujours demandé si ce n'était pas la raison inavouée pour laquelle Opera ne tient compte que d'un seul lien par rel, au contraire de FF (choix tout aussi douteux).

Maintenant, dans ton cas :
- sur cette page précise, les liens "chapter", "section" et "sub-section" ne doivent pas, AMHA, reproduire ta page. En fait, je ne les mettrai pas.
- mais sur les pages de contenu correspondant à ces différents chapitres, section et sub-section, en jouant également sur up et down, first et last, il y a moyen de fournir un système de navigation complet dans l'ensemble du document, en se souvenant que les rel=chapter, section et subsection ne doivent refléter que la position de la page en question dans l'ensemble, et non refléter toute la structure du bidule.

(Pour prendre un autre exemple, les rel générés par DotClear, qui énumèrent toutes les catégories de billet, sont une erreur. Un billet de la catégorie X ne devrait comprendre que :
- le rel chapter de sa catégorie
- un rel up vers la page listant les catégories
- le rel next vers le billet suivant dans la catégorie et pas dans la totalité des billets
- etc.

Et si on se prenait un peu la tête pour enfin définir de bons usages des liens relatifs ?
Modifié par Laurent Denis (30 Jun 2005 - 17:22)

Bon, puisqu'on en parle : Proposition de bonne pratique sur le sujet

Au passage, ce Sgwbl ! de forum s'obtine à coller un emoticon idiot ( ) dans cette url : Soumission(langue)

[ Lien édité par Stephan, copier-coller le lien et remplacer les parenthèses par des crochets. De toute façon, la « Soumission » est passée à l'état de « Proposition » et ce lien semble maintenant mort je transmet en haut lieu le bug. C'est le même bug que quand on veut insérer un [ id ] (sans les espaces) dans un script... ]

Le lien modifié avec les parenthèses est effectivement mort. Pas le lien réel qui n'avait aucun crochet !
Pour retrouver la syntaxe du lien sur lequel se produit le bug, remplacer ci-dessus:
Soumission(langue)ar
Par:
Soumission ar


MDR. Il le fait même en dehors des liens
Donc, à l'origine, il y avait écrit, mais sans les espaces :
S o u m i s s i o n : P a r
Modifié par Laurent Denis (30 Jun 2005 - 19:43)