Créer un blog accessible avec HTML5

OpenClassrooms

Formation

En Ligne

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Les meilleurs cours en HTML

Afficher tout

Afficher tout

Description

  • Typologie

    Formation

  • Méthodologie

    En ligne

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Les matières

  • Blog

Le programme

Introduction du cours

Vous connaissez HTML5 mais vous avez du mal à utiliser les balises appropriées ?
Quelles balises utiliser et où les utiliser ?

Ce tutoriel est fait pour vous ! HTML5 comporte bon nombre d'éléments possédant un sens sémantique fort, mais il n'est pas facile de savoir quand les utiliser, par exemple pour afficher les articles ou les commentaires dans un blog. Quand faut-il utiliser la balise <nav> ? La balise <aside> ? Plutôt <div> ou <section> ? Et pourquoi pas <header> pour les en-têtes des articles ?

Beaucoup de questions... qui trouveront leurs réponses dans ce tutoriel ! Nous allons voir comment créer la structure HTML5 d'un blog : la page de base, les articles ainsi que les commentaires, et bien évidemment, le contenu des articles. Ce sera aussi l'occasion de parler des règles d'accessibilité ARIA, une norme trop méconnue du W3C ainsi que de la spécification Microdata introduite par HTML 5..

La page

Avant de commencer, un petit rappel sur la structure minimale d'une page en HTML 5 s'impose :

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Blog en HTML5 qui va bien</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> </body> </html>

L'instruction conditionnelle <!--[if lt IE 9]> charge un fichier Javacsript qui va permettre aux versions d'Internet Explorer antérieures à la version 9 de reconnaître et d'afficher correctement les nouveaux éléments HTML5. Ce fichier est fourni par l'intermédiaire de Google Code.

La première étape est de créer la structure globale de la page, c'est-à-dire la bannière/en-tête, la colonne de navigation, le corps de la page et le pied de page. Ça tombe bien, c'est le plus facile et ce que vous connaissez certainement. La mise en page va se faire avec 4 éléments principaux :

  • <header> va englober tout ce qui se trouve dans l'en-tête de la page, à savoir la bannière, une éventuelle barre de menus (speedbar), un logo, une interface de connexion... ;

  • <aside> va englober le menu latéral de droite. Cet élément est utilisé pour contenir des éléments servants à la navigation sur le site ;

  • <div> va correspondre à corps de la page, c'est-à-dire l'endroit où se trouvera le contenu de la page ;

  • <footer> va englober les informations du pied de page : copyright, liens de contact, mentions obligatoires...

L'élément <aside> ne doit-il pas être réservé pour afficher des informations annexes ?

Ça, c'est la première utilisation de cet élément, mais le W3C a récemment modifié son emploi, en raison de l'incompréhension des développeurs. En effet, beaucoup utilisaient <aside> pour afficher des menus latéraux, alors que <aside> ne devait s'utiliser qu'au sein des <articles> pour afficher des informations supplémentaires en relation avec l'article. Bref, c'était un peu complexe et pas grand monde utilisait <aside> correctement. Le W3C a donc modifié la spécification pour légitimer deux utilisations d'<aside> :

  1. Pour déterminer une sidebar, c'est-à-dire un menu latéral comme nous le faisons ici ;

  2. Pour afficher des informations en relation avec un article. En ce cas, <aside> doit être contenu dans l'élément <article>.

Il est fréquent, pour des besoins liés au design, d'englober la totalité de la page dans un conteneur. On appelle ça un wrapper. Il faudra utiliser un élément <div> :

<body> <div id="wrapper"> <header id="header"><!-- l'en-tête --></header> <aside id="sidebar"><!-- le menu latéral --></aside> <div id="main"><!-- le contenu --></div> <footer id="footer"><!-- le pied de page --></footer> </div> </body>

On définit également les différents id. C'est important, car il y aura plusieurs éléments <header> et <footer> dans certaines pages du blog. On le verra en abordant la structure des articles.

