TABLE DES MATIÈRES
L'accessibilité du web concerne l'accès aux contenus web pour toutes les personnes (y compris celles en situation de handicaps visuels, auditifs, etc.), quels que soient les dispositifs d’accès (mobile, tablette, etc.) et leur environnement (niveau sonore, éclairement, etc.). L'enjeu est donc de prendre en compte l'ensemble des conditions de consultation lors de la création de son site et de ses contenus.
- Pour la création du site (design et développement), le cadre technique Minos est nativement prêt à accueillir différentes exigences d'accessibilité. Plusieurs sites réalisés avec ont ainsi obtenu le label belge d'accessibilité AnySurfer (ouvre une nouvelle fenêtre).
- Pour la rédaction et la préparation du contenu du site, il y a une série de bonnes pratiques à prendre en compte. En voici quelques-unes ci-dessous.
Structurer son contenu
Le principe de Minotaure est de profiter au mieux de la grande souplesse qui est donnée aux rédacteurs et rédactrices pour créer des contenus attrayants, clairs (et concis) ; en un mot, agréables à parcourir. L'enjeu majeur est de permettre aux utilisateurs et utilisatrices de "scanner" rapidement les pages pour y trouver l'information recherchée en un minimum de temps.
Pour y arriver, vous avez deux façons d'envisager les choses.
Développez votre propre storytelling en faisant appel aux blocs Minos
Si vous avez eu l'occasion de participer aux ateliers de Spade, vous connaissez déjà nos plaquettes de contenus-types Minotaure UXKit. Ces ateliers participatifs peuvent se réorganiser en interne selon les besoins de contenus à créer.
Plaquettes Minotaure en bois, utilisées lors des workshops
Développer son storytelling nécessite de tenir compte de quelques règles, qui permettent de garder la cohérence.
- Créez des habitudes de consultation au sein des pages que vous élaborez, c'est-à-dire des éléments qui reviennent régulièrement et forment un "univers familier" où les utilisateurs et utilisatrices se retrouvent facilement. Commencez toujours par un Hero par exemple et terminez avec un formulaire de contact, ou envisagez des contenus contenant des liens vers d'autres pages. La répétition d'éléments (aussi bien de contenus que de style ou de mise en forme) permet de rappeler ce que vous jugez essentiel, de mettre en avant les actions attendues, et de répondre plus rapidement aux attentes de vos publics cibles.
- Pensez au ton employé sur votre site (en anglais, tone of voice). Êtes-vous plutôt dans le 'vous' ? Le 'tu' ? Dans une approche amicale, pédagogique ou officielle ? Vous identifiez-vous avec un 'nous' ou avec le nom de l'entreprise ? Une fois que vous avez votre ton, collez-y tout au long de la production de vos contenus. Si vous doutez du ton à employer, basez-vous sur votre audience : qui sont-ils/elles ? Comment aiment-ils/elles qu'on leur parle ? Pensez à vos personas (que Spade peut vous aider à définir). Dans tous les cas, gardez en tête que toutes les personnes sur votre site ne sont pas des expertes dans votre domaine - en d'autres termes, explicitez le jargon, faites des phrases simples, vulgarisez !
- Agissez de même pour vos illustrations, elles sont aussi importantes pour la cohérence. Si vous utilisez des dessins, faites appels à la même personne pour toutes les images de votre site. S'il s'agit de photos, exploitez les cadrages, les sujets, les filtres (noir et blanc, sepia, etc.) de manière unifiée.
- Trouvez le bon bloc pour le bon contenu ! Ceci peut sembler facile dit comme ça 😃 On sait que dans la pratique, les contenus sont plus longs et plus complexes que dans les maquettes validées en aval... c'est tout l'exercice ! Synthétisez, vos lecteurs vous remercieront. Pensez avant tout à adapter le contenu au bloc et si ça ne va vraiment pas, changez le bloc. Avec la panoplie dont vous disposez, il y aura forcément celui qu'il vous faut.
- Pensez Mobile First : N'oubliez pas qu'un grand nombre de vos utilisateurs vous liront sur smartphone...
Astuces pour rendre du contenu texte plus lisible et accessible
- Faites court ! C’est ce qui déterminera pour beaucoup la lisibilité et l’accessibilité d’une page car les phrases et paragraphes courts permettent de cadencer la lecture et facilitent la compréhension de la page par tous les publics. Les gros blocs de textes sont intimidants et fastidieux à lire. Les lecteurs et lectrices veulent accéder à ce qui les intéresse immédiatement et sans effort. Dès lors, facilitez-leur la tâche… et si vous manquez d'inspiration, mettez-vous à leur place : que chercheriez-vous sur votre site ? Que voudriez-vous y voir / lire en premier lieu ?
- Ajoutez des visuels à vos contenus. Ils peuvent illustrer ou compléter le contenu textuel en simplifiant la compréhension des idées
- Donner un titre unique à chaque page Chaque page doit avoir un titre unique et utile qui indique le but de la page.
- Structurez votre contenu avec des titres. Les niveaux de titres indiqués par H1, H2... H6 servent à structurer le contenu éditorial d’une page web. H1 est le plus important (également le plus grand), H6 le moins important. Exploitez-les dans toutes vos pages, une bonne utilisation des titres permet aux utilisateurs et utilisatrices de scanner plus facilement et rapidement vos contenus et de s’assurer d’être au bon endroit. Exemple: maniez les sous-titres. Ils servent à inciter l’internaute à continuer à lire, mais aussi de structure pour faciliter la compréhension des enchaînements des différentes idées pour le lecteur.
- Utilisez des labels courts et explicites pour vos boutons (plus d’informations sur l’utilisation des call to action) Un bouton ne doit pas faire plus de 3 mots. Il ne doit contenir qu'une action à la fois, cette action doit être clairement compréhensible. Exemple: “Nous contacter”. Attention également à la cohérence! Tous les boutons qui pointent vers le même contenu doivent avoir le même label. Exemple: Tous les boutons menant vers le formulaire de contact doivent avoir comme label ‘Nous contacter’. Pensez que sur un téléphone mobile, un bouton trop long risque de sortir du viewport (= la zone visible de la page sur l'écran).
- Utilisez des enrichissements pour faciliter la lecture. Un mot en gras, en italique, des numéros, etc., sont autant d'enrichissements qui aident une personne à trouver ses marques de page en page. Utilisez également certains éléments qui sortent de l’ordinaire - une citation par exemple. Exemple: Utilisez des listes à puces car elles permettent d’énumérer des éléments et aident à retenir plus facilement des idées. Rappelez-vous toutefois que pour les titres, les citations, l'alignement des paragraphes, etc., un certain nombre de paramètres sont déjà définis dans la feuille de styles de votre site - inutile donc de rajouter du gras, du souligné ou autre : ce sera fait automatiquement. La feuille de styles de votre site garantit cohérence et esthétique.
- Restez cohérent Les termes utilisés sur le site doivent être cohérents. Cela les rend familiers et prévisibles. Exemple: Après avoir appris une fonctionnalité, l’utilisateur la retrouvera plus facilement ensuite.
Le copier-coller
Il est fréquent que le contenu des futures pages d’un site web soit d’abord rédigé sur un document dans un logiciel de traitement de texte (Microsoft Word ou similaire). On fait alors un copier-coller du texte dans le bloc de contenu. Bien souvent s’ensuit une série de soucis, qu'ils soient fonctionnels ou de mise en page.
La raison principale réside dans le fait que généralement on ne copie pas que du texte brut, mais tout un environnement de mise en page.
Le "copier" du texte va en effet aussi copier des informations sur la typographie utilisée, la taille des caractères, l'interlignage, la couleur, etc. En grande majorité, ces éléments ne sont pourtant pas nécessaires dans l'environnement dans lequel on souhaite coller le contenu. En effet, la typographie, l'interlignage, le style des éléments structurels (titres, sous-titres), la couleur, etc., sont déjà gérés par la feuille de style (CSS) de votre site web. C'est elle qui est garante de votre identité visuelle et d'un environnement graphique cohérent.
Il faut dès lors toujours éviter d'importer autre chose que du contenu en texte brut.
Conseils d'édition
Ne pas faire de "copier-coller"
La première solution est d'écrire directement dans les blocs appropriés : on crée ou adapte ainsi son contenu selon son environnement propre.
Comment éviter les soucis si le "copier-coller" n’est pas évitable ?
Si l'on doit malgré tout faire un copier-coller, il est alors préférable de passer par un outil intermédiaire qui n'est pas en mesure de garder en mémoire la mise en page. Cela peut par exemple être un éditeur de texte brut (NotePad sous Windows, TextEdit sous Mac), ou un éditeur de code HTML (Atome, SublimeText, ...).
Certains logiciels permettent de faire un collé "spécial" qui va supprimer les balises automatiquement: c'est le cas de TextEdit sous Mac, avec l'option "Coller et adapter le style".
Insérer des images qui ont du sens
Toutes les images que vous chargerez dans votre site web doivent être liées à un certain nombre d’informations :
- elles doivent avoir un titre clair (cela vous aidera entre autres à la retrouver lorsque vous voudrez l’insérer quelque part et que votre bibliothèque comptera des centaines ou des milliers de médias)
- elles doivent avoir un texte alternatif si elles ont vocation à illustrer un propos ou si elles amènent une information dans le contenu de votre page. Si elles ont une vocation purement décorative, le texte alternatif n’est pas indispensable.
- Pour aider les utilisateurs et utilisatrices avec un handicap physique ou visuel à naviguer sur votre site et à comprendre ce qui est sur votre page (ne pouvant voir l’image, le lecteur d’écran va lire son texte alternatif qui en décrit le contenu et lui indique les informations qu’elle contient éventuellement)
- Cliquez sur Médias dans le “Tableau de bord”
- Rajoutez pour chaque image les informations souhaitées
Le texte alternatif
Il est utile pour plusieurs raisons :
Le texte alternatif est une alternative à toutes les images porteuses de sens, c’est-à-dire, à toutes celles qui apportent une information complémentaire au texte qu’elles accompagnent.
Il faut vous poser quelques questions avant de rajouter un texte alternatif :
Mon image est-elle décorative ? ou est-ce qu’elle apporte une information ?
Exemple 1: une image montrant une personne qui promène son chien. Cette image est purement décorative. Elle accompagne mon article, elle n’a aucune fonction.
Exemple 2 : je rajoute le logo de mes partenaires dans le pied de page. L’image apporte une information et donc le texte alternatif est nécessaire: le contenu sera le nom du partenaire. Voir comment mettre les logos partenaires dans le pied de page en prenant en compte l’accessibilité.
Exemple 3 : je rajoute une image de l’organigramme de mon entreprise sans texte. Ici, l’image est informative mais le texte alternatif n’est pas conçu pour rajouter autant de description de tout l’organigramme. Il importera alors de créer un texte expliquant l’agencement de mon entreprise.
Anysurfer vous partage plus d’informations sur le texte alternatif
Pour ajouter les textes alternatifs sur tous vos médias :
Facultatives
- une légende
- une description