{"id":1831,"date":"2024-03-27T14:25:17","date_gmt":"2024-03-27T13:25:17","guid":{"rendered":"https:\/\/ideance.net\/blog\/?p=1831"},"modified":"2024-03-28T10:02:32","modified_gmt":"2024-03-28T09:02:32","slug":"accessibilite-et-titres-de-section","status":"publish","type":"post","link":"https:\/\/ideance.net\/blog\/en\/1831\/accessibilite-et-titres-de-section\/","title":{"rendered":"Accessibilit\u00e9 et titres de section"},"content":{"rendered":"

Les titres dans une page web sont essentiels pour organiser ses contenus.<\/p>\n\n\n\n

Cette organisation doit \u00eatre v\u00e9hicul\u00e9e visuellement mais aussi dans le code.<\/p>\n\n\n\n

Visuellement, des titres hi\u00e9rarchis\u00e9s via leur mise en forme permettent d\u2019identifier rapidement les diff\u00e9rentes sections de la page.<\/p>\n\n\n\n

Dans le code, les titres <hx<\/em>><\/code> permettent notamment de transmettre la structure de la page aux technologies d\u2019assistance et de naviguer facilement d\u2019une section \u00e0 l\u2019autre.<\/p>\n\n\n\n

Prenons l\u2019exemple d\u2019une personne aveugle naviguant avec un lecteur d\u2019\u00e9cran (plage braille et\/ou synth\u00e8se vocale) : une bonne structuration par titres lui donne, entre autres, la possibilit\u00e9 d\u2019avoir une table des mati\u00e8res de la page et de naviguer facilement de titre en titre.<\/p>\n\n\n\n

Utiliser des titres<\/h2>\n\n\n\n

Un titre est un passage de texte d\u00e9crivant le contenu qui le suit.<\/p>\n\n\n\n

Chaque titre a un niveau d\u2019importance sur la page.<\/p>\n\n\n\n

Visuellement, cela peut se traduire par une taille plus ou moins grande de la police en fonction du niveau, par exemple.<\/p>\n\n\n\n

Dans le code, les diff\u00e9rentes balises de <h1><\/code> \u00e0 <h6><\/code> donnent un niveau au titre. <h1><\/code> repr\u00e9sente le titre de la plus haute importance sur la page. <h6><\/code> repr\u00e9sente celui de la moindre importance.<\/p>\n\n\n\n

Exemple de hi\u00e9rarchie de titres :<\/p>\n\n\n\n

<h1>Risotto aux cèpes<\/h1>\n <h2>La recette<\/h2>\n  <h3>Ingrédients<\/h3>\n  <h3>Préparation<\/h3><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
C\u00f4t\u00e9 RGAA<\/h2>\n\n\n\n
Le crit\u00e8re 9.1<\/a> du R\u00e9f\u00e9rentiel G\u00e9n\u00e9ral d\u2019Am\u00e9lioration de l\u2019Accessibilit\u00e9 (RGAA) demande de v\u00e9rifier que l\u2019information de chaque page est correctement structur\u00e9e par des titres.<\/p>\n\n\n\n
Pour cela, trois tests doivent \u00eatre valid\u00e9s :<\/p>\n\n\n\n
    \n
  1. La hi\u00e9rarchie des titres est-elle pertinente ?<\/li>\n\n\n\n
  2. Chaque titre est-il pertinent ?<\/li>\n\n\n\n
  3. Chaque titre visuel l\u2019est-il aussi dans le code ?<\/li>\n<\/ol>\n\n\n\n
    Hi\u00e9rarchie des titres<\/h3>\n\n\n\n
    L\u2019attribution des niveaux aux titres doit \u00eatre coh\u00e9rente avec la structure de la page et ses contenus. Ainsi, il faut veiller \u00e0 ce qu\u2019un titre de grande importance ait un niveau de titre coh\u00e9rent par rapport \u00e0 un autre titre de moindre importance : c\u2019est-\u00e0-dire que le niveau du premier titre soit inf\u00e9rieur au second.<\/p>\n\n\n\n
    Exemple incorrect\u00a0: <\/p>\n\n\n\n
    <h2>Risotto aux cèpes<\/h2>\n <h3>La recette<\/h3>\n  <h1>Ingrédients<\/h1>\n  <h1>Préparation<\/h1><\/code><\/pre>\n\n\n\n
    Ici, les titres <h1><\/code> devraient \u00eatre de niveau 4.<\/p>\n\n\n\n
    Pertinence des titres<\/h3>\n\n\n\n
    Les passages de texte structur\u00e9s en titres doivent d\u00e9crire de fa\u00e7on pertinente le contenu qu\u2019ils introduisent.<\/p>\n\n\n\n
    Exemple incorrect : <\/p>\n\n\n\n
    <h2>La recette<\/h2>\n <p>Risotto aux cèpes<\/p>\n <h3>Les ingrédients<\/h3>\n<h2>La recette<\/h2>\n <p>La carbonnade<\/p>\n <h3>Les ingrédients<\/h3><\/code><\/pre>\n\n\n\n
    Les titres <h2><\/code> ne d\u00e9crivent pas de fa\u00e7on pertinente le contenu qui les suit. Ces titres devraient contenir le nom de la recette.<\/p>\n\n\n\n
    S\u00e9mantique des titres<\/h3>\n\n\n\n
    Les passages de texte qui sont visuellement des titres structurant les contenus de la page doivent avoir la s\u00e9mantique de titre dans le code.<\/p>\n\n\n\n
    Cette s\u00e9mantique s\u2019obtient de deux fa\u00e7ons :<\/p>\n\n\n\n