Accessibilité Archives - Ekino FR

L’accessibilité, c’est pour toutes les personnes en situation de handicap.

Situation de handicap = Lorsqu’un utilisateur ayant une déficience se trouve empêché d’utiliser un site ou une application du fait de l’inadaptation du contenu et de ses fonctionnalités à ses capacités.

Se mettre en conformité a quelques avantages :

  • Permettre la non-discrimination et une audience accrue;
  • Intégrer la notion d’accessibilité à son entreprise est une démarche citoyenne qui montre qu’on est un acteur socialement responsable;
  • Un utilisateur satisfait revient plus souvent sur un site, communique sur son expérience positive et permet la diffusion du site à l’ensemble de son réseau;
  • Un SEO optimisé

C’est pourquoi aujourd’hui de plus en plus d’entreprises se mettent en ordre de marche pour prendre en compte l’accessibilité dans tous leurs processus et cela peut s’avérer compliqué quand on est une entité mondiale.

Il est nécessaire de réfléchir à une multitude de sujets quand on se penche sur la question.

1. Comment aider les filiales à se mettre en ordre de marche, les faire adhérer et mutualiser les coûts ?

Il convient de les accompagner en trouvant un partenaire tiers pour proposer des offres qui répondent aussi bien au domaine de l’éditorial, du graphisme/design et de la technique. Les 3 grands piliers essentiels de l’accessibilité.

Ce partenaire doit prévoir un dispositif composé d’experts en accessibilité avec des expériences opérationnelles connexes (développement, gestion de projet et gouvernance, UX design, conseil) qui sauront s’adapter à chaque filiale et lui proposer des conseils actionnables et priorisés.

Ce dispositif devra permettre d’avoir un budget adapté à la complexité de chaque filiale avec des métriques et un budget défini en amont, et qui reflète une capacité à mutualiser pour réduire les coûts de la filiale et du groupe in fine.

Et enfin travailler sur une feuille de route (le schéma pluriannuel d’accessibilité) pour aiguiller ces filiales qui ont des niveaux différents de connaissances et de compétences dans ce domaine.

Pour rédiger le schéma pluriannuel, il est nécessaire de définir le niveau de connaissance et d’accessibilité des filiales pour anticiper les besoins. Ce document peut donc être produit en amont ou après avoir audité plusieurs filiales pour permettre de définir ce qui doit être mis en place et dans quel ordre de priorité.

2. Comment définir une méthodologie simple et efficace pour accompagner les filiales ?

Il existe 2 types de cas que nous retrouvons le plus souvent :

  1. Soit il est nécessaire d’intervenir dès la conception du projet pour une mise en ligne future;
  2. Soit le site/app mobile de la filiale est déjà en ligne.

Dans tous les cas, il est nécessaire d’effectuer un audit complet puis la déclaration d’accessibilité. Le fait d’intervenir dès la conception permet d’éviter la partie recommandation et conseils.

De la conception … à la mise en ligne

Le site ou l’application de la filiale n’existe pas encore et la conception va débuter. Il convient d’accompagner les filiales dans 4 grandes phases en s’appuyant sur les directives du groupe (le schéma pluriannuel).

sprint0-design des interfaces
itérations de production-recette

1. Prévoir un sprint 0

Il est important de :

  • Définir le contexte et les besoins pour accompagner au mieux la filiale en amont;
  • Leur permettre d’anticiper les différents cas d’utilisation et intégrer au plus tôt la démarche d’accessibilité au sein du projet en se basant sur leur cahier des charges (et sur le référentiel RGAA 4);
  • Mettre à disposition des outils et effectuer des formations à ces outils pour tous les acteurs principaux du projet : chefs de projet, contributeurs, designers et ingénieurs.

2. Design des interfaces

Accompagner la filiale sur les interfaces et les maquettes, pour que l’accessibilité soit prise en compte par les designers : contraste de couleurs, ergonomie des formulaires, navigation explicite…etc.Prévoir la mise à disposition de guides, la validation des interfaces, les recommandations.

3. Itérations de production

Prendre en compte dès le début de la phase de développement tous les éléments permettant que l’accessibilité soit respectée.
Le respect des standards W3C et la qualité du code assurent la qualité de l’accessibilité.

