Principaux critères favorables à l’accessibilité des sites web

Extrait de la présentation faite à l’occasion de l’Assemblée générale.

À l’occasion de l’Assemblée générale de l’École de la pomme du 18 juin dernier à Soleure, Luc Fontolliet, nous a présenté les principaux critères favorables à l’accessibilité des sites web.

Luc est ingénieur indépendant en communication numérique, chargé de cours à la Haute École d’Ingénierie et de Gestion du Canton de Vaud et c’est grâce à lui que le site web de l’École de la pomme existe.

Nous t’invitons à prendre connaissance d’un extrait de sa présentation.

Voilà plus de quatre ans que le site web de l’École de la pomme est en ligne, sous la forme que nous connaissons tous aujourd’hui.

Est-ce que ce site est accessible et selon quels critères?

Bien évidemment, c’est vous, les utilisateurs, qui êtes les mieux placés pour déterminer si un site est accessible ou non.

La difficulté, c’est que ce n’est pas nous individuellement, avec la situation particulière de chacun, qui peut être prise en compte. Mais bien nous tous, le plus grand nombre, membres de l’École de la pomme ou non, qui consultons plus ou moins régulièrement son site web, ou tout autre site d’ailleurs.

Ceci implique une approche globale de l’accessibilité numérique, que ce soit au niveau du contenu, produit par des membres de l’École de la pomme, ou du contenant (le fonctionnement du site web) dont Luc a la responsabilité.

Pour déterminer si un site est réputé accessible ou non, il existe une multitude de critères, édictés, au niveau international par des organismes tel que le Word Wide Web Consortium (W3C) et, au niveau national, par l’Office fédéral de la communication (OFCOM) ou la fondation « Accès pour tous ».

Les dix critères abordés ci-dessous sont essentiels pour favoriser l’accessibilité des sites web par le plus grand nombre.

Bien qu’indispensables pour certains d’entre nous, ces critères s’intègrent dans une approche globale favorable à tous, humains ou machines. Car oui, les systèmes d’information qui nous accompagnent désormais quotidiennement, sont, eux aussi, tributaires de l’accessibilité numérique.

En effet, des documents aux contenus mieux structurés, mieux décrits, plus riches et présentés de façon adaptée sont bénéfiques à tout type de consommateurs de contenu, quels que soit sa nature, son âge, sa position géographique, le support et les moyens techniques utilisés, ses connaissances et ses besoins spécifiques.

Les cinq premiers critères retenus concernent le contenu du site web, le message, la raison d’être de toute communication.

Déclaration de la langue du contenu

La langue du contenu doit être déclarée pour l’ensemble du document et lors de tout changement de langue.

En effet, déclarer la langue apporte de nombreux avantages: la langue peut servir de critère de filtre dans les moteurs de recherche (dont Google), la langue est déterminante pour des outils de correction orthographique et grammaticale, la langue est indispensable pour permettre une traduction automatique et la langue est nécessaire pour une lecture par voix de synthèse.

Utilisation représentative et hiérarchisée des titres

Pratiquement toute page web contient des titres. Et pour certains d’entre nous, parcourir ces titres, comme s’ils étaient référencés dans une table des matières, est un moyen extrêmement efficace pour se rendre compte du contenu d’une page et naviguer vers les différentes parties qui la compose.

Les titres doivent donc être évocateurs de la structure du document et du contenu qu’ils introduisent et la hiérarchisation des titres doit être respectée (pas de saut de niveau).

Définition d’intitulés explicites pour les liens et les boutons

Les liens sont au cœur du web. Ils sont tellement importants qu’on les appelle « hyperliens ». C’est grâce à eux qu’il est possible de naviguer, de surfer sur le web, de passer d’une page à une autre.

Alors évidemment, il y a pas mal de critères favorables à l’accessibilité des liens dont un, particulièrement important, concerne leurs intitulés.

Il est en effet fort probable que certains d’entre nous aient déjà rencontrer des liens dont l’intitulé est « Cliquer ici », « Lire la suite », « Télécharger » ou même carrément un lien sans intitulé textuel car constitué uniquement d’une image non décrite. Pas idéal…

Il est également possible que certains d’entre nous parcourent les différents liens d’une page afin de pouvoir se rendre rapidement vers une autre page.

Les intitulés de lien doivent donc être évocateurs de leur cible, auto-suffisants et, idéalement, uniques au sein d’une page.

Si un lien s’ouvre dans un nouvel onglet, ceci devrait être mentionné (visuellement et vocalement) et s’il pointe vers un document formaté comme un fichier PDF, le format et le poids du fichier ciblé devraient être mentionnés.

Il en va de même pour les intitulés des boutons qui eux, ne servent pas à naviguer mais à effectuer une action.

Distinction entre les images de contenu et les images de présentation

Il peut y avoir deux type d’images sur une page web: les image de contenu, porteuses d’une information et nécessaires à la compréhension du message; et les images de présentation, qui ne sont là que pour décorer ou embellir la page.

S’il n’est pas toujours facile de faire la distinction entre ces deux types d’images, une chose est claire: toute image nécessaire à la compréhension du contenu ou de l’interface doit faire l’objet d’une description textuelle explicitant l’information véhiculée par l’image.

Ne pas le faire, c’est prendre le risque qu’un lecteur d’écran nous dise « Graphique: DVE_2071.jpg ». Pas très évocateur…

Les images de présentation devraient quant à elles être totalement silencieuses.

Explication des abréviations, sigles et acronymes

« IICT », « REDS », « IGT » ou « MEI », ça te parle? Probablement pas… Ce sont des instituts de recherche de la HEIG-VD. Oups… De la Haute École d’Ingénierie et de Gestion du Canton de Vaud.

