Jour 10 - Structure de page
Comment structurer une page HTML pour garantir son accessibilité.
Ce que j’ai fait :
- parcourir les différents outils présentés ci-dessous
- vérifier que les différents points de structuration énoncés sont respectés pour ce blog
- apporter une correction lorsque les recommandations de structuration ne sont pas respectées
Outils indispensables à destination de l’intégrateur.ice web :
- Notices d’accessibilité AcceDe Web HTML, CSS et JAvascript(lien externe)
- Guide de l’intégrateur RGAA3(lien externe) Attention : se base sur le RGAA 3, et non la version 4
- L’outil en ligne de validation du W3C(lien externe)
- le RGAA 4(lien externe)
Ce que j’ai appris :
-
le document HTML doit débuter par une déclaration de doctype
-
la langue principale de la page est renseignée avec l’attribut lang :
<html lang="fr"> -
renseigner un title précis sur chaque page, par exemple sour la forme
<title>[Nom de la page courante] | [Nom du site]</title> -
l’écriture des balises HTML doit suivre la logique de l’ordre de lecture de la page
-
la validation du code par l’outil en ligne du W3C permet de s’assurer d’un rendu homogène entre tous les navigateurs. Note : le RGAA ne demande pas un code valide à 100%, par exemple la présence d’esperluettes dans les URL n’est pas considéré comme une erreur d’accessibilité.
- identifier les éléments principaux de la page avec les landmarks ARIA correspondant et les balises HTML5 correspondantes (si appliquable) :
- zone d’entête principale :
<header role="banner"> - moteur de recherche :
role="search" - zone de contenu principale :
<main role="main"> - informations relatives au site et à son auteur :
<footer role="contentinfo"> - menus de navigation principaux et secondaires :
<nav role="navigation">
- zone d’entête principale :
-
la position des éléments principaux de la page est cohérente d’une page à l’autre du site
-
structurer l’information grâce à une hiérarchie de titres logique via l’utlisation de balises
<hn>ou à défaut unrole="heading" aria-level="1"Attention !
- On peut trouver plusieurs balises header (pour l’entête du site mais aussi d’articles à l’intérieur du site), mais le
role="bannerdoit être unique dans la page. - La balise main et le
role="main"sont uniques dans la page. - On peut trouver plusieurs balises footer (pour le pied de page du site mais aussi d’articles à l’intérieur du site), mais le
role="contentinfo"doit être unique dans la page. - On peut trouver plusieurs balises nav (il peut y avoir une navigation principale et une navigation secondaire, comme un fil d’ariane) et plusieurs
role="navigation" - Le
role="search"est unique dans la page.
Mise en application sur ce blog
- ajout de l’attribut lang à la balise <html>
- ajout des rôles header, navigation et de la balise <main> dans la structure générale de la page
- ajout de section <header> et <footer> dans la structure d’un article de blog
- suppression de la balise obsolète
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Note :
- Le fait de doubler l’information en utilisant la balise HTML5 et le rôle ARIA correspondant résulte d’un avertissement lors du passage au validateur du W3C, mais est demandé explicitement par le RGAA (Critère 12.6).