[resolu] Utilisation des balises de titres (<h1>,<h2> ...)

Bonjour,

J'aurais besoin de votre avis sur l'utilisation des balises de titres et l'accessibilité.

D'après la WCAG 1.0:

a écrit :

3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]
For example, in HTML, use H2 to indicate a subsection of H1. Do not use headers for font effects.

Soit en gros ces balises doivent être utilisées pour structurer le document.

Mais comment interpréter ceci ?

Dans la liste des recommandations du site accessiweb, ceci est repris dans
la recommendation 9.2:

a écrit :

9.2 : La page web est-elle structurée de manière cohérente ?
Commentaire : :
L'utilisation des styles proposés par le HTML du type H1, H2... permet de structurer la page. Ces balises sont très importantes pour structurer une page Web : la balise H1 pour le titre principal H2 pour les sous-menus, ... H6. Ces balises doivent être utilisées pour leur fonction première, la structuration, et non pour leur dimension graphique. De plus, les blocs d'informations doivent être distincts les uns des autres.

Ainsi, ils préconisent d'utiliser la balise H1 pour le titre principal (jusque la je suis d'accord) puis des balises pour les menus et sous menus.
Principe qu'ils utilisent sur leur site de cette étrange façon:

<h2 style="padding-top:0px; padding-bottom:0px;margin-top:0px; margin-bottom:0px;padding:0px;"><img alt="Menu secondaire" style="border:0px; width:1px; height:1px;" src="/_frontOffice/images/magic.gif"></h2>

Ce qui permettrait de créer un "plan de la page" à l'aide de logiciels ?

Ceci me semble bizarre car j'aurais plutôt tendance à utiliser les balises de titre pour structurer le contenu de ma page, en considérant les menus comme une "navigation" et non comme le contenu de la page.

J'aimerais donc avoir votre avis, explication conseils sur ces points :
- comment utilisez-vous les balises h ?
- avez vous déjà utilisé, entendu parler de cette technique d'utilisation des balises h qu'utilise accessiweb / connaissez-vous un logiciel qui utiliserait ceci ?
- que pensez vous de ce site (accessiweb), qui s'autoproclame comme une référence en accessibilité (règles d'or, certification de sites ...) mais qui ne respecte pas ses propres règles (code non valide entre autre ...) ?

Merci d'avance (et en espérant être suffisamment clair).
Modifié par fxoxo (21 Aug 2006 - 17:56)

Bonjour,

fxoxo a écrit :

Ceci me semble bizarre car j'aurais plutôt tendance à utiliser les balises de titre pour structurer le contenu de ma page, en considérant les menus comme une "navigation" et non comme le contenu de la page.

Pourrais-tu préciser, ou mieux, donner une url d'exemple ? C'est assez énigmatique, là.

fxoxo a écrit :

- que pensez vous de ce site (accessiweb), qui s'autoproclame comme une référence en accessibilité (règles d'or, certification de sites ...) mais qui ne respecte pas ses propres règles (code non valide entre autre ...) ?

Don't feed the troll

(Ou bien : RTFM )
Modifié par Laurent Denis (21 Aug 2006 - 17:01)

salut,

fxoxo a écrit :
le contenu de ma page, en considérant les menus comme une "navigation" et non comme le contenu de la page.

Pourtant les menus font partie du document et ce que les <hn> structurent c'est bien le document.
Modifié par clb56 (21 Aug 2006 - 16:59)

Je suis désolé d'insister lourdement, l'artichaut, mais je comprend toujours pas le coup de la navigation qui n'est pas dans le contenu de la page.

(avec un peu de mauvaise foi, certes, mais il y a une question plus intéressante au bout que ce troll bas de gamme sur AccessiWeb).

a écrit :
Pourrais-tu préciser, ou mieux, donner une url d'exemple ? C'est assez énigmatique, là.

En gros, j'utilise H1 pour le titre du site (ou le logo avec en alt de l'image le titre du site) puis le H2 pour le titre de la page, puis les autres balises de titre pour structurer les sous parties de la page. Comme URL d'exemple il y a le site de ma signature (ce n'est pas très représentatif mais je ne peux pas donner d'adresse de site Pro)

a écrit :
Dont feed the troll

