Skip to content

Latest commit

 

History

History
231 lines (163 loc) · 13.7 KB

3-contenus.md

File metadata and controls

231 lines (163 loc) · 13.7 KB
Raw

Guide de l'intégrateur

Fiche 3 : Contenus et structuration

Introduction - cas utilisateurs

Dans cette fiche, nous allons traiter des éléments de structure utilisés notamment dans les contenus et les corps de page.

Structurer les contenus avec les éléments appropriés offre une expérience de navigation enrichie pour les utilisateurs de lecteurs d'écran. Un utilisateur aveugle, malvoyant ou ayant des difficultés de lecture et qui utilise un lecteur d'écran pour parcourir le contenu d'une page, va utiliser des raccourcis clavier pour naviguer entre les types d'éléments. Il peut naviguer de titre en titre, aller au prochain champ de formulaire, afficher la liste des iframe ou encore aller à la liste précédente.

En plus de permettre de naviguer entre éléments, cela lui permet également de les éviter.

Synthèse

  • Donnez un titre pertinent aux cadres en ligne.
  • Utilisez les balises appropriées pour structurer les listes.
  • Indiquez les changements de langue et de sens de lecture.
  • Indiquez les ouvertures de nouvelles fenêtres.
  • Indiquez le format et le poids des documents en téléchargements.

Cadres

Pour un utilisateur déficient visuel utilisant un lecteur d'écran, être prévenu du type de contenu d'un cadre lui permet de choisir s'il va l'explorer. De plus, avoir à disposition un titre fournit à l'utilisateur un moyen supplémentaire de navigation entre les éléments : il va pouvoir rechercher entre tous les cadres, ou aller de cadre en cadre.

Lorsque vous embarquez des contenus issus d'autres sites web via des cadres en ligne, vous devez implémenter un attribut title sur ces cadres qui permettent d'identifier le contenu. Les utilisateurs aveugles sont les plus impactés par cette problématique. Vous devez leur donner les indications suffisantes pour qu'ils sachent quels types de contenus ils vont y trouver. En effet, certains lecteurs d'écran offrent une fonctionnalité permettant d'afficher la liste des cadres de la page, le title servira à identifier les cadres dans cette liste.

<iframe title="Fil Twitter de la DInSIC"></iframe>

Dans le cas des cadres techniques, non visibles et utiles uniquement à la gestion des données par les scripts, un titre générique sur le modèle « Cadre technique » est suffisant.

Titres

Utiliser des titres et des sous-titres permet de structurer et découper un texte. Cela fournit à l'utilisateur un plan du document et lui permet de naviguer de titre en titre pour se déplacer plus rapidement dans le contenu de la page.

Le titrage des contenus est une étape importante dans la structuration des contenus qui répond à deux besoins : identifier rapidement un contenu recherché et, surtout, naviguer rapidement dans le contenu en se déplaçant de titre en titre.

Il y a 3 obligations pour le titrage des contenus :

  • la page doit comporter au moins un titre <h1> ;
  • la hiérarchie de titres doit être cohérente ;
  • tous les titres nécessaires doivent être présents.

Une hiérarchie cohérente est une hiérarchie qui ne contient pas de saut dans les niveaux de titres. Par exemple, après un h2 on doit trouver un h3, un autre h2 ou un nouvel h1, mais surtout pas un h4.

Enfin, tous les titres nécessaires à l'architecture de l'information doivent être présents. Il s'agit de proposer un plan de la page permettant de comprendre et de naviguer rapidement dans le contenu.

Pour valider la structure de votre page, vous pouvez utiliser l'extension Firefox HeadingsMap. Sélectionnez l'onglet « Headings » et vérifiez la cohérence et l'imbrication des titres.

ARIA

ARIA propose des propriétés qui permettent de transformer n'importe quel élément HTML en titre : role="heading" et aria-level="n".

Toutefois, certaines fonctionnalités de navigation rapide dans les titres peuvent ne plus fonctionner avec une implémentation de titre ARIA, qui ne devrait être utilisé que lorsque le recours à un vrai titre HTML n'est pas possible.

<div role="heading" aria-level="2">Accueil</div>

Note : les outils de tests automatiques comme HeadingsMap ne font pas entrer les titres créés avec des propriétés ARIA dans les plans de documents qu'ils génèrent. Attention donc à vérifier manuellement vos hiérarchies si vous utilisez ce type d'implémentation.

Listes

Pour un utilisateur aveugle naviguant avec un lecteur d'écran, le nombre d'éléments que contient la liste est annoncé, ainsi que le niveau de l'élément dans la liste. Ainsi, si l'utilisateur juge la liste trop longue, il pourra tout simplement l'éviter plutôt que de la parcourir en entier, il peut aussi aller au début de la liste, ou à la fin directement.

Toutes les listes doivent être structurées avec les balises appropriées. On distingue 3 types de listes :

  • les listes non ordonnées ul li ;
  • les listes ordonnées ol li ;
  • les listes de définitions dl dd dt.

Toutes les suites d'éléments doivent être considérées comme une liste. Par exemple, une succession de liens, une succession d'indications courtes (recette de cuisine par exemple). Ces structures de listes sont surtout utiles aux utilisateurs aveugles pour qui la liste, la nature de la liste, le nombre d'éléments et le niveau de l'élément en cours de lecture sont vocalisés. De plus, grâce aux flèches de direction, ces utilisateurs peuvent circuler d'item de liste en item de liste ou encore,à l'aide d’un raccourci clavier, se déplacer rapidement de liste en liste.

Dans certains cas néanmoins, le recours à une liste peut-être considéré comme inutile. Par exemple, pour un bloc d'adresse isolé dans un contenu le recours à une liste n'a pas d'utilité pratique.