Anticiper le suivi des phases de développement, les tests automatisés et les manuels ou un guide de référence qui listent les outils à utiliser et les éléments essentiels à prendre en compte.

4. Recette, Contribution et Audit

Lors de cette phase, une recette en continu est mise en place sur un échantillon de page: la page d’accueil, de contact, plan du site …et les pages pertinentes pour chaque type de service fourni et toute autre utilisation principale prévue. Suivi d’une recette aléatoire.
Ces actions permettent de vérifier la conformité du site.
Il est tout aussi important de prévoir des formations et un guide du contributeur pour assurer la maintenabilité de l’accessibilité.

Sur le chemin de la conformité

La filiale a déjà conçu et réalisé son site ou son application mobile, auquel cas il est nécessaire de prévoir de les accompagner pour effectuer un audit complet et se mettre en conformité sur les éléments qui ne le sont pas encore.

Les audits

Il est possible de faire des audits sur des sites webs, sur des applications mobiles et également sur des usines à sites.

Ce dernier est plutôt intéressant pour un groupe composé de filiales car c’est souvent sur ce type de site qu’il est possible de mutualiser le plus d’éléments. En effet, si un audit est effectué, il permettra :

  • D’obtenir une vision globale du niveau des sites déjà générés;
  • De mutualiser les critères communs à corriger;
  • D’améliorer la qualité de tous les sites à venir;
  • De communiquer auprès des filiales et de mener à bien les améliorations de manière progressive et organisée;
  • De prévoir des manuels utilisateurs pour les contributeurs avec des cas pratiques et concrets.

Dans tous les cas et quelque soit le type d’audit effectué, un rapport complet doit être généré pour permettre de définir les critères à corriger.

Le conseil de mise en accessibilité

Une fois l’audit réalisé, la filiale est accompagnée afin de l’aider à identifier et prioriser les tâches les plus importantes et tout en gardant en tête le contenu de la feuille de route groupe.

Au-delà des attendus légaux, le but est de pérenniser les efforts fournis et de définir avec la filiale les points d’amélioration et proposer des conseils pertinents tournés vers l’utilisateur/l’expérience client. Tout en étant respectueux des standards (qualité et accessibilité) et permettre d’anticiper les écueils.

La déclaration de mise en accessibilité

Le partenaire pourra ensuite aider à produire la déclaration d’accessibilité. Ce document se base sur un modèle du gouvernement qui permet d’assurer la validité de la déclaration (qui doit être présente sur le site audité) .

La rédaction de la déclaration d’accessibilité s’appuie sur l’audit préexistant.
Conformément aux attentes législatives, il doit contenir des éléments obligatoires (état de conformité, calcul du taux d’accessibilité…). Ce document est nécessaire pour être conforme à la loi.

La filiale (et le groupe) pourra bénéficier de l’expérience du partenaire pour produire la déclaration.

Le manuel

Il est le document de référence qui permet de maintenir la conformité. Il liste les bonnes pratiques à suivre pour mettre en ligne les contenus de façon accessible propre à chaque site/application. Il est adapté en fonction de la complexité et de la quantité des éléments.

On peut produire différentes sortes de manuels :

  • Les guides de référence contenant les “guidelines” pour recenser les bonnes pratiques (design/technique/éditoriaux);
  • Les manuels contributeurs propres à chaque application avec des cas pratiques et copies d’écrans avec ce qu’il doit être fait et ce qu’on ne doit pas faire;
  • Un manuel contributeur pour l’usine à site regroupant les écueils constatés lors de l’audit et comment les corriger. Celui-ci pourra être diffusé aux filiales ayant des applications créées à partir de cette usine à site.

3. Comment capitaliser sur le long terme ?

Avoir un partenaire qui gère toutes les filiales permet une vision globale sur la situation des filiales face à la mise en conformité et les difficultés rencontrées.

Il est intéressant de prévoir des formations pour accompagner tous les types d’acteurs des projets mais aussi des formations de sensibilisation pour que tous comprennent l’intérêt de l’accessibilité :

  • “qui est concerné ?”,
  • “quels en sont les enjeux ?”,
  • “quels en sont les avantages ?”

Ces formations pourront être mutualisées entre certaines filiales pour permettre d’en réduire le coût. Au fur et à mesure, il sera également possible de capitaliser sur les manuels de contribution qui pourront aussi intégrer un tronc commun sur les bonnes pratiques.
Comme pour les designers et les ingénieurs avec des “Guidelines” génériques à suivre, en plus des points spécifiques de chaque application.

