HTML 5 - Divers :

Introduction :

Nous présentons ici quelques balises non essentielles mais intéressantes.

iframe :

La balise <iframe> permet d'inclure un autre document dans une page HTML. Cette balise a un attribut src qui permet de définir le document à inclure. Vous pouvez par exemple inclure un agenda Google ou une map Google grâce à cette balise.

Audio :

Encore plus que les images, les médias audio et vidéo représentent de gros volumes de données. Ils sollicitent beaucoup le réseau. Le premier réflexe à avoir est de se poser la question de l'évitement. Est-ce que l'information à transmettre nécessite ce support ? Est-ce que l'apport du son et de l'image a une vraie plus-value ? Si les réponses sont oui, il est alors nécessaire de les rendre les plus légers possible et de veiller à leur accessibilité.

Le format audio peut être une bonne alternative à une vidéo si l'intérêt principal n'est pas visuel. Cela permet d'avoir des fichiers en moyenne 20 fois plus légers.

La transcription textuelle :

Si le contenu audio n'est pas de la musique, mais plutôt un podcast constitué de paroles, il est alors nécessaire de proposer une transcription textuelle, soit directement dans la page, soit via un lien vers une autre page la contenant. Cette transcription peut être structurée à l'aide de titres, de listes et de paragraphes, mais doit respecter le même ordre que le média audio.

Mono ou stéréo:

Un son en mono n'est consitué que d'une seule piste diffusée aussi bien à gauche qu'à droite, alors qu'un son en stéréo est constitué de deux pistes, l'une destinée à l'oreille gauche et l'autre à la droite. Un son en stéréo est donc deux fois plus volumineux que son équivalent en mono.

Il est nécessaire de se poser la question d'utiliser une ou deux pistes son. Pour répondre à cette question, il faut, d'une part, déterminer l'intérêt d'avoir du son en stéréo et, d'autre part, prendre en compte le contexte d'écoute.

Tout d'abord, si la bande-son n'est constituée principalement que de paroles, un son en mono est largement suffisant. Ensuite, si l'internaute regarde la vidéo sur un smartphone ou un ordinateur, un son en stéréo n'apporte rien. Là où le son en stéréo trouve son intérêt, c'est quand l'internaute écoute de la musique avec un casque ou avec des hauts-parleurs externes.

Les boutons de contrôle :

La méthode la plus simple pour que l'utilisateur aitaccès aux boutons de contrôle audio est d'utiliser l'attribut controls affichant le lecteur du navigateur.

<audio controls>
    ...
</audio>

Les avantages de cette technique sont la simplicité de mise en oeuvre et la parfaite accessibilité du lecteur. Les inconvénients sont la forme différente du lecteur d'un navigateur à l'autre et sa personalisation impossible.

Une deuxième possibilité est donc d'utiliser une balise <audio> sans ses contrôles et de la commander à l'aide de boutons et de potentiomètres. Il est alors nécessaire d'écrire le code JavaScript pour faire fonctionner le tout. Il faut bien predre garde à ce que votre lecteur soit pleinement accessible (navigation possible au clavier, restitution correcte avec les lecteurs d'écran...).

Vidéo :

Les flux vidéo sur Internet représentent environ 80% de l'ensemble des flux mondiaux ! Bien évidemment, les vidéos des sites internet n'en représentent qu'une infime partie. En raison de leur nature, elles consistent en des fichiers volumineux sollicitant fortement les réseaux. Le premier réflexe à avoir est donc l'évtement. Si le contenu est jugé suffisamment indispensable, il faut alors se poser la question de l'importances des images. Est-ce qu'une version audio n'est pas suffisante ? Un podcast est bien préférable à une vidéo d'un point de vue green IT.

La définition :

La définition est, sans l'ombre d'un doute, le facteur permettant les plus gros gains d'un point de vue taille et donc sollicitation du réseau lors du chargement. Est-il nécessaire d'avoir une résolution HD (ou pire, 4K ou 8K) pour un visionnage sur un écran de smartphone ?

Voici un comparatif du poids des fichiers pour un enregistrement de 1 minutes à 30 images par seconde, sans compression :