Des <div> ? Et pourquoi pas des éléments <section> ?

<section> et <div>

Un <div> est ce que l'on appelle un conteneur générique, tout comme <span>. Il ne possède aucune fonction sémantique, il n'a pas de sens, il est neutre. L'élément <section> est un élément qui regroupe des informations sous une même thématique. <section> n'est PAS le nouveau <div> d'HTML 5 ! Voici d'ailleurs ce que le W3C en dit :

Citation : Spécification HTML 5

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Citation : Spécification HTML 5 - Traduction

L'élément section représente un document générique ou une section d'une application. L'élément section n'est pas un conteneur générique. Quand un élément est nécessaire pour l'application de styles ou pour être utilisé avec des scripts, les auteurs sont encouragés à utiliser l'élément div.

De plus, <section> est soumis à une hiérarchie, exactement comme le sont les éléments <h1>, <h2>, <h3>... <h6>. Les sections s'imbriquent en sous-sections qui doivent avoir chacune un contenu bien défini. Les éléments de section peuvent donc être utilisés dans le but de hiérarchiser une page. Voici un exemple correct d'une telle utilisation :

<body> <h1>Titre principal de la page</h1> <section> <h1>Premier sous-titre d'ordre 1</h1> <section> <h1>Premier sous-sous-titre d'ordre 1</h1> <h2>Premier sous-sous-titre d'ordre 2</h2> </section> </section> <section> <h1>Deuxième sous-titre d'ordre 1</h1> </section> </body>

Comme le montre la structure ci-dessus, chaque section est à même de contenir son propre jeu de titres hiérarchisés. Il ne faut donc pas confondre les sections et les titres.

Pour en revenir aux <div>, vous pouvez en ajouter pour les besoins du design, ce genre de chose étant fréquent :

<header id="header"><!-- l'en-tête --></header> <div id="sub-wrapper"> <aside id="sidebar"><!-- le menu latéral --></aside> <div id="main"><!-- le contenu --></div> </div> <footer id="footer"><!-- le pied de page --></footer> La bannière et/ou le titre du blog

Le titre du blog peut être placé dans un titre <h1>, au sein de l'élément <header>. S'il s'agit d'une bannière sous forme d'image, il suffit de la placer dans le <h1>, en n'oubliant pas de spécifier un attribut alt à l'image :

<header> <h1><img src="banner.png" alt="Le Site du Zéro" /></h1> </header> Le cas de la speedbar

Il se peut que vous placiez une speedbar dans l'en-tête de votre site Web. Comme une speedbar est dédiée à la navigation dans le site, l'élément <nav> s'impose de lui-même puisque cet élément est destiné à afficher des informations de navigation, autrement dit des liens. Une speedbar digne de ce nom doit également être structurée sous forme de liste à puces, puisqu'il s'agit d'une liste de liens :

<header> <nav> <ul> <li><a href="index.htm" title="Accès à la page d'accueil">Accueil</a></li> <li><a href="trucs.htm" title="Accès à mes trucs et astuces">Trucs</a></li> <li><a href="cntct.htm" title="Accès à la page de contact">Contact</a></li> </ul> </nav> </header>

C'est déjà un bon début. Améliorons tout ça grâce à ARIA !

La norme ARIA

Vous avez peut-être déjà aperçu des attributs role dans certains codes HTML, notamment ceux issus de WordPress. Ces attributs font partie d'une spécification du W3C : WAI-ARIA. Cette norme, couramment appelée ARIA, a été introduite pour pallier le manque d'accessibilité des applications Internet et plus particulièrement des widgets.