L’entité peut également prévoir avec l’aide de son partenaire de mettre en place une gouvernance qui offrira une vision transverse de l’ensemble des problématiques filiales et un suivi des KPI :

  • Des données quantitatives (nombre de filiales et sites audités, nombre de certifications obtenues, évolution du nombre de certifications…) ;
  • Des informations qualitatives: principaux problèmes remontés, principales actions…

Cette gouvernance permettra de définir des leviers et les actions communes à mener pour le groupe. Il sera également intéressant de vérifier la pérennité du niveau d’accessibilité de certaines filiales en réalisant un deuxième audit “plus light” après quelques mois, pour permettre de suivre le comportement de la filiale, notamment sur la contribution, et ainsi l’accompagner sur le long terme.
Il permettra d’adresser l’accessibilité dans une optique d’amélioration continue sur le long terme (audit après audit), qui pourrait être couplée avec des outils tels que l’analytics.

4. Quels sont les pré-requis essentiels ?

  • Les filiales et l’entité doivent pouvoir s’investir dans la démarche accessibilité pour en comprendre les enjeux;
  • L’entité doit accompagner, fédérer et porter la démarche globale avec l’aide de son partenaire pour faire adhérer ses filiales;
  • La filiale doit porter la démarche auprès de ses employés et les faire former quand cela est nécessaire;
  • Les filiales et l’entité principale doivent s’assurer que le niveau d’accessibilité est maintenu après la mise en conformité. C’est souvent le plus difficile !

En synthèse

Une gouvernance claire permet d’avoir une vision globale, et ainsi mieux gérer la complexité du sujet. La gouvernance garantit l’optimisation des moyens humains et financiers puisque tout est cadré en amont et qu’une charge importante est reportée sur le partenaire.

Ce pilotage rigoureux et adapté à l’accessibilité permet d’industrialiser et de donner de la visibilité. L’entité sait à tout moment à quel niveau se situe ses filiales, comment les accompagner et mutualiser ce qui peut l’être sur le long terme.
Ainsi, elle est en mesure de trouver des solutions et moyens de capitaliser au fur et à mesure de l’avancée de la mise en conformité, pour compléter les processus déjà en place.

Un véritable plan d’accompagnement prévu avant, pendant et après permet d’assurer l’adhésion et la cohérence sur le long terme de la démarche d’accessibilité.
Les filiales se sentent accompagnées, soutenues et moins réfractaires aux changements.
Tout le monde y gagne !

Accessibilité numérique : Quels enjeux pour les entreprises en 2020 ?

Quelles sont les conséquences pour les entreprises qui ne se conforment pas à la nouvelle réglementation ? Les sanctions sont variables selon le volume de sites et dispositifs numériques existants, allant jusqu’à 20 000 € par site et par an. Cette obligation a déjà pris effet pour les sites créés après le 1er octobre 2019, […]

Lire la suite de Accessibilité numérique : Quels enjeux pour les entreprises en 2020 ?

Les experts et prestataires de l’accessibilité constatent souvent des blocages ou des ralentissement dans la prise en compte de l’accessibilité, souvent dus à des complications ressenties.

C’est le cas pour les profils non-techniques, par exemple. Tout intervenant sur un projet a son rôle à jouer dans l’accessibilité. Pour autant, tout le monde n’est pas expert accessibilité et se pencher sur la liste de 133 critères dont une majorité est technique peut être rebutant. Pour un graphiste, par exemple, il faut aller chercher au milieu de la liste les quelques-uns qui concernent la maquette graphique.

C’est en partant de ce constat que la société Atalan a lancé le projet AcceDe Web. Le projet intègre des notices pratiques par profil dont :

– La notice d’accessibilité pour la conception graphique– La notice d’accessibilité éditoriale.

Ekino est fier d’avoir pu y participer, même modestement.

D’autres notices sont annoncées : “HTML/CSS” et “Interfaces riches et JavaScript”.

Crédit photo : Dvortygirl

Une infographie pour comprendre le cadre législatif de l’accessibilité numérique en France en 2019