Le poids d'un enregistrement peut facilementn être divisé par un grand nombre en utilisant une définition plus faible. Une bonne règle peut être de choisir une définition de 480p pour les smartphones et de 720p pour les ordinateurs (480p signifie "480 lignes progressives" par opposition au 480i (entrelacé)).

Il est nécessaire d'utiliser du code JavaScript pour utiliser la vidéo adaptée à la taille de l'écran de l'utilisateur.

Remarque : il est important de bien réfléchir à la définition souhaitée avant de tourner les images : cela permet d'utiliser du matériel plussimple (un smartphone fait des merveiles de nos jours) et une puissance de calcul moindre pour le montage.

La durée :

Cela semble une évidence, mais plus une vidéo est courte, moins elle est lourde. Il est donc intéressant avant le tournage de la vidéo de la concevoir le plus efficacement possible. Bien penser aux messages que vous souhaitez faire passer, bien ordonner et structurer les idées, les rendre compréhensibles sont les clés du succès. En plus, votre vidéo sera plus attractive et efficace qu'une vidéo trop longue !

Les algorithmes de compression :

Il existe différents algorithmes de compression pour les vidéos. À l'heure actuelle, le H264 (ou MPEG-4) est le plus utilisé. Il a pour avantage d'être supporté par la quasi-totalité des navigateurs et d'être le codec le mieux décodé nativement par les cartes graphiques. Côté inconvénient, il produit des fichiers plus volumineux que ses concurrents plus récents. Le H265 est le successeur désigné du H264. Il a pour avantage de produire des fichiers deux fois plus légers que son prédécesseur, mais n'étant pas libre de droits, il n'est supporté que par Safari. Le codec le plus prometteur est le AV1 proposé par l'Alliance for Open Media. Il est basé sur les mêmes algorithmes que le format AVIF pour les images. Il a des taux de compression encore meilleurs que ceux du H265. Il est mieux supporté par les navigateurs, en l'occurence Firefox, Chrome, Edge et Opera, mais pas Safari. Outre sa non compatibilité avec le navigateur d'Apple, l'inconvénient est qu'il demande de très fortes ressources pour être lu et que très peu de matériels sont capables de le décoder nativement. Cela sollicite donc beaucoup le processeur. Il semble par conséquent plus sage pour le moment de privilégier le H264.

Pour compresser sa vidéo; il existe des solutions destinées à un public professionel, comme HandBrake (open source), ou des solutions hyper faciles d'utilisation, comme Shrink my video!.

Avec Shrink my video!, il suffit de sélectionner sa vidéo pour récupérer une version compressée en appliquant les recommandations du Shift Project ou d'aller un peu plus loin en cochant quelques options supplémentaires. Il est par exemple possible de générer une vidéo en 480p pour les petits écrans.

Remarque : le passage en noir et blanc et la plus forte compression du son n'apportet pas des gains significatifs. Par contre, la résolution et la compression de la vidéo permettent une réduction importante de la taille du fichier. Enfin, la conservation d'une seule image toutes les 5 secondes est très économique mais ne peut être envisagée que dans des cas très particuliers.

L'écoconception des vidéos :

Les algorithmes de compression ont des résultats différents suivant la complexité du film. Les vidéos avec de grands aplats de couleurs homogènes, peu de couleurs différentes et avec uniquement des mouvements de translation et de rotation obtiennent des très bons taux de compression.

Il est donc préférable d'utiliser une conception graphique animée (motion design en anglais) plutôt que des scènes tournées. Cela a également l'avantage d'éviter une phase de tournage avec un impact écologique important. Il est bien évidemment possible de faire un compromis entre les deux !

Remarque : en appliquant ces principes, le studio de communication écoresponsable Light a par exemple réussi à créer une vidéo de 1 minute 42, en 720p, encodée avec du H264 et qui ne pèse que 4,4 Mo. C'est plus de 15 fois plus léger que les recommandations de Youtube !

Bien évidemment, lors de la conception de la vidéo, il est nécessaire de bien prendre en compte toutes les recommandations d'accessibilité vues précédemment (contraste, taille des caractères, typographie...).

