Share
La spécification HTML décrit six éléments d'en-tête: h1, h2, h3, h4, h5, et h6. Le nombre dans chacun de ces éléments de rubrique reflète sa priorité, avec h1 étant le plus général et h6 être le plus spécifique.
C'est une chose importante à savoir! Le sondage 2017 de WebAIM sur les lecteurs d'écran nous indique que la navigation par en-têtes est le moyen le plus important pour les personnes qui utilisent des technologies d'assistance pour localiser des informations. Pour cette raison, il est important de créer correctement les en-têtes de votre site Web..
Ce tutoriel fait partie de l'accessibilité Web: le guide complet d'apprentissage, où nous avons rassemblé une gamme de tutoriels, d'articles, de cours et d'ebooks pour vous aider à comprendre l'accessibilité au Web dès le début..
Avant d'entrer dans les détails du fonctionnement de la technologie d'assistance, il y a une raison pour laquelle nos médias imprimés utilisent des éléments tels que des chapitres, des sections et des sous-sections et des sauts de scène. La division du contenu en morceaux facilite la compréhension, la digestion, la conservation et la référence..
Morceaux de contenu, du journal The GuardianBien que le Web ne soit pas imprimé, il emprunte tout ce qu'il a de bon à cela: les éléments d'en-tête HTML sont analogues à ces conventions d'impression. C'est l'une de ces choses que tout le monde prend pour acquis, mais qui aide une tonne de personnes. Les préoccupations cognitives sont répandues et l'emportent sur toutes les autres formes de handicap. Le regroupement de contenu en éléments logiques aide tout le monde, des personnes aux prises avec un problème biologique tel que la démence aux personnes aux prises avec une déficience de la situation telle que la privation de sommeil ou l'apprentissage d'une nouvelle compétence..
Certains types de technologies d’aide (notamment les lecteurs d’écran) permettent aux utilisateurs de passer d’un en-tête à l’autre sur une page. C'est l'équivalent de ce que font quotidiennement les personnes qui n'utilisent pas de technologie d'assistance, parcourant une page pour en comprendre l'essentiel, s'arrêtant lorsqu'elles trouvent l'information recherchée..
Certaines technologies d'assistance peuvent prendre ces titres et les transformer en une liste ordonnée. Cette liste peut être utilisée pour déterminer rapidement le sens général de la page..
Liste générée des en-têtes sur la page WikipediaSi vous ne maintenez pas une séquence logique (par exemple, passer du niveau 1 au niveau 3 sans déclarer un niveau de niveau égal à deux), cela peut créer une expérience potentiellement déroutante et certainement ennuyante pour la personne qui se fie aux titres pour naviguer. Cette lacune dans la séquence logique alourdira la tâche de l'utilisateur, l'obligeant à utiliser d'autres méthodes plus longues et fastidieuses pour naviguer afin de déterminer la logique de la structure globale de la page (le cas échéant) et si le contenu dont il a réellement besoin est réellement affiché. présent sur la page.
Une autre chose importante à faire est de s’assurer qu’il n’ya que un titre de premier niveau par page. Cet en-tête devrait décrire le point principal du contenu de la page. Par exemple, une page sur l'histoire de la pâtisserie française pourrait avoir un titre de premier niveau écrit comme ceci:
L'histoire de la pâtisserie française
…
Malheureusement, il existe une idée fausse selon laquelle vous pouvez utiliser des en-têtes de premier niveau pour le début de chaque élément de sectionnement de contenu sur une page, en laissant au navigateur le soin de déterminer le reste via l'algorithme de structure de document. Cet algorithme est une fiction spéculative. Au moment de la publication de cet article, il n'avait pas encore été implémenté par tout navigateur. Pour cette raison, nous devons honorer la priorité des circonscriptions et utiliser les autres éléments d'en-tête..
Les en-têtes de niveau 2 à 6 doivent suivre l'en-tête de premier niveau et être créés dans un ordre séquentiel décrivant les principaux points de discussion du contenu de la page..
Par exemple, voici la structure de titre de cet article:
En parcourant cette liste, vous êtes en mesure de déterminer rapidement en quoi consiste cet article. Plutôt chouette, hein?
Il est également intéressant de souligner que les en-têtes, tout comme les formats hiérarchiques tels que JSON, peuvent être imbriqués dans d’autres en-têtes, à condition qu’ils progressent logiquement. Dans un en-tête de second niveau, vous pouvez utiliser plusieurs en-têtes de troisième niveau. Chacune de ces sous-positions peut, à son tour, avoir des sous-positions de quatrième niveau imbriquées..
Lorsque vous avez terminé avec un sujet, vous pouvez fermer vos en-têtes imbriqués. C'est le seul endroit où «sauter» les niveaux de titre est acceptable. Vous avez terminé de discuter d'un concept spécifique et de revenir à un sujet plus général..
Accentsconagua
h1 L'histoire de la pâtisserie françaiseh2 Moments importantsh3 Le 16ème siècleh4 Pâte feuilletéeh4 Oubliesh3 Le 17ème siècleh4 Pâtisserie feuilletéeh4 Crème fouettéeh5 Le chef du prince de Condéh3 Le 18ème siècleh4 Macaronsh3 Le 19ème siècleh3 Le 20ème siècleh2 Personnes importantesh3… Cet exemple montre la validité d'un titre de cinquième niveau (Le chef du prince de Condé) suivi d'un titre de troisième niveau (Le 18e siècle), à condition que les titres des parents soient dans un ordre séquentiel. Si un titre de troisième niveau avait précédé le titre de cinquième niveau, il aurait été invalide.
Utiliser trop de rubriques peut créer une expérience accablante pour une personne qui compte sur un lecteur d'écran pour naviguer. Cela peut sembler un peu contre-intuitif au début, vu que je viens de vous dire à quel point les rubriques sont importantes pour l'aide à la navigation..
Pensez-y comme suit: bien que trop d'options de navigation visuelle sur une page puissent nuire à la concentration et à l'attention d'une personne, trop de vedettes créent un «bruit» qui distrait et obscurcit l'essentiel du message que vous essayez de transmettre..
Il n'y a pas de règle définie pour le nombre d'en-têtes trop nombreux. Cela dépend entièrement du contenu et de la quantité de contenu. Par exemple, une recette peut ne nécessiter que le nom du plat, ses ingrédients et ses instructions, alors qu'un article académique peut nécessiter une ventilation beaucoup plus nuancée..
Une bonne structure de titre ne profite pas uniquement aux personnes utilisant des technologies d'assistance. Comme les en-têtes ont une signification sémantique, d’autres services peuvent s’intégrer à cette description programmatique du contenu et le recontextualiser de différentes manières conviviales. Par exemple, voici ce que le moteur de recherche Bing fait avec des pages bien construites:
Résultat du moteur de recherche BingTout comme les lecteurs d'écran, les services tels que Google Documents et Dropbox Paper génèrent automatiquement une liste ordonnée de titres pour vous permettre de comprendre et de parcourir rapidement un document. De nombreux traitements de texte peuvent également générer rapidement une table des matières mise à jour de manière dynamique à partir d'en-têtes, une tâche fastidieuse et fastidieuse. Et grâce à l'interopérabilité de HTML, nous pouvons même recréer ce comportement de navigation par en-tête en tant qu'extension de navigateur.!
Nous oublions trop souvent que les classes CSS peuvent être appliquées aux éléments d’en-tête, comme tout autre élément HTML déclaré à l’intérieur du corps.
La raison pour laquelle je mentionne cela est que les éléments de titre sont couramment utilisés en raison de la Regardez(“Ooh! J'aime la couleur et la police de caractères du h3, Je vais utiliser ça. ”), Et non quelle priorité de contenu ils décrire (La brioche est une sorte de viennoiserie). C'est un problème généralisé.
Dans un monde idéalisé de pureté académique, nous honorerions l'honnêteté matérielle des en-têtes d'éléments en les dimensionnant et en les stylant selon la hiérarchie qu'ils décrivent..
Cependant, c'est le monde réel. Les sites Web et les applications Web modernes sont des choses complexes sur lesquelles travaillent de nombreux types de personnes différentes, qui ont toutes un niveau d'expérience, d'intérêt, de familiarité et de capacités différents lors de la conception et du codage..
Le monde réel peut exiger un titre de cinquième niveau qui doit ressembler à un titre de deuxième niveau, ou quelque chose de tout à fait nouveau. Dans ces situations, il est préférable de conserver la structure de la page logique sous-jacente et de modifier les éléments visuels de l'en-tête:
Des soins d'experts à un prix raisonnable
C'est un compromis et une reconnaissance du fait que le monde réel est compliqué. Cette approche favorise la préservation de la partie importante: la navigation intuitive et efficace pour les technologies d'assistance..
Des méthodologies telles que les styles utilitaires permettent une approche encore plus flexible pour modifier les éléments visuels d'un en-tête:
Termes et conditions
Pour cet exemple, je déclare une série de petits ajustements pour ajuster la présentation de l'en-tête jusqu'à obtenir l'aspect visuel souhaité. Vous rencontrerez généralement des styles d’utilitaire sur des sites Web et des applications Web plus vastes pilotés par l’État, où la faible spécificité des classes garantit la cohérence..
Pour aider à renforcer l'utilisation des en-têtes correctement ordonnés et imbriqués, il peut même être intéressant d'utiliser une réinitialisation du style de l'en-tête pour conserver tous les en-têtes sans classe déclarée ayant la même apparence..
h1, h2, h3, h4, h5, h6 couleur: hériter; taille de police: 1em; line-height: hériter; marge: 0; rembourrage: 0; alignement vertical: ligne de base;
Il s’agit d’une conception légèrement défensive qui incite à réfléchir à la manière dont la structure d’un document est modifiée. en forme de sur comment regards. Il est destiné à être déclaré après une réinitialisation CSS importée, afin de pouvoir écraser les opinions de la réinitialisation..
Le deuxième problème le plus difficile en informatique consiste à nommer les choses. Le premier est d'admettre que vous ne savez pas quelque chose. Je ne vais pas présumer connaître le meilleur moyen de nommer des classes de style pour votre site Web ou votre application Web. Cependant, si vous utilisez une approche basée sur des styles non utilitaires, je recommanderais ne pas les nommer .h1, .h2, .h3, etc.
Le problème avec cette approche est que les personnes non familiarisées avec la base de code risquent d'interpréter ces noms de classe comme des instructions indiquant qu'il est nécessaire de faire correspondre le nom de la classe au niveau de l'en-tête. Cela renforcera le «à quoi il ressemble» par-dessus le problème «ce qu’il décrit».
J'ai également rencontré des situations dans lesquelles il est admis qu'il est acceptable d'utiliser HTML autrement que comme éléments d'en-tête pour les en-têtes d'auteur («Ah, je peux faire ceci. div ressemble à un h5!”). Pas génial!
L'enquête 2017 de WebAIM sur les lecteurs d'écran nous indique également que les titres manquants ou inappropriés sont l'un des dix problèmes les plus problématiques rencontrés par les personnes qui dépendent de la technologie d'assistance pour naviguer sur le Web..
Il s'agit d'un problème d'accessibilité généralisé avec une solution simple. Prenez un peu de temps pour examiner les pages de votre site Web ou de vos applications Web pour voir si la structure de votre en-tête décrit la page avec précision et si cette description suit un ordre logique. Cela pourrait être aussi simple que de déplacer quelques chiffres!