On entend par widget des morceaux de code HTML et Javascript servant à créer des éléments de contrôle, comme des barres de progression, des sélecteurs de couleurs, des fausses cases à cocher avec un état "semi-coché" et d'autres choses impossibles via les éléments HTML traditionnels. ARIA date d'avant l'avènement d'HTML 5. Alors qu'HTML 5 se veut plus accessible, plus sémantique, autant en profiter pour introduire ARIA, une norme peu utilisée et méconnue, mais pourtant implémentée au sein des outils d'aide à la lecture pour les personnes non voyantes. ARIA n'est donc pas quelque chose qui va être utile pour les navigateurs traditionnels, mais bien par les outils d'assistance à la lecture comme les lecteurs d'écran que sont les synthèses vocales et les afficheurs braille.

La norme ARIA introduit l'attribut role, qui peut s'utiliser au sein des éléments HTML. Le but de cet attribut est d'indiquer quel est le rôle de l'élément en question. À cela s'ajoute un grand nombre d'attributs dont le nom commence par aria-. Le plus connu est certainement aria-required qui est une manière d'indiquer qu'un champ de formulaire doit être remplis.

Mais, en HTML 5, les champs possèdent déjà un attribut required. Pourquoi utiliser aria-required ?

Parce que leur utilité n'est pas la même. required sera reconnue par le navigateur, et ce dernier empêchera l'utilisateur d'envoyer le formulaire tant que le champ n'est pas rempli. aria-required va indiquer à la synthèse vocale que l'élément doit être renseigné. En quelque sorte, c'est l'équivalent pour les non voyants du petit astérisque que l'on place pour indiquer que le champ ne peut être omis.

Dans le cas qui nous occupe ici, nous allons surtout utiliser l'attribut role pour définir le... rôle des différentes parties du site, en plus des éléments HTML 5. Eh oui, deux éléments <section> peuvent très bien avoir deux rôles différents ! Nous n'allons donc pas approfondir la création de widgets au moyen des attributs aria- car ce n'est pas le but de ce cours.

Les valeurs de l'attribut role

L'attribut role possède un certain nombre de valeurs prédéfinies classées en catégories. Deux catégories vont nous intéresser : Document Structure et Landmark Roles. La première, Document Structure, recense les rôles utilisés pour décrire la structure du contenu de la page. On y trouve les rôles suivants :

article, columnheader, definition, directory, document, group, heading, img, list, listitem, math, note, presentation, region, row, rowheader, separator, toolbar

L'autre catégorie, Landamrk Roles est plus succincte, mais surtout plus importante. Il s'agit ici de décrire les éléments auxquels le lecteur veut accéder en priorité. Voici les rôles disponibles :

  • application : il s'agit d'une application

  • banner : il s'agit d'une bannière

  • complementary : il s'agit d'informations complémentaires

  • contentinfo : il s'agit d'informations quant au contenu

  • form : il s'agit d'un formulaire

  • main : il s'agit de la structure principale de la page (ce qui englobe le contenu)

  • navigation : il s'agit d'informations sur la navigation. C'est l'équivalent de <nav>

  • search : il s'agit d'un formulaire de recherche

Reprenons la structure de notre blog

Nous allons donc ajouter des attributs role là où il en faut. Le premier élément qui peut posséder un role est <body> : on va en profiter pour dire qu'il s'agit d'un document et non d'une application : <body role="document">.

Ensuite, on arrive dans les <header>. Il n'y a pas vraiment de rôle pour définir un en-tête, donc on laisse comme ça et on s'intéresse à la bannière, à laquelle on va ajouter un rôle banner :

<h1 role="banner"><img src="banner.png" alt="Le Site du Zéro" /></h1>

Au niveau de la speedbar, on ajoute le rôle navigation : <nav role="navigation">.

Puis, en ce qui concerne le menu latéral, on ajoute le rôle complementary : <aside role="complementary">. Pour <div id="main">, on va pouvoir mettre <div id="main" role="main">. Mais attention, il ne peut y avoir qu'un seul main dans un document, et c'est ici qu'il faut le placer puisqu'il s'agit...

Catégories liées

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Créer un blog accessible avec HTML5

Prix sur demande

Les meilleurs cours en HTML

Afficher tout

Afficher tout