La balise vidéo :

La balise <video> permet de référencer une vidéo. Elle est comparable à la balise <audio>. Ainsi, tout ce qui a été indiqué précédemment sur la balise <audio> s'applique à la balise <video>. Il est possible de proposer un ensemble de sources, d'avoir les contrôles par défaut... Elle est également contrôlable avec du code JavaScript.

Il est également possible d'appliquer des filtres graphiques sur cette balise <video>. Néanmoins, cela est généralement une mauvaise idée. Il est préférable de créer ces effets lors du montage. D'une part, cela économise des cycles CPU à chaque visionnage de la vidéo, et d'autre part, ces filtres graphiques appliqués avant la compression peuvent améliorer celle-ci.

Avec la balise <video>, il est possible d'utiliser l'attribut poster pour afficher une image avant que la vidéo n'est pas chargée, puis c'est la première image du film qui est affichée. Il faut s'interroger sur l'intérêt de cette image. Est-ce qu'elle apporte un réel plus ? Il n'est pas possible d'utiliser différents formats d'images. Il faut alors opter pour un format qui soit supporté par tous les navigateurs.

Tous les formats de vidéos ne sont pas supportés. Je vous conseille le format vidéo mp4 qui est reconnu nativement par les navigateurs.

Un exemple :

<video width="320" height="240" controls autoplay muted>
        <source src="movie.mp4" type="video/mp4">
        Votre navigateur ne supporte pas le format vidéo et/ou le tag vidéo si vous voyez ce message !
</video>

Je vous laisse tester et deviner ce que font les attributs sans valeur "controls", "autoplay" et "muted", même si leurs noms sont explicites.

L'hébergement :

Pour héberger vos vidéos, vous avez deux options : soit directement chez votre hébergeur avec le reste de votre site internet, soit sur une plateforme de vidéos, comme YouTube, Vimeo, Dailymotion...

L'hébergement sur son serveur web :

La vidéo est hébergée chez votre prestataire au même titre que vos pages internet, vos images et le reste de vos contenus. Il suffit d'utiliser une balise <video> avec la source qui pointe vers votre vidéo ou vers vos vidéos si vous utilisez différents formats.

L'hébergement sur une plateforme vidéo :

Si vous possédez un compte chez une plateforme de ce type, il est assez aisé d'intégrer des vidéos sur votre site internet. Elles y sont systématiquement recompressées (mais, si vous les avez bien travaillées auparavant, cela n'a quasiment pas d'impact). Des fonctionnalités vous sont proposées, permettant de récupérer directement le code HTML à intégrer dans votre page. Il faut uniquement prendre garde à ce qu'il soit correctement accessible.

Voici comment procéder avec Youtube :

• Allez sur YouTube, puis connectez-vous.
• Cliquez sur l'icône pour ajouter une vidéo, puis Mettre en ligne une vidéo.
• Une fois la vidéo ajoutée, vous pouvez la regarder sur YouTube en cliquant sur l'icône .
• Cliquez sur le lien Partager, puis choisissez Intégerer.
• Copiez ensuite le code généré.

Pour rendre ce contenu pleinement accessible, il faut expliciter le titre de la balise <iframe> en modifiant l'attribut title :

<iframe width="560" height="315" src="https://www.youtube.com/embed/qPbR4ucGbEY" title="lecteur vidéo de la séance d'escalade confinée" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Il est également nécessaire de supprimer frameborder="0" (un attribut qui ajoute ou non une bordure selon sa valeur) et d'utiliser du code CSS à la place si nécessaire.

Le sous-titrage :

Comme pour les contenus audio, si la vidéo contient une partie vocale, il est nécessaire de sous-titrer pour les personnes sourdes ou malentendantes.

Sur son serveur web :

Il est possible de proposer une ou plusieurs pistes de sous-titres pour une vidéo. Cela se réalise grâce à la balise <track> dans la balise <video>. Il faut produire un fichier WebVTT (Web Video Text Track) contenant les sous-titres et les plages de temps durant lesquelles ils doivent s'afficher. Le fichier doit respecter la structure suivante :