je ne savais pas que ce sujet était polémique ...

fxoxo a écrit :

je ne savais pas que ce sujet était polémique ...

Il n'est pas polémque.

Simplement, qulelqu"un qui attaque d'emblée avec:

a écrit :

- que pensez vous de ce site (accessiweb), qui s'autoproclame comme une référence en accessibilité (règles d'or, certification de sites ...) mais qui ne respecte pas ses propres règles (code non valide entre autre ...) ?

évoque immédiatement soit:
- quelqu'un qui ne maîtrise pas le sujet et qui devrait faire preuve d'un peu plus de prudence dans ses propos
- quelqu'un qui connaît le sujet et qui fait de la provocation

(réponse sur le fond des hn suit)

a écrit :
clb56:
Pourtant les menus font partie du document et ce que les <hn> structurent c'est bien le document.

Ok, en fait j'ais trops une vision centrée sur le contenu (un peu comme le site de "Le Monde" qui n'utilise qu'une balise H1 dans ses articles)

Donc en gros h1 titre du site, h2: menu, (éventuellement h3 pour les sous menus), hn titre-sujet de la page, hn-1 sous partie ... ?

Mais comment marquer le menu d'une balise h ? en utilisant le truc d'accessiweb ?

Concernant le fait d'intégrer ou non la "navigation" dans la structure titrée de la page, quelques données de base:

- contrairement à ce qui l'usage, les normes Web raisonnent en termes de ressource (ie: de document) et non de page. La notion de site n'a pas d'existence structurelle, et les menus de navigation n'ont jamais été prévus en HTML (sauf, de loin, sous la forme de ressources appartenant à la même collection via des link rel).

- Bref, le menu de navigation dans un site est un intrus qu'il faut gérer au mieux dans un document où il ne devrait pas figurer. Le résultat ne sera pas idéologiquement parfait, mais il sera utile.

- Intégré au titrage, ce menu offre de nombreuses facilités du point de vue de l'accessibilité.

- Extrait du titrage, c'est très pénible dans un lecteur d'écran, dans divers scripts facilitant la navigation au clavier en situation de handicap moteur, etc.

D'autre part, le fait que la navigation soit intégrée dans la structure de titrage permet à de nombreux scripts d'interaction de le présenter dans des mécanismes de navigation rapide. Cas-type: mon lecteur d'écran qui me permet de naviguer de titre en titre.

Enfin, le fait que le site d'AccessiWeb ne soit pas valide XYZ ne fait que refléter une règle connue selon laquelle le cordonnier est toujours le plus mal chaussé. Le sujet est pris en compte au sein d'AccessiWeb, les moyens suivent comme ils peuvent, et c'est bien le dernier reproche que je ferai à cette association.
Modifié par Laurent Denis (21 Aug 2006 - 17:19)

[HS]

évoque immédiatement soit:
- quelqu'un qui ne maîtrise pas le sujet et qui devrait faire preuve d'un peu plus de prudence dans ses propos
- quelqu'un qui connaît le sujet et qui fait de la provocation

Désolé, je ne voulais froisser personne mais seulement avoir un avis (et je ferais preuve de plus de prudence...)

[/HS]

Pas de mal, cela arrive à tout le monde

a écrit :

- Extrait du titrage, c'est très pénible dans un lecteur d'écran, dans divers scripts facilitant la navigation au clavier en situation de handicap moteur, etc.

D'autre part, le fait que la navigation soit intégrée dans la structure de titrage permet à de nombreux scripts d'interaction de le présenter dans des mécanismes de navigation rapide. Cas-type: mon lecteur d'écran qui me permet de naviguer de titre en titre.

Aurais-tu des exemples de logiciels/script utilisant cela et/ou un lien expliquant la syntaxe à utiliser pour permettre cela ?


Si j'ai bien compris, structurellement, il ne faudrait pas utiliser de titre pour les menus, mais en pratique cela améliore grandement l'accessibilité ?

Les Hn sont des titres de section, qui introduisent donc... des sections.

Là, le menu de navigation est considéré comme une section, et une « introduction » (titre qui précise le statut de la section qui suit) a été jugée nécessaire. L'exemple suivant est selon moi assez logique :

<h1>Titre du site</h1>

