Leçon 10Le processus de conception : comment faire de la place pour l'accessibilité du Web ?

Notion 71

Structurer correctement le HTML

Compétences ciblées

Apprendre à respecter les exigences HTML lors de l'intégration de votre conception.

HTML5?

Le HTML est le langage utilisé pour structurer et présenter le contenu d'une page Web. Il comporte certaines fonctionnalités propres à rendre les sites Web plus accessibles, en étant plus sémantique. La plupart des navigateurs prennent désormais en charge le HTML5, qui est la version la plus moderne du HTML, publiée en 2008.

Si vous n'êtes pas familier avec le langage HTML, vous pouvez utiliser ces illustrations pour vous aider dans votre lecture :

Transcription du diaporama
Balises HTML : notions de base

Les balises sont utilisées pour créer la structure et la mise en page de la page web.
Le contenu d'une balise est placé entre une balise <opening tag> et une balise </closing tag>, avec une barre oblique "/".

Il existe plusieurs types de balises, avec des fonctions spécifiques :
<html> : langage de la page, contient tous les éléments HTML ci-dessous.
<head> : contient les métadonnées (titre du document, jeu de caractères, styles, liens, scripts, la balise <title>, etc.) que les utilisateurs ne voient pas.
<body> : contient le contenu de la page web (images, articles, listes, paragraphes, tableaux, liens hypertextes, etc.)
<header> : contient un contenu introductif ou un ensemble de liens de navigation.
<nav> : contient un ensemble de liens vers d'autres pages ou parties de la page.
<article> : contient des informations/contenus qui constituent généralement le contenu principal de la page web (billet de forum, billet de blog, article d'actualité, etc.)
<h1> (ou h2, h3... à h6) : élément d'en-tête textuel tel qu'un titre.
<footer> : contient les informations du pied de page (contacts, plan du site, etc.).

---NOUVELLE SLIDE---

Cette page web a été structurée à l'aide de balises et d'éléments de bloc dans un langage de code HTML. (Image d'une page web)

---NOUVELLE SLIDE---

(Image de la version HTML de la page web)

---FIN DU DIAPORAMA

Ce langage utilise des balises qui donnent un sens à la structure de la page, en indiquant quel type d'élément constitue un bloc. L'utilisation du HTML sémantique ne signifie pas que nous ne devons pas suivre les directives en matière d'accessibilité, comme les balises aria, mais c'est un outil supplémentaire pour créer des sites Web accessibles. Les repères permettent à un lecteur d'écran de sauter certaines sections et d'accéder à une région spécifique de la page Web.

Structure? Repère !

Plusieurs types d'éléments de bloc existent en HTML5. Ils permettent de structurer la mise en page de la page. Par exemple, <en-tête> est équivalent à un élément <div>, mais avec des indications spécifiques : il s'agit généralement d'une bannière, et contient souvent un autre repère, un <nav>pour la navigation.
Le repère <principal> est unique dans une page, et c'est là que se trouve le contenu. Il est facile à trouver lorsqu'on utilise un lecteur d'écran.
Il y a aussi le repère <pied de page>, en bas de la page.
Nous pouvons indiquer qu'un élément est indépendant des autres types du même élément en utilisant une balise <article>, il est donc plus facile de repérer le contenu dans un repère <principal>.

Concevoir en tenant compte des points de repère

Lorsque vous concevez une page Web, vous pouvez séparer la mise en page en différentes zones : menus, barre latérale, contenu principal, etc. Vous pouvez utiliser ces séparations visuelles pour identifier vos points de repère HTML5. Vous pourrez ainsi transmettre la structure de votre page Web aux lecteurs d'écran et la rendre plus accessible.

Les points de repère ne sont pas censés contraindre votre conception, mais plutôt donner des indications sur le type d'informations que l'on peut trouver dans une zone spécifique de votre page.