WEBVTT titre

début1 --> fin1
sous-titre1

début2 --> fin2
sous-titre2

...

Exemple :

WEBVTT La séance d'escalade confinée

0:00:07.007 --> 0:00:09.009
Allez, on part à l'escalade !

0:00:09.009 --> 0:00:13.013
Ouais c'est pas parce qu'on est confiné qu'on peut pas aller escalader

0:00:14.221 --> 0:00:16.650
Allez c'esr bon, on arrive !

Il est possible de créer ce fichier à la main ou d'utiliser un éditeur. Il en existe un certain nombre permettant la saisie manuelle des sous-titres. La génération automatique des sous-titres ou le sous-titrage par une personne sont généralement des options payantes.

Une fois que vous avez généré votre fichier .vtt, il faut l'associer à votre vidéo.

Exemple :

<video controls>
    <source src="sortie_escalada_confinee.mp4" type="video/mp4">
    <track kind="captions" label="sous-titres en fançais" srclang="fr" src="test.vtt" default>
</video>

La balise <track> peut être présente plusieurs fois pour différents sous-titrages. Mais seule une des balises <track> présentes peut avoir l'attribut default. Cet attribut permet de savoir si un sous-titrage est actif par défaut. L'internaute peut de toute façon activer les sous-titres et choisir sa langue au besoin.

L'attribut kind permet d'indiquer le type de piste texte comment l'utiliser. Il peut prendre les valeurs :

• subtitles : pour les sous-titres d'une vidéo en langue étrangère.
• captions : pour une retranscription du contenu audio.
• description : pour une audiodescription.
• chapters : pour les titres des chapitres
• metadata : pour une utilisation par des scripts; non restitué à l'internaute.

L'attribut label permet de choisir le titre de la piste de sous-titrage qui sera affichée à l'internaute.

L'attribut srclang permet d'indiquer la langue utilisée pour le sous-titrage de cette piste.

Enfin, l'attribut src permet d'indiquer le fichier .vtt à utiliser.

Il est possible de personnaliser un peu (seules quelques propriétés CSS sont prises en charge). Par exemple, l'apparence des sous-titres peut être définie via le pseudo-élément ::cue.

Exemple :

::cue {
    opacity: .7;
}

Sur une plateforme vidéo :

YouTube sous-titre automatiquement les vidéos postées sur sa plateforme. Néanmoins, la reconnaissance automatique de la parole en français est loin d'être parfaite ! Il est donc nécessaire de repasser manuellement sur les vidéos pour les corriger.

• Pour cela, allez dans votre espace YouTube Studio, cliquez sur la vidéo, puis sur Sous-titres.
• Cliquez sur Dupliquer et modifier et indiquez la langue de sous-titrage.
• Cliquez sur Modifier les codes temporels.
• Vous pouvez ensuite modifier les sous-titres, la plage de temps d'affichage et ajouter des sous-titres si nécessaire.
• Une fois cela terminé, cliquez sur PUBLIER.

L'audiodescription :

L'audiodescription permet aux personnes non voyantes d'obtenir les éléments de contexte visuel auxquels elles n'ont pas accès. Les grandes plateformes ne proposent pas encore d'ajouter de l'audiodescription sur les vidéos. Les lecteurs des navigateurs ne prennent toujours pas en compte l'audiodescription même si HTML permet d'utiliser une balise <track> avec l'attribut kind="descriptions".

Pour le moment, il est nécessaire d'avoir recours à un lecteur vidéo en JavaScript tel qu'Able Player ou video.js avec leplug-in vidojs-speak+description-track.

Main :

L'élément HTML <main> représente le contenu majoritaire du <body> du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.

Un document ne peut pas avoir plus d'un seul élément <main> sans attribut hidden. Cet élément prend uniquement en charge les attributs universels et ne contribue pas au plan du document. Autre dit, à la diférence d'éléments tels que <body>, les niveaux de titre comme <h2>, etc., <main> n'affecte pas la structure même de la page, c'est un élément purement informatif On privilégiera l'élément <main> à l'ajout du role="main".

