TABLE DES MATIÈRES
Un bon site web est un site accessible, un site par lequel le plus grand nombre de personne possible arrive avec succès à accéder à l’information relayée.
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.
Les bénéfices
Loin de briser votre créativité et de faire de votre site une plateforme ennuyeuse, vous avez tout à y gagner.
→ Respecter la loi
La loi oblige en Belgique à ce que tous les sites web et applications mobiles des organismes publics soient accessibles. Cette obligation est en vigueur depuis le 23 juin 2021 pour les applications mobiles, et depuis le 23 septembre 2021 pour les sites web.
→ Améliorer son image
La réputation d’une entreprise passe en partie par le site web qui la soutient. S’il est correctement accessible par tout·e internaute, cela ne pourra être que positif pour votre communication générale.
Vous pourrez ainsi compléter vos engagements éthiques.
→ Élargir son audience
Un site accessible est capable d’accueillir et de satisfaire un plus grand nombre de personnes.
Gardez cela en tête : personnes âgées, daltonien·ne·s, malvoyant·e·s, dyslexiques, etc., représentent environ 25% des personnes que vous voulez toucher…
→ Doper son SEO
Un site accessible est extrêmement bien structuré, tant au niveau de la structure sémantique (le code) qu’au niveau du contenu. C’est un site qui a travaillé son wording, pour s’assurer d’être compréhensible par toute personne. Ce sont des contenus clairs, cohérents et bien construits.
Tout ce que cherchent et adorent les moteurs de recherche !
Aspects visuels
Il existe des exigences d’accessibilités pour les personnes malvoyantes. Certaines personnes ont une faible sensibilité aux contrastes (il s’agit souvent de personnes âgées) ou ne distinguent pas toutes les couleurs (condition nommée “daltonisme”). De plus, le contenu doit être lisible par tout le monde, et ce, dans différentes conditions d’éclairage.
Pour cela, une solution est de garantir le contraste suffisant des couleurs.
a. Couleurs / Contrastes
Quelques conseils :
- Lors de la création de votre identité graphique, utilisez des outils existants pour vérifier que vos contrastes de couleur sont suffisants (ouvre une nouvelle fenêtre). Gardez en tête que le niveau AA est un indicateur de l’obligation minimale d’accessibilité.
- Faites en sorte que les informations essentielles ne soient pas uniquement traduites par des couleurs. Utilisez des icônes, symboles ou des notifications en plus des couleurs.
b. Typographies et mise en page
Les polices décoratives peuvent être plus difficiles à déchiffrer pour des personnes en situation de handicap. Si vous en utilisez, limitez leur usage.
Quelques conseils :
- Evitez les polices condensées ou décoratives qui seraient difficiles à lire, ou limitez leur usage à des éléments courts facilement reconnaissables
- Utilisez des tailles de texte suffisantes à la fois pour des facilités de lecture, mais aussi de hiérarchisation de l’information (des titres ou sous-titres très grands qui regroupent plusieurs sections de textes pour signifier leur appartenance à un thème commun par exemple)
- N’hésitez pas à utiliser des listes (texte enrichi), images, illustrations, audios et symboles pour clarifier votre contenu
- Un texte écrit en capitale sera moins lisible pour tout le monde
- L’espacement entre les lignes doit être d'une valeur d'au moins 1,5
- Privilégiez l’alignement des textes à gauche, surtout pour les contenus longs
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.
a. Formulation
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 ? Une fois que vous avez votre ton, collez-y tout au long de la production de vos contenus. Si vous doutez du ton à employer, pensez à vos personas (que Spade peut vous aider à définir).
Quelques conseils :
- Évitez les lignes de textes trop longues
- Écrivez des contenus clairs et concis
- Décrivez les acronymes à leur première utilisation
b. Aller à l’essentiel
L’approche mobile-first consiste à réfléchir les contenus, structures et le design d’un site web avec comme contrainte la taille d’écran la plus petite. Cette approche, promue par Spade, c’est l’assurance d’un site responsive (qui s’adapte à toutes les tailles d’écran, donc les vues mobiles, tablettes et desktop) mais pas que : c’est aussi et surtout une réflexion quant à la meilleure façon de communiquer. Il est plus facile d’adapter des contenus et des mises en pages depuis une vue en mobile vers une vue desktop que l’inverse - auquel cas il arrive souvent de devoir couper dans le contenu. Cette méthodologie influence à la fois le contenu et la mise en page.
Textes courts et faciles à comprendre
Aller à l’essentiel dans la rédaction de vos textes vous permet d’approcher une communication plus impactante, en vous débarrassant du superflu. De plus, certaines personnes ont des difficultés à comprendre les informations. Cela peut être car ces personnes sont en situation de handicap intellectuel, mais ce n’est pas nécessairement le cas. Le langage FALC (FAcile à Lire et à Comprendre) a pour but de rendre ces informations facile d’accès.
FALC : FAcile à Lire et à Comprendre
C’est un langage qui peut être compris par tout le monde. Il y a des règles à suivre (ouvre une nouvelle page).
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). Le problème, c’est que lorsqu’on fait un copier-coller, 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. Ces éléments ne sont pourtant pas nécessaires dans l'environnement final.
Quelques conseils :
- 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".
c. Images
Le texte alternatif peut être lu par les lecteurs d’écran, et est affiché par les navigateurs en cas d’échec d’affichage de l’image. Il joue un rôle important dans le référencement de votre site, car Google s’en sert pour indexer les images.
Dois-je prévoir un texte alternatif pour chaque image sur mon site web ?
Non, il ne faut pas ajouter un texte alternatif pour les images purement décoratives, ou dont le texte alternatif serait redondant avec le contenu textuel associé. En effet, si l'information est disponible dans la page, l’image est considérée comme décorative.
Ça ne vous paraît pas clair ?
→ Vous trouverez ici l’arbre décisionnel pour l’attribut alt (ouvre une nouvelle page)
→ Les conseils d’Anysurfer (ouvre une nouvelle page)
Pour ajouter les textes alternatifs sur tous vos médias :
- Cliquez sur Médias dans le “Tableau de bord”
- Rajoutez pour chaque image les informations souhaitées
Quelques conseils :
- Utilisez une phrase unique, qui apporte une information (au maximum 150 caractères)
- Incluez un mot-clé dans le texte alternatif, au moins pour les images mises en avant, ou la première image de votre article/contenu (pour le référencement)
- Ne commencez pas par “Ceci est une image de …”, ce n’est pas nécessaire car les lecteurs d’écrans indiquent qu’il s’agit d’une image aux utilisateurs et utilisatrices
- Si votre texte alternatif est plus long que 150 caractères, vous devrez ajouter une description longue et mentionner dans votre texte alternatif qu'une description longue suit.
- Images en filigrane et lisibilité
Prévoyer des couleurs transparentes si vous souhaitez utiliser des styles dans lesquels votre image est sous un texte (en filigrane), afin de rendre lisible ce dernier. Vous pouvez régler la transparence d’une couleur en utilisant le second curseur des paramètres de couleur.
- Le poids des images impacte grandement la vitesse de chargement d’une page web.
Pour plus de détails sur comment redimensionner et compresser vos images, nous vous renvoyons sur notre article “pollution numérique”.
d. Vidéos
Les vidéos ne sont pas accessibles à tout le monde. Pensons aux personnes malvoyantes, malentendantes, ou simplement aux personnes dans des lieux bruyants ou nécessitant le silence, qui n’auraient pas accès au son.
Quelques conseils :
- L’ajout de sous-titres. Attention, ceux-ci doivent apparaître sous forme de phrases (et pas mot à mot), ils doivent être synchronisés et équivalents au contenu de la vidéo
- L’ajout d’une description audio. Pour les éléments d’une vidéo purement visuels mais qui apportent des informations
- L’ajout d’une transcription. Cette transcription peut être lue par un lecteur braille
- Ne pas lancer les vidéos automatiquement, et permettre aux utilisateurs et utilisatrices de désactiver ou mettre en pause les vidéos et contenus animés. Cela s’applique aux carrousels, aux diaporamas d’images, au son en arrière-plan, et aux vidéos
Structuration & Storytelling
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.
Développer son storytelling nécessite de tenir compte de quelques règles, qui permettent de garder la cohérence.
a. Hiérarchie des titres
Le premier champ à remplir d’un bloc Minotaure est généralement son titre, et par défaut il est défini en H1.
Pensez à manuellement le passer en H2 si vous avez déjà en amont défini le titre principal de votre page.
C’est un élément structurel qui vous aidera à la bonne compréhension de votre site en terme d’accessibilité mais également pour l’indexation par les moteurs de recherche (SEO).
Nous vous conseillons de toujours suivre la structure suivante au sein d’une page ou d’un contenu, selon vos besoins (un seul titre de niveau 1 par Page, puis des titres de niveaux 2 pour structurer vos contenus, qui peuvent eux-même être subdivisés grâce à des titres de niveau 3, puis 4, etc.).
En bref, ne sautez pas de niveau de titres simplement pour des raisons esthétiques.
<H1>
<H2>
<H3>
<H3>
<H2>
<H3>
<H4>
<H3>
b. Habitudes d’utilisation
Le Storytelling, en plus du choix du ton utilisé et de la structuration cohérente des blocs de contenus, se construit autour d’habitudes d’utilisation.
- Créez des habitudes de consultation : un "univers familier" où les utilisateurs et utilisatrices se retrouvent facilement. Par exemple, commencez toujours par un Hero 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.
- Vos illustrations aussi sont 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.
→ Découvrir l’article sur la pollution numérique