En-têtes d'accessibilité Web et h1-h6 - tout le contenu doit-il être placé sous ces balises?

Question

En haut de beaucoup de pages dans notre application Web nous avons des messages d'erreur et des notifications, 'Enregistrer' et d'autres boutons, et puis notre balise h1 avec le titre du contenu. Lorsque vous rendez une application Web accessible, est-il toujours acceptable d'avoir du contenu au-dessus de la balise de structure de niveau supérieur comme nous le faisons ici?

Answer 1

Oui (vous pouvez placer des objets au-dessus d'eux). Le H signifie simplement Heading. C'est une question de savoir à quoi correspond le titre. Mon seul bémol est, H2 ne devrait pas être vraiment au-dessus de H1, et H3 ne devrait pas être au-dessus de H2. Mais je ne pense pas que ce soit une règle. Les sites ont des menus, des avertissements, des notifications. Il est acceptable de les mettre au-dessus du reste de votre contenu. Je ne vois pas comment cela affecterait l'accessibilité tant que votre contenu est commandé de manière logique. Regardez la page CSS désactivée. Est-ce que ça a l'air logique? C'est la partie la plus importante de l'accessibilité.

Bien que certaines personnes fassent un effort supplémentaire pour avoir le menu comme dernier élément du balisage et utilisent le CSS pour le ramener au sommet. Personnellement, je trouve cette solution contre-productive. Le menu est toujours important, il appartient en haut de la page.

Answer 2

Oui, il suffit de considérer que c'est dans cet ordre que l'utilisateur obtiendra l'information. Donc, si vous venez de faire une opération, il semble que ce soit une bonne idée d'avoir un message lié à la première chose. Si c'est une notification qui apparaît sur une page sans rapport avec ce que vous faites, je ne le mettrais pas dessus, car cela pourrait être un peu bizarre. Vous pouvez également utiliser un navigateur de texte qui n'utilise pas de styles, il devrait ressembler à un document avec des en-têtes appropriés.

Answer 3

En tant qu'utilisateur de lecteur d'écran, je n'aime pas le contenu au-dessus du titre principal. Normalement, je navigue par titres donc manquerait le message d'erreur. Une meilleure solution consiste à afficher un en-tête h1 au-dessus du message d'erreur, puis de laisser le reste de vos en-têtes intacts vous donner deux titres h1.

Answer 4

Les balises de titre sont utilisées pour indiquer la hiérarchie du contenu en dessous. Vous ne devriez avoir qu'une seule balise h1 et ce devrait être le premier contenu à apparaître sur votre page (il s'agit généralement du nom du site). En outre, vous ne devez pas ignorer les balises d'en-tête lorsque vous explorez différents niveaux de contenu.

Dans votre cas, vous pouvez toujours utiliser CSS pour positionner les éléments au-dessus de la balise h1 tant qu'elle est dans le bon ordre dans le code HTML.

Answer 5

Je suppose que les éléments au-dessus du titre sont utilisés par JavaScript. Dans ce cas, il est préférable qu'ils soient créés par JavaScript, non inclus dans la source de la page.

Pour revenir à votre question initiale, il est probablement préférable qu'ils soient au bas de la page. Cependant, s'ils sont cachés en utilisant le CSS "display: none;" ou "visibilité: caché" propriétés alors ils ne seront pas vus par la plupart (peut-être tous?) lecteurs d'écran ou par de nombreuses autres technologies d'assistance, et ne devrait donc pas être un problème. J'ai écrit un assez détaillé explanation of why accessibility technology ignores such elements.

Bien sûr, si quelqu'un désactive la CSS, les choses vont sembler assez compliquées. S'il y a du contenu sur la page qui peut être utilisé même lorsque CSS et/ou JavaScript sont désactivés, alors mettre ces éléments au bas de la page rendra au moins les choses moins encombrées.