Dans le contexte de l'accessibilité, les balises peuvent être utilisées par les outils d'assistance afin d'identifier et de naviguer rapidement entre les grandes sections d'un document.

La gestion du zoom :

Le rapport annuel 2020 d'HTTP Archive sur l'état du Web nous apprend, entre autres, que la fonctionnalité zoom est désactivé sur 24% des sites desktop et 30% des sites mobiles.

Cela est réalisé en appliquant des options comme celles-ci sur la métabalise viewport :

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

C'est souvent fait par mégarde, par ignorance, mais c'est parfois volontaire ! En effet, cela évite de se préoccuper de l'interface graphique - qui est censée rester cohérente - lorsque l'utilisateur change le facteur de zoom. Néanmoins, certaines personnes ont besoin de grossir le texte pour pouvoir le lire. Heureusement, de nos jours, les navigateurs ignorent ces options pour laisser le visiteur libre de choisir le facteur de zoom.

La personnalisation des pages d'erreur :

Il est très classique de personnaliser la page d'erreur 404 retournée quand la ressource demandée n'existe pas. Néanmoins, il est important que cette page soit la plus simple et légère possible. Le seul message à indiquer est que l'internaute demande une page qui n'existe pas ! Il en est de même pour les autres pages d'erreur. Même s'il est tentant de faire une page web dynamique pour mutualiser le code, il est préférable de faire des pages web statiques pour alléger la charge du serveur.

Voici un exemple avec un serveur Apache :

Fichier .htaccess à la racine du site :

ErrorDocument 403 /erreur403.html
ErrorDocument 404 /erreur404.html
ErrorDocument 500 /erreur500.html

Fichier erreur403.html à la racine du site :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="robots" content="noindex">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Accès interdit</title>
    </head>
    <body>
        <h1>Vous n'êtes pas autorisé à accéder à cette page !</h1>
        <a href="/">Retour à la page d'accueil</a>
    </body>
</html>

Fichier erreur404.html à la racine du site :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="robots" content="noindex">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page non trouvée</title>
    </head>
    <body>
        <h1>La page demandée n'existe pas !</h1>
        <a href="/">Retour à la page d'accueil</a>
    </body>
</html>

Fichier erreur405.html à la racine du site :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="robots" content="noindex">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Problème sur le serveur</title>
    </head>
    <body>
        <h1>Notre site web a rencontré une erreur !</h1>
        <a href="/">Retour à la page d'accueil</a>
    </body>
</html>

L'impression :

Certains visiteurs souhaitent garder une trace papier d'un site. Or le rendu prévu pour un écran n'est généralement pas adapté à l'impression papier. Souvent, cela peut produire l'impression de plusieurs pages alors que le contenu vraiment utile tient sur une seule. Il est possible de prévoir une version imprimable pour chaque page, au format PDF par exemple, mais cela demande énormément de travail supplémentaire. Une solution tout aussi efficace et bien plus simple à mettre en oeuvre est d'utiliser une feuille de style dédiée à l'impression.

La feuille de style pour l'impression :

Deux stratégies s'offrent à nous : soit compléter et amender la feuille de style prévue pour l'affichage à l'écran, soit repartir de zéro. Au premier abord, la première option semble plus simple et plus adaptée si nous souhaitons avoir une cohérence graphique entre la version affichée à l'écran et celle imrpimée.

Néanmoins, l'expérience montre qu'il est nécessaire de revenir en arrière sur beaucoup de règle CSS conçues pour l'affichage à l'écran pour les adapter à la mise en forme pour une impression. C'est pourquoi nous vous conseillons la seconde option, avec deux feuilles indépendantes :

<link rel="stylesheet" type="text/css" href="ecran.css" media="screen">
<link rel="stylesheet" type="text/css" href="impression.css" media="print">

L'attribut media des balises link permet que la bonne feuille de style soit utilisée.

Remarque : malheureusement, les fichiers sont chargés dans leur ensemble, quelle que soit la valeur de cet attribut.