<h2>Rubriques du site</h2>
<ul>
	<li>Choucroute</li>
	<li>Pudding</li>
	<li>Cari Ti-Jack</li>
	<li>Special Ramen</li>
</ul>

Si on a un menu de navigation un peu complexe, ou en plusieurs parties, il sera sans doute utile d'indiquer :

<h2>Navigation dans le site</h2>

<h3>Rubriques du site</h3>
--- premier menu ---

<h3>Articles dans la rubrique courante</h3>
--- deuxième menu ---

Quelque chose du genre.

Voilà du moins l'information à faire passer. MAIS, cette information est peut-être déjà perceptible, au moins en partie, via l'organisation dans l'espace et l'habillage graphique des éléments de la page. En effet, la mise en forme d'un document n'est pas un simple habillage, mais permet également de donner du sens, en soulignant la fonction des différents éléments.

Donc autant structurer le document dès le départ pour une meilleure lisibilité (d'où l'utilisation des balises hN), quitte à cacher -- via la feuille de style -- certaines informations structurantes qui seront transmises par la mise en forme. Exemple : si la mise en forme permet de repérer et distinguer directement le menu principal et le menu secondaire, on peut vouloir cacher (visuellement) les titres de section correspondants.

Tout cela sans céder à la « cachite aiguë », bien entendu !
Dans certains cas, il sera peut-être même possible -- et en tout cas intéressant -- de laisser ces titres explicatifs visibles, quitte à les réduire en taille pour ne pas les rendre trop massifs ou à procéder à tout autre mise en forme pertinente.

Il s'agira alors de doser correctement :
- d'une part le risque de redondance (qui peut être perturbante pour l'utilisateur) ;
- d'autre part le risque d'une information trop implicite, qui passerait uniquement par la mise en forme : certains utilisateurs peu coutumiers de la navigation sur internet auront peut-être du mal à retrouver les différents éléments « outils » (navigation, informations sur le site, etc.) si ceux-ci sont signalés uniquement par des conventions de mise en page web dont ils n'ont pas l'habitude, et serons peut-être reconnaissants s'ils peuvent trouver des indications explicites leur disant, par exemple : « voici le menu pour naviguer sur ce site » (note : il s'agit là du message à transmettre, pas d'un texte à utiliser tel quel).


Voili voilou, mes deux centimes d'euro.

Disons que sur le fond, oui, la navigation ne devrait pas être présente dans le contenu HTML sous cette forme. HTML prévoyait très théoriquement un mécanisme pour inclure une navigation à l'aide des <link rel>; Mais ce dernier est resté tout théorique. Ce qui n'a pas pour autant facilité la mise en pratique de ce format

Concrètement, les menus de navigation inclus dans le contenu HTML sont une aberration inévitable, qu'il s'agit simplement de gérer au mieux. A cet égard, le fait de leur donner au moins un titre global "Navigation" est pertinent (le niveau du titre en question importe moins).

Comme exemple de logiciel exploitant le titrage: tous les lecteurs d'écran actuels, à commencer par JAWS (le plus commun en Europe). Le fait de pouvoir naviguer dans un titrage exhaustif permet de se représenter le plus rapidement possible la structure d'un interface Web.

Comme exemple de script client, celui-ci pour Opera: http://userjs.org/scripts/browser/enhancements/auto-toc (Un excellent outil de test, d'ailleurs, une fois amélioré pour qu'il prenne en compte des contenus de titre plus variés, tels que des images)

Autre exemple-test classique: http://www.w3.org/2002/08/extract-semantic

Laurent Denis a écrit :
... et les menus de navigation n'ont jamais été prévus en HTML (sauf, de loin, sous la forme de ressources appartenant à la même collection via des link rel).

- Bref, le menu de navigation dans un site est un intrus qu'il faut gérer au mieux dans un document où il ne devrait pas figurer.

C'est très intéressant, je n'y avais jamais pensé sous cet angle là. Ou plutôt je n'avais jamais fait le lien entre le point que tu as souvent indiqué :

a écrit :

La notion de site n'a pas d'existence structurelle

Et cette conséquence pour les menus de navigation.