ARIA

ARIA propose des propriétés qui permettent de transformer une succession d'éléments en liste non ordonnée : role=list et role=listitem.

Toutefois, certaines fonctionnalités de navigation rapide dans les éléments de listes peuvent ne plus fonctionner avec une implémentation de liste ARIA qui devrait être réservée lorsqu'il n'est pas possible d'utiliser une vraie liste HTML.

  <div role="list">
	<p role="listitem">Accueil</p>
	<p role="listitem">Actualités</p>
	<p role="listitem">Contact</p>
  <div>

Changement de langue

Pour tous les termes de langue étrangère qui n'appartiennent pas au dictionnaire de la langue française (par exemple : brainstorming ) et qui ne sont pas des noms propres (par exemple Watson), vous devez indiquer un changement de langue avec l'attribut lang sur l'élément lui-même ou un de ses éléments parents.

L'indication des changements de langue est nécessaire pour indiquer aux technologies d'assistance de modifier la restitution vocale d'un élément. Les changements de langue concernent tous les contenus, y compris les valeurs de certains attributs comme title. Il n'est pas possible d'indiquer des changements de langue dans une valeur d'attribut elle-même, dans ce cas le changement de langue est indiqué sur l'élément qui contient l'attribut. Un lien affecté d'un title en anglais devra comporter un attribut lang="en". Lorsque l'attribut contient plusieurs passages de texte dans des langues différentes, il est admis qu'aucune indication pertinente ne peut être faite et donc qu'aucun attribut ne soit présent.

La valeur de l'attribut lang correspond au code ISO de 2 caractères (ISO 639-1) ou 3 caractères (ISO 639-2 et suivants).

<p>Retrouvez vos interprètes préférés au cours de l'<span lang="en">after</span> organisé par nos partenaires.</p>

Changement de sens de lecture

Pour les changements de sens de lecture, vous devez implémenter l'attribut dir sur l'élément lui-même ou un parent pour traiter des contenus successifs. L'attribut dir prend une des valeurs suivantes :

  • ltr : left to right, de gauche à droite
  • rtl : right to left, de droite à gauche
  <span lang="ar" dir="rtl">
شكرا جزيلا
  </span>

Nouvelles fenêtres

Les ouvertures de nouvelles fenêtres peuvent demander beaucoup d'efforts à certains utilisateurs pour revenir à la page qu'ils consultaient. Ainsi, un utilisateur naviguant uniquement à l'aide de la touche tabulation va devoir effectuer des manipulations supplémentaires pour fermer et revenir à la fenêtre d'origine. Les utilisateurs ayant des troubles de l'attention peuvent également être désorientés par les ouvertures de nouvelles fenêtres, surtout si elles ne sont pas de leur fait (ouverture sans action de l'utilisateur).

Pour chaque élément interactif qui ouvre une nouvelle fenêtre (ou un nouvel onglet), vous devez avertir l'utilisateur.

Sont concernés :

  • les liens qui possèdent l'attribut target (avec n'importe quelle valeur sauf _self,_top ou _parent) ;
  • les scripts qui déclenchent l'ouverture de nouvelles fenêtres ;
  • les éléments object ou embed qui ouvrent une nouvelle fenêtre ;
  • les contrôles de formulaires (button, input type="submit", input type="reset" par exemple) qui déclenchent l'ouverture de nouvelles fenêtres.

Pour avertir l'utilisateur, vous pouvez :

  • ajouter la mention « nouvelle fenêtre » directement dans l'intitulé de l'élément concerné ;
  • ajouter, si l'élément le permet, un title sur le modèle : Intitulé du lien - nouvelle fenêtre (attention à respecter les règles de création des title).

Pas de nouvelles fenêtres sans action de l'utilisateur

L'ouverture d'une nouvelle fenêtre lorsque l'utilisateur ne l'a pas sollicitée peut être très perturbante.

Si cet usage est fortement déconseillé, il y a un cas où la gêne occasionnée est trop importante pour être accepté. Cela concerne l'ouverture de nouvelles fenêtres au chargement de la page.

En effet, dans ce cas les personnes aveugles, utilisatrices de lecteur d'écran, et les personnes handicapées mentales peuvent ne plus savoir quelle est la page de contenu principal.

Important : L'ouverture de nouvelles fenêtres au chargement de la page est strictement interdite.

Fichiers en téléchargement

Sur le même principe que l'ouverture de nouvelles fenêtres, pour tous les documents en téléchargements, vous devez indiquer :

  • le poids du document ;
  • le format (PDF, doc, xls…) ;
  • la langue si elle est différente de celle du site.

Cette information peut être mise à disposition dans le contexte adjacent du lien ou de l'élément de formulaire (par exemple la phrase). Il est néanmoins préférable d'ajouter ces informations sur l'élément lui-même, par exemple l'intitulé ou le title.

<p>Téléchargez le <a href="#" title="catalogue 2016 (PDF, 450ko)">catalogue 2016</a></p>

Lorsque les documents en téléchargement sont générés à la volée (par exemple, le résultat d'un questionnaire ou d'une recherche) et qu'il n'est a priori pas possible de définir le poids du document, il est admis que seul le format soit indiqué.

Voir ailleurs / Ressources

Critères RGAA

  • 2.1 [A]
  • 2.2 [A]
  • 8.7 [AA]
  • 8.8 [AA]
  • 8.10 [A]
  • 9.1 [A]
  • 9.3 [A]
  • 13.2 [A]
  • 13.3 [A]
  • 13.6 [A]

Sommaire du guide de l'intégrateur