Les éléments à ne pas imprimer :

Nous repartons de zéro pour le style de la page imprimée. Un certain nombre de règles sont déjà mises en place dont il n'est pas nécessaire de s'occuper : fond transparent par exemple. Il est surtout nécessaire de faire disparaître de la version imprimée des élément sans intérêt, comme le menu de navigation, l'en-ête, le pied de page...

Les images suivant leur taille peuvent utiliser beaucoup d'espace et beaucoup d'encre. Il est possible de choisir de ne pas imprimer certaines d'entre elles. Pour cela, vous pouvez leur affecter une classe et définir que les éléments de celle-ci ne sont pas imprimés.

Dans l'exemple suivant, le contenu des balises <header> et <footer> n'est pas imprimé, ni le contenu des balises ayant la classe noprint :

header, footer, .noprint {
    display: none;
}

Les polices de caractères économes en encre :

Comme cela a été indiqué précédemment, il est important de proposer une feuille de style spécifique pour l'impression. Dans cette feuille, il est possible de spécifier des règles concernant le texte.

Pour être le plus écoresponsable possible, ce qui va être important est de limiter la consommation de papier et d'encre. Il peut alors être intéressant de choisir une police de caractères utilisant peu d'encre. Certaines polices d'écriture sont plus fines et utilisent naturellement moins d'encre, comme Century Gothic. D'autres ont été créées spécialement pour être économiques en encre tout en conservant un confort de lecture. En 2009, la police EcoFont a été la pionnière en la matière. Ses concepteurs ont eu l'idée d'ajouter les caractères avec des points. C'est en 2014 qu'une autre police économique est apparue Ryman Eco. Elle se revendique écologique, graphique et gratuite. Les lettres sont constituées par des successions de lignes à la place d'une unique ligne complète.

Remarque : Le site internet de la police Ryman Eco a disparu récemment sans explication de la part de la société Ryman.

La police de référence est Arial. La différence économique d'encre entre la police Ryman Eco et Arial est de 33%, celle avec Century Gothic est de 30%, celle avec EcoFont est de 28%, celle avec Garamond est de 24% et celle avec Arial est de 0%.

Il est à noter que lorsque le texte est affiché dans une taille standard pour un paragraphe de texte, les points d'EcoFont et les lignes de Ryman Eco ne sont pas visibles. Les deux meilleurs résultats sont Ryman Eco et Century Gothic. Cette dernière est très facile à utiliser puisque c'est une police standard :

* {
    font-family: "Century Gothic", sans-serif;
}