Pour ma part j'avais plutôt tendance à considérer que rien de ce que comprend le document ne doit échapper à la structuration par titre (une exhaustivité complète donc de ce point de vue) et à envisager des constructions type :

<h1>Préambule d'accessibilité</h1>
...
<h1>Titre spécifique page</h1>
...
<h1>menus</h1>
...

Le pire c'est que de guerre lasse j'ai laisser tomber cette rigueur tant je ne l'ai jamais vue appliquée où que ce soit.

mpop a écrit :
L'exemple suivant est selon moi assez logique :

<h1>Titre du site</h1>

<h2>Rubriques du site</h2>
<ul>
	<li>Choucroute</li>
	<li>Pudding</li>
	<li>Cari Ti-Jack</li>
	<li>Special Ramen</li>
</ul>

Ce que tu décris là est, sur le fond, une page d'accueil par exemple. Pas une page de contenu. "Choucroute", en tant que document, n'a pas à contenir de liens sous cette forme de "menu" vers "Pudding" et "Cari Ti-Jack", sauf au titre très particulier de <link rel="section">ou similaires. Mais peu importe, le HTML en tant que langage de structuration de document est largement tombé aux oubliettes, et c'est peut-être aussi bien: cela ne prépondait manifestement pas aux besoins. Reste qu'il a été conçu en grande partie dans cet esprit, et qu'il peine quand on veut lui faire faire autre-chose. Il faut simplement être très prudent sur ce qu'on lui fait dire
Modifié par Laurent Denis (21 Aug 2006 - 17:56)

fxoxo a écrit :
Mais comment marquer le menu d'une balise h ? en utilisant le truc d'accessiweb ?

Celui-là où un autre. Il existe plusieurs solutions, dont aucune n'est une solution miracle... mais des solutions satisfaisantes si, il y en a.

Celle d'Accessiweb pose un problème : si la feuille de style est désactivée, l'information donnée par le titre ne sera pas visible, car l'image (d'un pixel) sera chargée, et le texte pas affiché.
Mais c'est un cas qui se présente tout de même assez rarement (sans être totalement négligeable).

Deux autres méthodes dans la FAQ :
http://forum.alsacreations.com/faq/#item13

On peut peut-être rajouter celle du positionnement absolu (je ne sais plus s'il y a des contre-indications particulière) :

.cacher {position: absolute: left: -5000px;}

Note : on positionne l'élément à cacher (tout un titre, ou un span à l'intérieur d'un titre, par exemple) en dehors de la zone visible, à gauche -- pas en haut ou en bas, car sur une page un peu longue on peut le voir apparaître, sauf pour un élément dont on sait qu'il sera en haut de page (en-tête) et que l'on veut placer au dessus de la zone visible.

(S'il y a des problèmes potentiels avec cette méthode, ça m'intéresse de le savoir, car il m'arrive de l'utiliser).

@fxoxo : il y a parfois des emballements, comme celui-là, sur ce forum...
Dans ce cas-là, je crois qu'il faut remercier l'auteur de la question initiale pour ses messages "déclenchants", et espérer qu'il ne nous en voudra pas trop de tout ce bavardage

a écrit :

mpop:
Voili voilou, mes deux centimes d'euro.

Ce n'est pas cher donné pour ce très bon post qui m'a bien éclaircit le sujet !

a écrit :

Laurent Denis:
[...]

Merci pour l'explication et les liens, je vais installer/potasser ça.

Merci pour vos réponses, ça m'a éclairé sur ce sujet qui ne me semblait pas clair et peu documenté (à moins que je n'ai pas assez googlé )
Modifié par fxoxo (21 Aug 2006 - 17:57)

Je n'avais pas vu ce post,

Laurent Denis a écrit :
Je suis désolé d'insister lourdement, l'artichaut, mais je comprend toujours pas le coup de la navigation qui n'est pas dans le contenu de la page.

Là je ne comprend pas du tout. Il me semble que tu as mésinterprété mon propos (bon évidemment c'est de ma faute avec mes délires exploratoires de navigation sans menu mais ce que j'ai écrit n'était, en l'occurence, pas du tout orienté par cette perspective).
Modifié par clb56 (21 Aug 2006 - 17:59)

C'était réthorique, disons. Sans importance après coup, les échanges ayant tourné autrement.