En cette année de textes de loi sur l’accessibilité numérique, l’équipe Accessibilité d’ekino a voulu débroussailler tout ça. Nous nous sommes dit qu’une infographie nous aiderait tous à y voir plus clair, alors la voici ! Cette infographie est pensée comme une suite de questions que vous pourriez vous poser. Pour chacune, une réponse claire […]

Lire la suite de Une infographie pour comprendre le cadre législatif de l’accessibilité numérique en France en 2019

Ce que disent les spécifications

Pour assurer la lisibilité, la couleur de texte doit être suffisamment contrastée par rapport à sa couleur de fond.

Cette limite est fixée par un ratio minimum à respecter entre les deux couleurs.

Pour plus de détails, voir :

Comment respecter ce ratio ?

Ce ratio varie en fonction des référentiels et des niveaux visés.

Voici un tableau pour vous aider à voir, d’un coup d’œil, le ratio qui vous concerne.

Pour respecter la règle… pour du texte de type…le ratio minimum est de…
Opquast Checklist1, 2 et 3Grand texte3:1
Opquast Checklist1, 2 et 3Texte courant3:1
WCAG 2.0 – AccessiwebAA / ArgentGrand texte3:1
WCAG 2.0 – AccessiwebAA / ArgentTexte courant4,5:1
WCAG 2.0 – AccessiwebAAA / OrGrand texte4,5:1
WCAG 2.0 – AccessiwebAAA / OrTexte courant7:1

Pourquoi s’occuper de contraste de couleurs

La lisibilité est un critère important de l’expérience utilisateur. Elle contribue à rendre le site utilisable et agréable.

Chaque utilisateur peut être concerné par la question du contraste :

  • un daltonien (8% de la population mondiale masculine (et 0,5% de la population mondiale féminine)) ;
  • une personne avec une mauvaise vue ;
  • un “mobinaute” avec un faible contraste sur son écran du à l’ensoleillement (32 millions de mobinautes en France) ;
  • etc.

Comment mesurer le contraste ?

Des outils permettent de connaître le ratio entre deux couleurs. Certains vous aident même à trouver une couleur approchante mais valide quand la vôtre ne respecte pas le ratio minimal.

Pour vérifier un contraste :

L'outil Colour Constrast Analyser – La validation est indiquée pour 4 niveau de validité. L’outil Colour Constrast Analyser – La validation est indiquée pour 4 niveaux de validité.

La pastille vous indique le ratio entre deux couleurs.

L’outil Contrast Ratio – La pastille vous indique le ratio entre deux couleurs.

Pour trouver une couleur :

L'outil Tanaguru Contrast-Finder

L’outil Tanaguru Contrast-Finder – Proposition de couleurs alternatives pour respecter le ratio.

Aller plus loin

Si cet article n’a pour but que de vous donner des réponses rapides à des questions pratiques, vous pourrez en apprendre plus dans l’article « Contraste de textes », par Nicolas Hoffmann (sur OpenWeb).

Infographie récapitulative

Téléchargez, imprimez, affichez et partager notre infographie récapitulative sur le contraste de couleurs de texte. Un outil pratique pour savoir en un coup d’œil quel contraste respecter.

Infographie sur les contrastes de couleurs de texte, à imprimer et partager

Remerciements et réutilisation

Je remercie Damien Berseron et Romain Emonet.

Si vous utilisez cette infographie, distribuée sous licence CC BY 3.0 FR (2), nous en serions ravis ! Vous pouvez nous le faire savoir via notre compte Twitter par exemple : @ekino_France ou via les commentaires ci-dessous.

(2) Cela signifie que vous pouvez partager et adapter ce contenu, sous réserve que vous attribuiez la source à « Ekino – http://www.ekino.fr/ » et que vous indiquiez les modifications apportées.

Meetup de sensibilisation à l’accessibilité numérique, le transcript

Mot d’accueil Delphine :Bonsoir à tous, merci d’être venus. Comme vous le savez aujourd’hui, c’est la journée mondiale de sensibilisation à l’accessibilité.Ça fait quelques années qu’on surveille la date, c’est la première fois qu’on organise un meetup à cette occasion. Il y a des goodies à l’entrée, dont une checklist concernant des petits trucs qu’on […]

Lire la suite de Meetup de sensibilisation à l’accessibilité numérique, le transcript

Situation de handicap et déficience physique