Pour Rymman Eco, il est nécessaire de télécharger la police, de la déposer das un dossier de votre site internet (Fonts/RymanEco dans l'exemple ci-après) d'utiliser la règle @font-face dans la feuille de style pour définir la police :

@font-face{
	font-family: ryman_ecoregular;
	src:	local("Ryman Eco"),
	url(Fonts/RymanEco/rymaneco-regular-webfont.eot?#iefix) format("embedded-opentype"),
	url(Fonts/RymanEco/rymaneco-regular-webfont.woff2) format("woff2"),
	url(Fonts/RymanEco/rymaneco-regular-webfont.woff) format("woff"),
	url(Fonts/RymanEco/rymaneco-regular-webfont.ttf) format("truetype"),
	url(Fonts/RymanEco/rymaneco-regular-webfont.svg#ryman_ecoregular) format("svg")
}

* {
	font-family: ryman_ecoregular;
}

La couleur d'impression :

Une autre manière d'économiser de l'encre est de ne pas utiliser du noir, mais du gris foncé à la place. L'exemple suivant montre un échantillon de texte écrit avec une couleur qui varie entrr 100% et 60% de noir. Le code couleur utilisé est indiqué dans la dernière colonne.

Jusqu'à 85%, la différence n'est quasimen pas perceptible. Pourtant utiliser cette couleur gris foncé permet d'économiser 50% d'encre par rapport à du noir ! L'avantage de cette technique par rapport à la précédente est que vous pouvez utiliser la police de votre choix. Vous pouvez ainsi choisir une police standard, facilement lisible par tous... Enfin, cela est très simple à mettre en place.

Exemple :

* {
    font-family: "Century Gothic", Garamond, sans-serif;
    color: #262626;
}

Le modèle de page et le design :

Créer un modèle de page revient à se poser deux questions : quelles sont les informations que nous souhaitons voir présentes sur l'ensemble des pages ? et quelle est la structure que nous souhaitons donner aux pages ?

Il est nécessaire d'avoir, avant le contenu principal de la page, un lien vers la page d'accueil et le menu de navigation vers les pages principales. Le menu principal contiendra des liens vers les pages de contact, d'erratum et de ressources.

Le design de la page se veut minimaliste :

• une barre de menus en dégradé noir à bleu nuit avec un menu burger
• le contenu sur fond sombre
• le pied de page avec le même dégradé

Il est possible de réaliser cette page sans avoir recours à aucune image. Les logos utilisés peuvent être obtenus en tant que caractères. La maison est le caractère ayant pour point de code U+2302 (⌂) ou U+1F3E0 (🏠). Pour le menu burger, c'est U+2630; (☰) et U+D7 (x) (×), pour le panneau Attention, c'est U+26A0 (⚠), et pour lien, c'est U+26D3 (⛓). Néanmoins, pour avoir une icône pour la maison à la fois simple et explicite, nous préférons utiliser une image.

Voici le code pour le modèle de page :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="{{metaContent}}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
        <title>{{title}}</title>
        <link rel="stylesheet" type="text/css" href="menu_burger.css" media="screen">
        {{feuilles de style additionnelles}}
        <link rel="stylesheet" type="text/css" href="impression.css" media="print">
        <link rel="stylesheet" href="favicon.ico" rel="shortcut icon">        
    </head>
    <body>
        <header role="banner">
            <a href="index.html" title="vers la page d'accueil">
                <img src="../images/home.svg" alt="Accueil">
            </a>
            <button aria-expanded="true" class="hidden-sm hidden-big" id="btnMenu">
                <span class="hidden-sm" title="déployer le menu" id="burger" aria-hidden="true">☰</span>
                <span title="réduire le menu" id="fermer" ari-hidden="true">⨯</span><br>
                Menu
            </button>
            <nav role="navigation" aria-label="Menu de  navigation principal" id="nav">
                <ul id="menu">
                    <li>
                        <span id="accueil" aria-hidden="true">⌂ </span>
                        <a href="index.html">Accueil</a>
                    </li>
                    <li>
                        <span id="contact" aria-hidden="true">@ </span>
                        <a href="contact.php">Contact</a>
                    </li>
                    <li>
                        <span id="erratum" aria-hidden="true">⚠ </span>
                        <a href="erratum.html">Erratum</a>
                    </li>
                    <li>
                        <span id="ressources" aria-hidden="true">⛓ </span>
                        <a href="ressources.html">Ressources</a>
                    </li>
                </ul>
            </nav>
        </header>
        <main role="main">
            {{content}}
        </main>
        <footer role="contentinfo">
            <ul>
                <li><a href="mentionsLegales.html">Mentions légales</a></li>
                <li><a href="declarationAccessibilite.html">Déclaration d'accessiilité</a></li>
            </ul>
        </footer>
        {{scripts}}
    </body>
</html>

La feuille de style pour les écrans :

Le choix a été fait d'afficher par défaut le menu déployé. Pour le memnt, nous n'avons pas mis en place le code JavaScript permettant d'afficher et de cacher le menu (voir un peu plus bas). Il est préférable que le site web soit utilisable même si l'utilisateur n'a pas JavaScrpt activé sur son navigateur. Tant que le code Javascript n'est pas disponible, le bouton permettant d'afficher ou de cacher le menu n'est pas affiché puisqu'il n'est pas utilisable.

*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    background-color: #454544;
    color: #FFF;
}

main {
    padding: 1em;
}

header {
    display: grid;
    grid-template-columns: 15vw 1fr;
    color: #FFF;
    background: linear-gradient(#000, #1F0797);
}

header a {
    color: #FFF;
}

#btnMenu {
    justify-self: end;
    background: transparent;
    color: #FFF;
    border: none;
}

#burger, #fermer {
    font-size: 1.7em;
    font-weight: bolder;
}

#menu {
    list-style: none;
}

