Structure du contenu

Aperçu – Structure du contenu

Pour comprendre un document, tout le monde a besoin de comprendre sa structure. Les utilisateurs du lecteur d’écran doivent élaborer un modèle mental de la page et dépendent des auteurs de contenu qui :

• identifient, avec le balisage approprié, les titres, les menus, les bannières, les paragraphes, les listes, les citations, le code, les tableaux et les autres fonctions; et,
• au moment de rédiger des instructions permettant de comprendre et d’utiliser le contenu, identifier les éléments par leur nom visible.

Structures de page communes

Définir les éléments de base de votre structure de page avec l’élément HTML approprié au travail, c’est-à-dire en utilisant un balisage sémantique. Il s’agit d’une liste partielle d’éléments HTML sémantiques qui définissent la structure. D’autres éléments, comme les listes, liens, tableaux, formulaires et images, sont décrits ailleurs dans le présent cours.

Articles

L’élément HTML5 <article> représente une composition complète ou autonome dans une page Web. Parmi les exemples d’articles figurent un objet sur un site de magasinage ou un article sur un site de nouvelles.

HTML

Début du code

 <article> 
   <h2>Dentifrice classique</h2>
</article>
<article>  
   <h2>Dentifrice extrême</h2>
</article>

Fins de code

Sections

L’élément HTML5 <section> marque une région générale d’une page Web ou d’un article. Il est utilisé pour le regroupement thématique du contenu et devrait s’ouvrir avec un en-tête.

Si un élément <section> est nommé (utilisant aria-label, aria-labelledby ou un title attribut), il sera designé comme point de repère.

HTML

Début du code

 <section>
   <h2>Chapitre 2</h2>
</section>

Fins de code

Paragraphes

Utilisez l’élément paragraphe (<p>) pour marquer les paragraphes du texte, comme celui-ci. Le style uniforme des paragraphes améliore la lisibilité du texte. Il donne également plus de contrôle aux utilisateurs lorsqu’ils personnalisent leur affichage.

Citations

L’identification d’une citation aide à préciser que le contenu est attribué à un autre auteur. Les citations peuvent être balisées comme inclusions ou sous forme des blocs de texte. Les technologies d’assistance peuvent indiquer aux utilisateurs l’endroit où une citation commence et se termine, ce qui peut éviter les malentendus.

<p>Voici une définition du <cite>Concept de structure de page</cite> tirée de W3 WAI.</p>
<blockquote>
   <p>Le contenu bien structuré permet une navigation et un traitement plus efficaces. Utiliser HTML et WAI-ARIA pour améliorer la navigation et l’orientation sur les pages Web et dans les applications. </p>
</blockquote>

<p>Helen Keller a affirmé : <q>L’apitoiement sur soi est notre pire ennemi et si nous y cédons, nous ne pourrons jamais rien faire de bien dans le monde</q></p>

Balises strong (gras) et em (italique)

STRONG et EM sont des balises sémantiques qui signifient que l’auteur souhaite mettre des éléments en relief; ceux­ci seront affichés en gras (<strong>) ou en italique (<em>) dans un navigateur visuel. Les éléments <b> et <i> ne doivent pas être utilisés.

Les éléments <strong> et <em> sont souvent utilisés pour mettre en évidence des mots ou des phrases dans un paragraphe de texte. Par exemple :

La prise en charge de <strong> et <em> par le lecteur d’écran est faible.

Ressources WCAG connexes

La description des structures de page est tirée du document de l’Initiative pour l’accessibilité du Web (IAT) : Structure du contenu (WAI) dans Tutoriel sur la structure des pages des Tutoriels sur l’accessibilité du Web (en anglais seulement). Eric Eggert et Shadi Abou-Zahra. Contributeurs : Groupe de travail sur l’éducation et la sensibilisation (GTSE). Copyright © 2019 W3C® (MIT, ERECIM, Keio). Mis à jour le 27 juillet 2019 (publié pour la première fois en avril 2017).

Abréviations

Le Guide de rédaction du contenu du site Canada.ca exige stipulent que quand vous utilisez une abréviation pour la première fois sur une page, vous devez indiquer ce que signifie le terme complet entre parenthèses, ou alors inscrire le terme complet suivi de l’abréviation entre parenthèses (p. ex., « Emploi et Développement social Canada (EDSC) » ou « EDSC (Emploi et Développement social Canada) »).

Ressources WCAG connexes

Titre de la page

Le titre de la page est la première chose déclarée par les lecteurs d’écran lors du chargement de la page. Les navigateurs l’affichent dans l’onglet de la page, dans la liste de l’historique des boutons Reculer d’une page et sous forme de nom de signet. Le titre peut également apparaître dans les cartes du site, les résultats de recherche et le texte du lien. Cette information unique aide tous les utilisateurs à trouver du contenu, à s’y orienter et à y naviguer.

Pratique exemplaire concernant les titres de page :

• Assurez-vous que chaque page Web définit son sujet ou son objectif dans un titre descriptif.
• Définir le titre dans un <title> élément dans le HTML <head> élément.
• Vous pouvez également indiquer le plus grand recueil de pages Web après la description de la page.

		<head>
		   <title>Développeur Java - Site d’emplois - Entreprise XYZ</title> 
		</head>
		

Ressources WCAG connexes

Instructions d’orientation

Lorsque vous formulez des instructions sur l’endroit où trouver ou sur la manière d’utiliser du contenu, évitez les descriptions qui reposent exclusivement sur la capacité de voir ou d’entendre. Les caractéristiques sensorielles des composants de la page, comme leur forme, leur couleur, leur taille, leur emplacement visuel, leur orientation ou leur son, sont des renseignements inutiles pour les personnes ayant des déficiences sensorielles connexes. Les instructions « Read the review to the right » (Lire l'énoncé situé à droite) et « Click the red button, below » (Cliquer sur le bouton rouge ci-dessous) sont deux obstacles puisqu’elles reposent sur des caractéristiques sensorielles. Assurez-vous plutôt d’inclure une étiquette textuelle dans les instructions et au niveau de l’élément présentant un intérêt, par exemple « Lire l’énoncé » Une soirée à l’opéra, , à droite » et « Cliquez sur le bouton rouge Aperçu ci-dessous. »

Ressources WCAG connexes