En tout premier lieu, il nous paraît important de différencier la situation de handicap de la déficience physique. Prenons un exemple simple : une personne en fauteuil roulant est en situation de handicap face à un escalier. Mais, assise devant son ordinateur pour surfer sur Internet, elle est dans la même situation qu’un valide (une personne sans déficience physique), accédant parfaitement à son outil.

Contexte d’utilisation

C’est souvent le contexte d’utilisation qui détermine si on navigue en situation de handicap ou non.

Un écran qui rend l’âme, une souris dont les piles sont épuisées, un grand beau soleil qui éclaire l’écran de notre mobile, autant de contexte qui peuvent nous mettre en situation de handicap : naviguer sans voir, naviguer au clavier, être dépendant de la qualité des contrastes de couleurs.

L’aide technique

Une aide technique, c’est un dispositif qui va palier à une déficience (physique ou autre) pour éviter une situation de handicap. Un exemple courant : les lunettes de vue sont une aide technique qui palit à une déficience physique pour éviter le flou, le trop petit.
Autre exemple : le lecteur vocal est une aide technique qui permet de naviguer sur Internet en se faisant lire les pages et en activant les liens via des touches et non des clics de souris.

Rendre accessible

En fait, toute personne qui navigue sur Internet le fait via un dispositif technique. Que ce soit un lecteur vocal, visuel (comme votre Google Chrome, Internet Explorer, Firefox, etc.) ou encore un robot d’indexation sur lequel vous compter pour donner de la visibilité à votre site, c’est toujours via une machine qu’on accède au web.

Rendre un site accessible, c’est donc rendre un site accessible à une machine – celle choisie par l’utilisateur – qui restitue alors les pages à l’utilisateur.
Or, pour que notre site soit compréhensible par les machines, les recettes sont « simples » : respecter les standards.

Standards d’accessibilité

Les standards du web sont émis par le W3C. Le but est que les différents acteurs se réfèrent à des normes communes pour éditer et restituer des pages web.
Au sein du W3C, un groupe dédié à l’accessibilité, le WAI, édite des spécifications comme, par exemple, les WCAG.

Les bénéfices

Mais du coup, si les sites sont « consommés » par des machines qui les restituent à des humains, et que ces humains sont dans des contextes toujours différents (déficience, contexte, panne temporaire, environnement, outils utilisés, etc.), toutes les machines bénéficient de l’accessibilité ? Oui. Et donc en visant l’accessibilité on vise un maximum de contextes d’utilisation ? Oui.

Notez qu’en dehors de l’audience, l’accessibilité favorise aussi l’utilisabilité, la portabilité, le SEO, l’image de marque, etc.

Rendez-vous au meetup

C’était, bien sûr, un rapide panorama d’introduction à l’accessibilité numérique. Pour en discuter plus longuement avec des experts français, nous vous donnons donc rendez-vous le 17 mai prochain, dans les locaux d’ekino, pour le meetup GAAD 2018 : Web, design et accessibilité.

Quelques liens

Autour de cette thématique, retrouvez notamment :

la vidéo de la conférence « Accessibilité numérique, mais au fait, de quoi on parle ? » ;
le diaporama de la présentation « Accessibilité et efficience” , de Gaël Poupard ;
l’infographie sur Les bénéfices de l’accessibilité de Camille Fion ;
ou encore, pour la mise en application, les notices AcceDe Web.
Photo : Rawpixel.com

Les bénéfices de l’accessibilité

L’accessibilité profite à tous les utilisateurs et acteurs du web. Son premier objectif est de rendre l’information accessible que vous soyez en situation de handicap ou non. Mais cette démarche engendre d’autres bénéfices non négligeables… N’oubliez pas : Pour bénéficier de ces gains, l’accessibilité numérique doit être intégrée le plus tôt possible et à toutes […]

Lire la suite de Les bénéfices de l’accessibilité

Si tout n’a pas été tout de suite clair, une chose est sûre, dès le début : quelle que soit l’approche – son nom, son objectif – ces concepts ramènent tous à un seul facteur : l’utilisateur.

Quand Geoffrey Dorne parle de design pour l’humanité, par exemple, il nous dit tout de suite qu’il axe sa conception sur ce qui sera utile pour l’homme. Bertrand Cochet, en présentant le service design, énonce comme premier principe de mettre l’humain au cœur du service.