#nav {
    grid-column: 2/3;
}

.hidden-sm {
    display: none;
}

@media (min-width: 32em) {
    .hidden-sm {
        display: initial;
    }

    .hidden-big {
        display: none;
    }

    #menu {
        display: flex;
        align-items: baseline;
    }

    #menu li {
        flex: 1 1 auto;
    }
}

footer {
    background: linear-gradient(#1F0797, #000);
}

footer li {
    text-align: center;
    list-style: none;
}

footer ul {
    padding: 0;
}

#accueil {
    font-size: 2.3em;
    font-weight: bolder;
}

#contact, #erratum {
    font-size: 1.7em;
}

#ressources {
    font-size: 1.5em;
}

#accueil, #contact, #erratum, #ressources {
    display: inline-block;
    width: 2rem;
}

Une media query permet d'afficher le menu avec les éléments les uns à côté des autres pour les larges écrans. Le point de rupture pour changer la disposition de l'affichage a étédéfini à 32em pour que l'affichage s'adapte en fonction de la taille de la police.

La feuille de style pour l'impression :

Cette feuille reprend les préconisations indiquées précédemment : marges étroites, contenu essentiel uniquement, les couleurs d'impression et URL des liens enre parenthèses.

*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Century Gothic", Garamond, sans-serif;
    color: #262626;
}

@page {
    margin: .5em;
}

header, footer, .noprint {
    display: none;
}

a[href]::after {
    content: " (" attr(href) ")";
}

Le fichier JavaScript pour afficher/cacher le menu burger :

Tout d'abord, le bouton possède des icônes (en réalité, des caractères) qui ne sont pas restituées par les lecteurs d'écran car nous avons positionné l'attribut aria-hidden à true. Néanmoins, le bouton possède également le texte Menu. Ainsi, les lecteurs d'écran peuvent nommer le bouton et l'utilisateur comprend son rôle. L'attribut aria-expanded est utilisé pour indiquer l'état du menu. De cette manière, lorsque l'utilisateur arrive sur c bouton, les lecteurs d'écran indiquent : "Menu bouton réduit" ou "Menu bouton développé".

Ensuite, l'attribut title a été utilisé pour afficher une infobulle.

Enfin, tous les liens de cette page sont explicites sans contexte.

Afin de rendre opérationnel le burger menu, le code JavaScript a été ajouté :

window.onload = initialisation;

let btnMenu, menu, burger, fermer;

function initialisation() {
    btnMenu = document.getElementById('btnMenu');
    menu = document.getElementById('menu');
    burger = document.getElementById('burger');
    fermer = document.getElementById('fermer');
    ouvrirFermer();
    btnMenu.classList.remove('hidden-sm');
    btnMenu.addEventListener('click', ouvrirFermer);
}

function ouvrirFermer() {
    menu.classList.toggle('hidden-sm');
    fermer.classList.toggle('hidden-sm');
    burger.classList.toggle('hidden-sm');
    if (btnMenu.getAttribute('aria-expanded') === 'true') {
        btnMenu.setAttribute('aria-expanded', 'false');
    } else {
        btnMenu.setAttribute('aria-expanded', 'true');
    }
}

La méthode ouvrirFermer() permet de changer l'état du menu. S'il est rétracté, alors il est déployé, et inversement. Rappelez-vous : pour qu'un internaute naviguant sans JavaScript puisse quand même utiliser le site, le menu est initialement déployé. Cette méthode est donc appelée une première fois pour le réduire. L'attribut aria-expanded est bien mis à jour afin qu'un utilisateur de lecteur d'écran soit informé de l'état du menu. La partie qui est cachée ou dévoilée avec le bouton est positionnée après ce dernier. L'internaute non voyat accède donc facilement à ce contenu en poursuivant sa navigation. Enfin, il est à noter que ce menu est parfaitement utilisable uniquemet avec le clavier.