Nous utilisons tous des abréviations, des sigles ou des acronymes et nous avons tous cette fâcheuse tendance à penser que leur signification est connue du plus grand nombre… Méchante erreur!

Les abréviations, les sigles et les acronymes doivent donc être décrits, au minimum lors de leur première apparition sur une page web.

Exemple: La Fédération suisse des aveugles et malvoyants (FSA) est partenaire de l’École de la pomme.

Les cinq prochains critères retenus concernent spécifiquement la conception fonctionnelle et graphique des sites web. Autrement dit: les interfaces.

Mise à disposition de plusieurs moyens de navigation

Dans le cas du site de l’École de la pomme, il y en a trois:

Le menu (dans l’entête de page);
Le moteur de recherche interne au site (dans l’entête de page);
Le plan du site (dans le pied de page).

Suivant la complexité d’un site, un fil d’Ariane (exprimant le cheminement réalisé dans l’arborescence du site pour atteindre la page souhaitée) pourrait également être mis à disposition.

Mise à disposition de liens d’évitement

Sur un site comme celui de l’École de la pomme, toutes les pages commencent par le même contenu: l’entête avec le logo (qui permet de revenir à la page d’accueil), le champ de recherche, les liens pour changer de langue, le lien pour aller dans la partie destinée aux entreprises ou aux particuliers, une image et les 24 liens qui composent le menu.

Soit plus de trente éléments génériques qu’il serait pertinent de pouvoir sauter afin de consulter directement le contenu spécifique de la page.

C’est dans ce but qu’il est nécessaire de définir, tout en haut de la page, des liens d’évitement pour permettre une navigation rapide vers les zones principales de la page.

Ils doivent notamment permettre de sauter directement:

Au contenu spécifique de la page;
Au menu principal;
Au moteur de recherche.

Dans le cas de l’École de la pomme, il y en a encore trois autres qui ont été ajoutés sur la page d’accueil afin de te permettre d’accéder rapidement:

Aux trois dernières actualités;
Aux trois prochains cours;
Aux trois derniers trucs et astuces.

Ainsi, en quelques tab, tu peux consulter le contenu qui t’intéresse.

Utilisation optimale des couleurs et des contrastes

Les couleurs et les contrastes doivent être utilisés de façon à permettre une lisibilité optimale des contenus.

Le taux de contraste entre un texte et son arrière-plan doit être conforme aux recommandations.

Il y a aussi le mode sombre (dit dark mode) que certains d’entre nous utilisent peut-être depuis très longtemps. Et, année après année, on constate qu’il est de plus en plus utilisé par le plus grand nombre, contraint de passer de nombreuses heures face à un écran ultralumineux.

Conception adaptative des interfaces graphiques

Les interfaces doivent pouvoir s’adapter aux différentes tailles d’écran afin que le site puisse être confortablement consommé que ce soit sur un ordinateur, une tablette ou un smartphone.

Les fonctionnalités et les contenus informatifs doivent être équivalents, quel que soit la taille de l’écran.

Un niveau de zoom de 200% du texte doit pouvoir être supporté sans dégradation du rendu.

Définition d’intitulés explicites pour les éléments de formulaire

Ah, les formulaires… Qui ne s’est pas déjà cassé les dents ou arraché les cheveux face à un formulaire pratiquement inutilisable?

Seulement voilà: au même titre que les liens, les formulaires sont essentiels au fonctionnement du web. Sans eux, pas de recherche ni d’authentification dans un espace privé. Sans eux, par de publication de contenu ni de commande en ligne.

Mais avec eux, viennent des problèmes de sécurité, de qualités des données et de spam…

Alors, là aussi, il y a pas mal de critères favorables à l’accessibilité des formulaires dont un, particulièrement important, qui concerne les champs et leur label.

Le label d’un champ de formulaire doit être évocateur de la valeur attendue. Si un motif particulier est exigé (comme pour un numéro de téléphone ou un numéro AVS), il doit être spécifié.

De plus, il doit être sémantiquement et visuellement lié à son champ. Ainsi, un clic sur le label mettra le focus dans le champ et la prise du focus du champ permettra à une voix de synthèse de lire le label.

D’autre part, tout champ de formulaire doit être accessible au clavier et les champs obligatoires doivent être clairement mentionnés.

Il existe bien évidemment une multitude d’autres critères favorables à l’accessibilité des sites web donc certains concernent spécifiquement l’usage des langages informatiques permettant de décrire (à l’aide du HTML) et présenter (à l’aide du CSS) du contenu sur une page web et dont le niveau de complexité est suffisamment important pour ne pas à avoir à les évoquer ici.

Reste donc à savoir si le site de l’École de la pomme est accessible ou non.

Si on s’en tient aux dix critères ci-dessus, on est plutôt bien. Pas parfait, mais sans doute autour des 9 sur 10.

Est-ce suffisant pour répondre à tous les besoins et à toutes les situations? La réponse est clairement « non »; certains besoins particuliers ne sont sans doute pas couverts. Et peut-être que certains d’entre vous aurons l’occasion de nous faire un retour en commentaire.

Alors, on pourrait se demander si l’accessibilité du site web de l’École de la pomme peut être améliorée? La réponse est « oui »; notamment en ce qui concerne les liens, le menu et les taux de contraste.

Quant à savoir si l’accessibilité du site de l’École de la pomme doit être améliorée, la question reste ouverte…

Car, bien que non technique, l’habitude est également un critère favorable à l’accessibilité et que tout changement pour avoir un impact plus ou moins fort sur votre façon de consulter le site web de l’École de la pomme.