Comment est-ce que cela peut se traduire ? En se mêlant à la foule, en observant l’utilisateur, en cherchant quels sont ses points de contact et ce qui les déclenche.

Or, en observant les usages, on constate, parmi une foule d’observations, une idée qui me plaît beaucoup : le hacking. Le fait que les personnes détournent un objet ou une application pour couvrir un besoin qui n’est pas couvert autrement. On trouve une foule d’exemples dans le mouvement jugaad, appelé aussi innovation frugale. Depuis l’apport de lumière via une bouteille en plastique en passant par un champ labouré avec un balai et un vélo, les points communs sont :

  • un besoin qui n’était pas couvert ;
  • et une astuce avec des objets qu’on a sous la main pour y répondre soi-même.

Car c’est bien le besoin, finalement, qui sert de gouvernail ; l’objet lui-même, son esthétique et son aura technique sont moins critiques que le service rendu. Je dis souvent que je ne peux pas me servir d’un site s’il n’est pas beau. Mais c’est faux. S’il m’est utile, n’en déplaise à mon sens esthétique, je m’en servirai.

En remettant les usages comme source et objectif à la réflexion, on crée des services qui n’existaient pas avant cette démarche, car d’autres principes prenaient le pas. Je pense ici à l’opposition entre la propriété – ma voiture, mon vélo – et le besoin – un trajet. En s’affranchissant de la propriété, on a pu voir surgir, par exemple, les véhicules citadins en “location” (Vélo’V, Vélib’, Autolib’). C’est le service qui prime ici, pas la possession.

Parfois, le besoin va même créer des nouveaux modèles économiques. La location de lieux de vacances de particulier à particulier est né du besoin d’économiser (et de gagner) de l’argent. L’échange d’appartement se pratique depuis longtemps et on a vu aussi se déployer ses déclinaisons sur Internet (couch surfing, Airbnb, etc).

On voit alors que le produit n’est plus systématiquement au cœur de la consommation. À une époque où la technologie nous permet de repousser les limites toujours plus loin – des appareils électroniques toujours plus petits par exemple, l’innovation est-elle vraiment dans ces prouesses ?

Non sans humour, Raphaël Yharrassarry questionne l’innovation et rappelle que la distance moyenne entre l’oreille et la main n’a pas changé en dix ans. Ce n’est donc pas nécessairement dans un mobile de plus en plus petit qu’est l’idée révolutionnaire qui marchera mieux que les autres.

C’est un constat que les agences marketing ont fait depuis quelques années et elles ne proposent pas un site ou un produit sans prévoir son “dispositif digital”. C’est aussi un constat que l’atelier d’Ekino fait aussi en questionnant, entre-autres, les nouveaux objets pour en trouver les usages pertinents. Le gadget seul – “l’hypertechnologie” qui permettait d’animer tout un repas de famille il y a dix ans – ne fait plus vendre s’il n’y a pas un service avec.

Si la clé du succès tient dans le service rendu à l’utilisateur, alors l’innovation ne passe peut-être que par l’observation des difficultés que rencontrent les autres. La bonne idée ne doit pas être de trouver des objets plus luxueux, plus chers, plus performants, mais bien d’aplanir les gênes et de faire disparaître les manques.

Alors, on en arrive à une quête du confort de l’utilisateur.

Or, des difficultés, on en rencontre tous au quotidien. Depuis les choses les plus insignifiantes (un lacet qui se défait toujours) aux plus contraignantes (les problèmes de transport, par exemple).

Et quelles sont les situations où l’on rencontre le plus de difficultés ? Les situations de handicap.

Alors, de là à dire que la prise en compte du handicap est une voie en or pour l’innovation, il n’y a qu’un pas que je franchis allègrement !

Photos hobvias sudoneighm et Mark Walz

L’accessibilité, un ami qui vous veut du bien

Mais en fait l’accessibilité c’est quoi ?! Dès le début de la matinée, les bases ont été posées et les mauvaises idées chassées : L’accessibilité ne concerne pas uniquement les handicapés moteurs (un amalgame qui est encore souvent fait à tort, cf. Accessibilité numérique, mais au fait de quoi on parle ?), mais toute personne […]

Lire la suite de L’accessibilité, un ami qui vous veut du bien