Bienvenue dans « Les fondements de l'UX :

L'accessibilité »
Bonjour, je suis Didier Mazier, et je vais vous accompagner dans cette formation
consacrée à l'accessibilité du Web. Lorsque l'on parle d'accessibilité, cela va bien au-
delà du seul respect des normes et des lois.

Il s'agit avant tout de proposer des

sites Web qui seront tant par la
forme que par les contenus,
accessibles aux personnes atteintes
des principaux handicaps.
L'accessibilité ne se limite pas à la
mise en page. Elle concerne tous les
aspects de l'expérience utilisateur :
Parcours, flux de lecture et surtout
interaction.

Ainsi nous verrons comment

repenser ces éléments pour les
rendre accessibles à tous et fluidifier
le parcours utilisateur en prenant en
compte les principaux handicaps
visuels, auditifs, moteurs et même
cognitifs.

Au final, en adoptant une démarche

qui intègre l'accessibilité à tous les
niveaux, vous constaterez qu'au delà
du handicap, vos sites seront
beaucoup plus efficaces pour tous !

1
 En effet, les sites conçus pour
l'accessibilité améliorent
significativement l'expérience de tous
les utilisateurs qui ont de multiples
raisons de rencontrer des problèmes
sur des dispositifs parfois mal
adaptés. Structure complexe des
pages, navigation enrichie, artifices
visuels inutiles, formulaires assistés
à repenser, parcours non prédictifs
etc. Cette formation est destinée à
tous les designers et gestionnaires
de projets Web. Vous ferrez le point sur les principes, les méthodes et les dispositifs
pour assurer une accessibilité optimale des sites. A l'issue de cette formation, vous
saurez comment accompagner la conception Web avec un processus garantissant
l’accessibilité des contenus. Je vous souhaite une excellente formation.

2
 1- Comprendre l’UX et l’accessibilité
Découvrir cette formation
Bonjour je suis Didier Nazier et
je vous souhaite la bienvenue,
dans cette formation consacrée
à l'accessibilité. L'accessibilité
ne va pas se résumer au
respect des lois en vigueur sur
ce sujet ou des règles du W3C.
Nous allons voir qu'il s'agit d'une
démarche globale qui doit être
présente à toutes les étapes du
processus de création Web.

Et dans ce cours nous allons

vous guider à travers les tenants
et les aboutissant de
l'accessibilité. Cela englobe la
totalité du sujet, depuis la
compréhension des différents
types de handicaps et des
dispositifs d'assistance qui vont y
être associés. Jusqu'aux bonnes
pratiques en termes de gestion
de contenu et des interactions.

Sur notre route nous allons examiner comment vont fonctionner les lecteurs écran et
les commandes vocales. Nous allons explorer comment améliorer la gestion des flux
et nous allons découvrir comment résoudre les problèmes qui vont être liés au
formulaire. Ensemble nous allons nous pencher sur les handicaps moteurs et nous
allons consacrer du temps à comprendre comment le contexte peut affecter nos
capacités mémorielles et cognitives. Vous allez trouver dans cette formation les
compétences qui vont vous permettre de créer des sites qui soient accessibles avec
des handicaps, et au final plus efficaces pour tous. Au travail !

3
 Définir l'accessibilité
Commençons par étudier ce qu'est réellement l'accessibilité pour bien comprendre
comment le handicap va impacter la consultation d'un site web ou d'une interface. Il y
a différents types de handicaps.

Le premier type de handicap est le

handicap auditif qui ne va pas être
forcément le plus problématique
mais qu'il faudra néanmoins
prendre en compte. Ensuite, il y a le
handicap visuel qui recouvre une
vaste palette de problèmes qui
peuvent aller depuis la cécité totale,
bien entendu, jusqu'à des difficultés
de vision comme par exemple le
daltonisme ou la myopie. Ensuite nous avons le handicap moteur où nous allons
avoir des utilisateurs qui auront des difficultés, voire qui ne pourront pas utiliser leurs
membres supérieurs, leurs mains, pour actionner par exemple un clavier ou une
souris. Et puis nous traiterons enfin des handicaps cognitifs qui sont liés à des
difficultés d'attention, de compréhension ou de mémorisation. Tout ceci va devoir
être intégré dans une perspective plus large de l'expérience utilisateur.

Prenons par exemple l’utilisation d'un périphérique comme

une imprimante. Il va falloir voir comment va fonctionner
cette imprimante à partir du chargement du papier, de
l'action que l'on va pouvoir faire sur les différents boutons
et puis aller jusqu’à son utilisation finale et y compris la
gestion de ces problèmes. L'expérience utilisateur va donc
consister à mesurer la satisfaction globale de l'utilisateur
dans les applications qu'il va pouvoir faire de nos
interfaces.

Si l'on prend le cas de

l'imprimante, cette expérience
utilisateur va démarrer avec
l'achat puis le déballage et
l’installation de la machine,
puis est-ce que cela va être
facile de la connecter à un
ordinateur ou à un réseau.
Allons-nous changer
facilement les cartouches
d'encre ? Comment vont être
gérés les fameux bourrages
papier que nous connaissons tous très bien ? Et puis, au final, quel va être la
sensation que l'on va avoir lorsque l'on aura notre produit final imprimé ?

4
 En termes d'expérience utilisateur on va
mesurer l'utilisabilité d'un produit c’est-à-
dire la facilité des interactions.

En ce qui concerne l'accessibilité, il va

falloir mesurer la même facilité des
interactions mais pour des personnes
handicapées atteintes des handicaps
que nous avons évoqués
précédemment. Beaucoup de gens
considèrent l'accessibilité comme
quelque chose qui va être réservée aux
développeurs Web, d'autres voudraient bien que l'accessibilité consiste juste à suivre
un ensemble de règles en tant que concepteur, de développeur ou de créateur de
contenu. Mais en réalité quand un problème d'utilisabilité va se présenter dans un
site. Il va toucher tout le monde et aura tendance à affecter les personnes
handicapées de façon beaucoup plus importante. Ce qui va ralentir une personne
avec une vision normale trois secondes sur une interaction de trente secondes va
ralentir une personne aveugle pendant deux ou trois minutes et amener la totalité de
l’interaction à cinq bonnes minutes. Ces types de problèmes vont donc être des
problèmes d'accessibilité car ça va signifier que des personnes handicapées vont
être empêchées de réaliser les tâches qu'ils essayent d'accomplir. Nous allons donc
voir comment créer des interfaces utilisateur qui intègrent les handicaps et qui
permettent aux personnes handicapées de réaliser toutes les tâches qu'elles vont
pouvoir accomplir sur le site Web.

Aborder l'aspect légal

Le législateur c'est à juste
titre, intéressé à la question
de l'accessibilité numérique.
Une première loi en 2005,
puis un décret en 2009,
fixent un cadre général en
particulier pour ce qui est de
la soumission à des appels
d'offres officiels. Cette loi sur
l'égalité des droits et des
chances, la participation et la citoyenneté des personnes handicapées, va créer un
référentiel d'accessibilité des services de communications publiques en ligne. Et
rendre obligatoire, l'accessibilité des services de communications publiques en ligne
aux personnes handicapées. Tous les services publiques sont concernés :
Ministères, collectivités locales, agences et cætera... Un nombre croissant d'entre
eux, tient compte de cette nouvelle obligation dans les dossiers d'appel d'offre, mais
parfois le volet d'accessibilité des cahiers des charges est encore souvent trop
sommaire, car les acheteurs ne peuvent pas forcément s'appuyer sur des
recommandations officiellement reconnues La vérification de l'accessibilité doit se

5
faire en cour de projet, au moment ou les différentes composantes du futur sites
internet vont être présentées au client pour validation. L'accessibilité du site ne
dépend, de plus, pas uniquement du prestataire mais aussi des contenus que va
publier l'équipe éditoriale.

Le ministère de l'économie et
des finances a émis un certain
nombre de recommandations,
avec plusieurs objectifs.
Premièrement, permettre à
l'acheteur de s'assurer que les
propositions qu'il va recevoir vont
comporter des objectifs précis en
matière d'accessibilité et
vérifiables, bien entendu, en cour
de projet. Ensuite de pouvoir informer les candidats à l'appel d'offre pour lesquels
cette matière est parfois nouvelle, sur l'effort de mise à niveau qu’ils vont avoir à
mettre en œuvre pour pouvoir conserver leurs chances d'être retenus soit en formant
des collaborateurs, soit en s'adjoignant une expertise extérieure. Et puis, de servir
aux deux parties durant l’exécution contractuelle du marché. Toutes les agences
Web qui concourent à des marchés publics ont donc aujourd'hui intérêt à inclure
dans leur offre, une prise en compte précise de l'accessibilité. Ces recommandations
sont le résultat d'une réflexion qui a été menée par un groupe de travail créé au sein
du service des achats de l'état, et elles ont bien entendu vocation à évoluer, à être
enrichie.

Mais il est surtout

recommandé aujourd'hui la
rédaction par le maître
d'ouvrage, d’un volet
accessibilité qui va
prescrire des engagements
pour éviter à ce maître
d'ouvrage de se retrouver
devant des offres qui vont
évoquer l'accessibilité de
façon trop générale, et puis
pour lui permettre de
comparer réellement les capacités des candidats. Alors, outre ces rappels à la loi, le
cahier des charges va indiquer que les prestataires devront répondre sur la garantie
de l'accessibilité sur tous les livrables que vous voyez s'afficher sur cet écran. Ce
sont des engagements qui vont devoir être très clairement définis entre les deux
parties.

Comprendre les enjeux de l'accessibilité

L'accessibilité est souvent considérée comme une exigence juridique ou technique et
bien entendu c'est logique. Dans de nombreux pays comme par exemple en France,
Il existe des lois qui sont censés assurer l'accessibilité. Nous allons aller plus loin et
voir quelles sont les bonnes pratiques pour la conception d'interfaces qui intègrent
l'accessibilité aux handicapés.

6
 Effectivement, les lois ne
suffisent pas. Alors, le
W3C qui est le consortium
qui gère le web, le World
Wide Web Consortium, a
mis en place tout un
ensemble de lignes
directrices qui sont citées
comme étant la norme
pour l'accessibilité. Et puis
il y a bien entendu
d'autres lois mais l'accessibilité ça va plus loin que ça, c'est la facilité d'utilisation
pour les personnes handicapées. Donc un site qui va répondre aux normes et aux
lois, cela ne signifie pas forcément qu'il va être facile à utiliser avec un handicap.
Voyons quelques exemples à prendre en compte.

Par exemple ici, nous sommes sur une

carte de localisation d'un certain nombre
d'établissements et nous allons pouvoir
avec une souris nous déplacer
extrêmement facilement à l'intérieur de
cette carte. Et bien ce ne sera pas
forcément du tout la même chose pour
quelqu'un qui a un handicap et qui va se
déplacer par exemple avec le clavier.
Avec le clavier, vous voyez qu'il se
déplace ici, en haut à gauche puis sur
certains liens mais il ne va pas forcément
arriver sur les boutons qui vont se trouver
en bas à droite, le plus et le moins, pour
changer le niveau de zoom. Il va donc
falloir mettre en place des interfaces qui prennent en compte les handicaps dans
toutes les fonctionnalités que nous allons mettre en place.

Nous avons un autre exemple qui est lié à

l'utilisation de la couleur. La couleur ici est
utilisée pour indiquer à quel endroit du site nous
nous trouvons. Nous sommes dans la partie
Galaxies, elle est indiquée dans une couleur qui
est différente des autres liens. Mais quelqu'un
qui ne va pas la voir, ne va pas recevoir cette
indication. Il va donc devoir la recevoir d'une
autre manière. Il va falloir être redondant dans la
façon dont nous allons communiquer cette
information de l'endroit où l'on se trouve sur le
site. Et ici, on le fait par exemple avec le fil
d'Ariane et on le fait également avec le titre des contenus. On pourrait indiquer avec
autre chose de visuel qui ne serait pas forcément lié à la couleur que nous nous
trouvons à cet endroit, au niveau de notre barre de navigation. Cela pourrait être une
flèche, un point... Mais cela ne serait pas ici forcément une priorité.

7
 Sur cette page, nous avons une
vidéo. Nous remercions l'agence
européenne ESA qui met en ligne
gratuitement les vidéos concernant
l'exploration de Hubble. Vous allez
pouvoir éventuellement consulter
ces vidéos ainsi que les images
que vous retrouverez sur ce site.
Nous avons donc ici une vidéo qui
va se lire automatiquement. Or, la
plupart du temps, on recommande
de ne pas mettre en place des
vidéos qui vont être lues
automatiquement sur les sites
parce que l'on estime que cela peut
être nuisible à la navigation. Il faut
se poser effectivement la question de savoir dans le cas d'un handicap, s'il n'est pas
préférable de mettre en place une vidéo qui va être lue automatiquement. On va
ainsi éviter à quelqu'un qui va avoir des problèmes pour déclencher la lecture de
cette vidéo d'avoir à le faire et il pourra lire la vidéo automatiquement. Alors, cela
peut surprendre mais vous voyez qu'ici, la lecture automatique peut a contrario de ce
qui est généralement admis être une chose qui soit souhaitable. On se rend donc
compte ici que ce qui est bon pour un groupe d'utilisateurs pourrait être à l'exact
opposé de ce dont va avoir besoin un autre groupe d'utilisateurs.

Donc, la seule mise en conformité de nos sites avec les règles et les normes n'est
pas suffisante pour savoir si oui ou non, une personne avec une certaine déficience
peut utiliser la solution que nous avons construite pour elle. Le contexte va vraiment
importer. L'accessibilité ne peut pas être uniquement calée sur la conformité. Elle
doit être intégrée dans l'expérience utilisateur et c'est là que notre travail va entrer en
jeu.

Intégrer l'accessibilité dans le processus de création

L'expérience utilisateur est aujourd'hui un domaine qui s'est élargi et qui va impliquer
un nombre de différents types de professionnels : des stratèges de contenu, des
architectes de l'information, des ergonomes, des concepteurs, des développeurs,
etc... Bien entendu, les configurations peuvent varier mais l'important est de
comprendre quels vont être les acteurs concernés et, surtout, en quoi ils vont être
responsables de l'accessibilité, chacun à son niveau.

8
 L'équipe qui va
effectuer des
recherches sur
l'expérience utilisateur
en amont de la
création du site va
s'assurer que les
personnes
handicapées vont bien
être intégrées au
panel de recherche. Elle va également devoir intégrer des profils de handicaps
différents à toutes les phases de la recherche.

Le stratège de contenu
ou le gestionnaire de
contenu ou le
responsable de contenu
va devoir travailler avec
les personnes
handicapées afin de
savoir comment ils vont
aborder un problème
particulier parce que
cela va affecter le
contenu que l'on va mettre en place pour qu'il puisse répondre aux besoins de ces
personnes handicapées.

L'architecte de
l'information va
déterminer quelles vont
être les appellations et la
terminologie qui vont
être utilisées dans un
domaine particulier et,
bien entendu, ils vont
vérifier si les personnes
qui ont des handicaps
disposent d'une terminologie spécifique sur des sujets donnés.

Le designer d'interaction
va créer ce que l'on
appelle des wireframes,
c'est-à-dire les maquettes
filaires, qui vont servir à
établir la structure du site.
Il va également définir les
flux de tâches et puis les
parcours utilisateurs et il
va devoir également
créer tous les prototypes
du site qui vont ensuite

9
être utilisés pour différentes phases notamment les phases de test. Il va donc falloir
qu'il précise les flux et l'ordre logique du code source qui sera ensuite utilisé et ceci
en fonction des différents handicaps qui devront être intégrés dans l'accessibilité.

Le designer UI-UX, User Interface

User eXperience, Interface
utilisateur expérience utilisateur va
lui travailler en amont des
développeurs. Il va être un
spécialiste de l'assurance qualité
parce que c'est lui qui va, au final,
concevoir quelles vont être les
interfaces et quels vont être les
dispositifs. Et il va falloir qu'il
s'assure que le code source qui va être développé en aval intègre bien tout ce qui a
été défini en termes de critères d'accessibilité.

Au final on peut dire que c'est le designer UI-UX qui va donner le ton dès le départ et
qui va ensuite tracer la voie du succès pour ce qui est de l'accessibilité de l'interface
qui sera produite.

2- Comprendre les handicaps

Aborder le handicap
L'accessibilité est quelque chose qui peut vous paraître abstraite voire difficile à
comprendre sauf bien entendu si vous interagissez quotidiennement avec quelqu'un
qui a un handicap. Donc c'est quelque chose qu'on a parfois du mal à comprendre.
Voyons comment va pouvoir être mis en place une accessibilité au quotidien.
Commençons par voir quelques commentaires utilisateurs.

Premièrement on entend : «
Habituellement, je ne passe
pas par la navigation d'un
site. Je préfère utiliser
Google pour obtenir la page
que je veux, car c'est
beaucoup plus facile que
d'essayer de trier tous les
menus avec mon clavier. »
Nous avons ici quelqu'un qui
en fonction de son handicap
n'arrive pas à s'y retrouver
sur un site car la navigation est trop complexe et il préfère utiliser Google pour arriver
directement sur le contenu dont il a besoin.

10
 Un autre va dire : « Je suis
frustré parce que tout ce que je
veux faire, c'est cliquer sur le
bon lien mais je ne peux pas,
alors je pars. J'achète mes
cadeaux sur un autre site où je
peux cliquer sur les liens. »
Nous avons ici un problème qui
est très clairement encore une
fois liée à la navigation et
l'utilisateur ne peut simplement
pas accéder aux liens.

Un troisième peut nous dire : «

J'ai rempli un formulaire et j'y ai
passé beaucoup de temps, puis
je l'ai soumis, je l'ai envoyé et ce
que j'ai obtenu c'est une énorme
page avec plein de mots en
rouge et je ne savais pas quoi
faire. Je voulais juste enregistrer
mon appareil pour pouvoir
obtenir une garantie. » Nous
avons ici quelqu'un qui dans la
gestion d'un formulaire a commis un certain nombre d'erreurs au niveau de la saisie
et est arrivé sur une page d'explication de ses erreurs qui était beaucoup trop
complexe en fonction de son handicap.

Une dernière personne peut dire :

« J'essaie de comprendre quels
bus sont accessibles et quelles
sont les lignes de bus qui ont des
porte-vélos pour mon fils. Mais je
ne peux pas arriver à faire la
différence entre ces icônes. »
Nous avons ici un problème qui
est très clairement lié au visuel.

Dans tous ces cas, on

se rend compte que
ces personnes qui
étaient handicapées
avait des besoins qui
étaient des besoins
fonctionnels et si on
va au fond des
choses les personnes
avec un handicap ont

11
exactement les mêmes objectifs que vous et moi.

Au final, ils veulent réaliser les mêmes tâches. Ils veulent réaliser les mêmes
opérations, acheter un produit, remplir un formulaire, accéder à du contenu. Et donc
ils vont pouvoir être identifiés par les mêmes personas, c'est à dire les mêmes profils
qui vont identifier la motivation, les besoins et les objectifs de vos utilisateurs sauf
qu'ils vont avoir des besoins spécifiques qui vont être liés à leurs handicaps. Il va
donc falloir que vous preniez les profils existants, les personas existants que vous
avez créés et que vous intégriez à ceci les besoins fonctionnels des personnes
handicapées. Il ne s'agit pas de créer des profils distincts. Nous avons déjà nos
personas pour les projets qui vont identifier cette motivation, les besoins et les
objectifs. On va simplement ajouter les fonctionnalités pour des personnes qui ont un
handicap en plus. C'est aussi simple que cela. Dans les vidéos suivantes nous
examinerons quelles vont être les implications des principaux types de handicap afin
que vous puissiez comprendre comment intégrer la gestion de ces handicaps dans
vos dispositifs.

Comprendre les handicaps visuels

Utiliser un ordinateur, une tablette ou un smart phone sans être en mesure de
pouvoir voir l'écran doit vous sembler un véritable défi et croyez-moi cela en est un.
Alors vous avez certainement déjà vu quelques-uns des outils que les gens avec une
déficience visuelle utilisent. Ce sont pour la plupart des lecteurs d'écran ou des
agrandisseurs d'écran. Pour pouvoir utiliser ces outils de façon efficace, les
personnes qui présentent une déficience visuelle ont plusieurs besoins fonctionnels
que nous allons maintenant examiner ensemble.

La première chose dont une

personne aveugle va avoir besoin
pour pouvoir utiliser son lecteur
d'écran c'est de savoir
exactement quels vont être les
objets. Tout d'abord, il va falloir
savoir quel est cet objet. Ensuite,
il va falloir pouvoir savoir quel est
son nom. Et surtout, il va falloir
savoir à quoi cet objet va servir.

On va satisfaire ce
besoin fonctionnel
par ce qu'on appelle
de « l'accessibilité
programmatique »,
c'est à dire que la
majeure partie du
travail va être
obtenue par les
développeurs qui
vont utiliser des objets simples dans leur travail : liens, champs de formulaire,
boutons, titres, listes et puis un certain nombre de morceaux de code qui vont être
compris par les lecteurs d'écran. Un lecteur d'écran comprend ce qu'est un lien, un

12
bouton, un curseur en fonction de la façon dont ces éléments ont été codés. En tant
que concepteur d'interfaces utilisateurs vous ne devez pas forcément tout savoir sur
ce sujet mais vous devez être conscient du fait que le travail devra être fait au niveau
du code par les équipes de développement pour apporter une satisfaction au lecteur
d'écran. Puis, un utilisateur qui est aveugle ne peut pas voir l'écran et s'il ne peut pas
voir l'écran il ne peut pas savoir où le curseur qui est lié à la souris va se trouver.
Alors comment va-t-il faire ?

Et bien il va se déplacer sur l'écran,

cliquer sur les liens, envoyer des
formulaires et naviguer uniquement à
l'aide du clavier.

On a là, un autre besoin fonctionnel

fondamental qui est de créer des
interfaces qui vont très bien fonctionner
avec uniquement le clavier. On va
devoir inclure ce besoin dans tous les
profils et personas que vous allez créer
pour vos projets. Il ne faut pas que ce
soit un profil spécifique du type Jean-
Jacques utilisateur de lecteur d'écran.
Cela peut être tout à fait le même Jean
Jacques statisticien que vous avez déjà
créé en tant que profil et sur lequel
vous allez ajouter ce besoin fonctionnel qui est un besoin d'accès au clavier efficace.
Et là, vous aurez fait un très grand pas pour pouvoir assurer l'accessibilité de votre
site parce que dites-vous bien que l'utilisateur de lecteur écran fait tout avec le
clavier.

Et puis sur le web, nous sommes

dans un univers qui est un univers
visuel. Nous avons ici un graphique,
nous avons une barre de progression
et il va falloir à un moment donné que
l'on puisse prévoir une représentation
textuelle alternative de tout ce qui va
être visuel à l'écran. On peut donc
dire que l'alternatif texte est
également un « must » en ce qui
concerne l'accessibilité.

13
 Enfin, les personnes qui viennent sur
votre site et qui utilisent un
agrandisseur d'écran vont le voir de
façon partielle. Vous pouvez refermer
votre poing et faire comme quand vous
étiez enfant une longue vue et vous
allez pouvoir regarder cet écran et vous
voyez que vous n'en voyez qu'une
partie avec un déplacement qui ne va
pas être toujours facile. Si les appels à
l'action ne sont pas correctement
placés et bien les personnes qui
utilisent un agrandisseur d'écran auront
du mal à les trouver. Il y a donc un
autre besoin fonctionnel très important qui est de bien placer ces appels à l'action,
c'est à dire tous les boutons qui vont enclencher une interaction entre l'utilisateur et
votre site.

Le dernier des besoins fonctionnels va de soi d'une certaine manière parce que les
personnes qui ont une vision basse vont avoir besoin de flexibilité dans les interfaces
Ils vont devoir pouvoir augmenter la taille des caractères, réarranger éventuellement
la disposition des formulaires de manière qu'ils soient bien verticaux, de manière à
ce qu'ils puissent voir toutes les informations présentées. En général les sites dits
responsifs répondent à cette flexibilité mais vous devez de toute façon inclure cette
flexibilité dans vos personas. Tout ce travail que vous allez faire ne va pas servir
uniquement aux personnes handicapées. La conception pour les personnes qui ont
une basse vision va également régler les mêmes problèmes des personnes qui vont
utiliser un téléphone mobile ou une tablette, c'est à dire des écrans qui sont
beaucoup plus petits. Ce qui va fonctionner pour une personne avec une certaine
déficience visuelle va également très bien fonctionner pour quelqu'un qui va
consulter votre interface sur un petit écran.

Comprendre les handicaps auditifs

Avec un handicap auditif,
un utilisateur qui va
accéder à des contenus
de type audio va
effectivement ne pas
pouvoir entendre ce que
nous avons à lui dire et
nous allons mettre en
place des dispositifs de
sous-titres. Mais, ces
dispositifs de sous-titres
ne suffisent pas. Ils sont
extrêmement utiles lors
de la lecture de la vidéo mais quelque part, il y a un autre besoin fonctionnel qui va
être beaucoup plus important car une personne qui est sourde ou malentendante a
besoin bien entendu d'avoir une représentation textuelle de toutes les choses qui
vont être contenues dans la vidéo. Mais, nous devons aller plus loin et penser au fait

14
qu'elle va pouvoir revenir sur cette vidéo ou qu'elle va avoir besoin d'une vision
globale sur cette vidéo et auquel cas nous devrons fournir ce que l'on appelle une
transcription, c'est à dire un texte complet du contenu audio qui se trouve à l'intérieur
de cette vidéo ou de ce podcast. Il s'agit d'un besoin fonctionnel qui est extrêmement
important à satisfaire car avec une transcription la personne va pouvoir accéder à
tout le contenu sans être limité par le temps de regarder toute la vidéo. Ils vont
pouvoir parcourir rapidement le contenu de la transcription pour savoir d'une part, si
oui ou non la vidéo va permettre de résoudre leur problème et puis également
d'accéder rapidement à des fractions de contenu qui les intéressent plus
particulièrement. Ils vont donc pouvoir lire la transcription plus rapidement que de
regarder les sous-titres de la vidéo en temps réel. C'est un besoin fonctionnel de
flexibilité qui est utile non seulement pour les gens sourds ou les malentendants mais
en fait si on regarde bien les choses il est utile pour tout le monde. C'est donc une
très bonne pratique de toujours prévoir une transcription pour tous les contenus qui
contiennent des éléments audios.

Comprendre les handicaps moteurs

Les handicaps moteurs vont être variés mais tous vont avoir besoin du clavier et
nous allons voir qu'ils n'ont pas besoin que du clavier mais d'autres dispositifs. Alors
les besoins fonctionnels, bien entendu, vont varier en fonction des handicaps
moteurs.

Cependant tous, à un
moment donné vont avoir
besoin du clavier ou d'une
représentation du clavier.

Si vous
vous rendez
sur des
sites de
fabrication
et de
distribution
de matériel
pour
handicapés,
vous allez voir un certain nombre de dispositifs variés qui vont permettre à des gens
de pouvoir intervenir sans l'usage, par exemple, de leurs membres supérieurs où ils
vont pouvoir cliquer d'une certaine manière sur chacune des touches du clavier ou
d'un clavier spécifique, de manière à pouvoir enclencher un certain nombre d'actions.

15
 Et dans certains cas, ils
ne vont même pas
pouvoir utiliser ces
dispositifs. Et dans ce
cas-là, ils vont avoir
besoin d'utiliser à la fois
de la reconnaissance et
des commandes vocales.
C'est-à-dire qu'ils vont
pouvoir vocaliser ce qu'ils
veulent que l'ordinateur fasse que la souris se déplace sur telle ou telle zone de
l'écran, par exemple. Il va donc falloir que tous les appels à l'action offrent des
alternatives texte pour être reconnus vocalement et également que l'on puisse voir
ces appels à l'action. Alors il est bien entendu qu'il y a des handicaps moteurs qui
sont combinés avec des déficits de vision mais dans le cas d'handicaps moteurs qui
ne sont pas combinés avec des déficits visuels, la personne handicapée va pouvoir
voir ce qui se passe à l'écran mais elle va avoir besoin d'interagir avec l'écran sans
les mains donc spécifiquement à la voix. Que celle-ci voit ou non l'écran, il va falloir
que tout soit visible.

Ici, nous sommes sur un diaporama et

vous voyez que nous avons un bouton
qui va vers l'avant et puis un bouton
qui va vers l'arrière. Ces boutons ne
sont pas ici, visibles par défaut et bien
elle ne peut pas les voir et la personne
qui présente un handicap moteur ne
va pas forcément pouvoir déplacer le
curseur de la souris à la voix pour
arriver sur un bouton ou sur un appel
à l'action qu'elle ne peut pas voir.

Il va donc bien falloir intégrer ces trois besoins fonctionnels qui sont :

1) d'avoir un accès au clavier

2) qu'il y ait des appels à l'action qui soient représentés avec des alternatives texte

3) et puis ensuite que tous les appels à l'action soient toujours visibles.

16
 Définir les handicaps cognitifs
Lorsque l'on s'attaque aux problèmes cognitifs, il s'agit en fait d'une zone qui est
assez peu comprise en termes d'accessibilité. Ce sont des problèmes qui sont assez
variés et qui sont parfois difficiles à résoudre. Beaucoup de concepteurs ne
comprennent pas également comment prendre en compte ces problèmes. Il faut bien
se dire que nous sommes tous concernés par des problèmes cognitifs.

Les problèmes cognitifs sont des

problèmes qui sont liés à des
fonctions cérébrales telle que la
mémoire, la résolution de
problèmes mais également la
tension et la concentration,
l'alphabétisation et la lecture et puis
la compréhension visuelle ou la
compréhension verbale. Alors
certaines de ces questions n'ont
pas forcément quelque chose à voir
avec un handicap. Ils peuvent être simplement lié au fait, par exemple, que quelqu'un
va accéder à un contenu dans une langue qui n'est pas la sienne ou simplement qu'il
est placé dans un contexte où il va avoir des problèmes d'attention et de
concentration. Alors il y a des choses que l'on va pouvoir arriver à faire pour non pas
éliminer ces problèmes mais pour trouver des solutions.

Nous allons devoir

concevoir pour l'oubli.
Combien de fois nous
sommes-nous
retrouvés sur une page
d'un formulaire en
ayant oublié ce qui
était sur la page
précédente. Vous
voyez, qu'il y a des
réglages à faire en
termes d'interface de manière à concevoir spécifiquement pour un oubli qui peut être
un oubli immédiat. Ensuite, il va falloir écrire dans un langage qui est un langage
simple. Nous allons utiliser le langage le plus simple possible pour expliquer les
choses. Nous n'allons pas utiliser de jargon et si nous utilisons des sigles ou des
acronymes et bien nous les fournirons sous leur forme longue totalement explicite. Et
puis surtout, il va falloir assurer la prédictibilité de notre interface. Cela semble
évident mais il faut à tout moment que les gens en particulier ceux qui ont des
problèmes cognitifs puissent savoir où ils se trouvent et ce qui va se passer lorsqu'ils
vont cliquer sur tel ou tel bouton d'appel à l'action. il va falloir que les gens sachent
combien d'étapes le processus va comprendre, à quelle étape ils sont, combien
d'étapes il leur reste à effectuer pour arriver par exemple à une transaction. On doit
pouvoir leur dire à l'avance si quelque chose d'inattendu va se produire, par exemple
lorsque des liens vont s'ouvrir dans des nouveaux onglets ou dans des nouvelles
fenêtres. Tous ces besoins sont des besoins qui peuvent être permanents chez
certaines personnes qui ont de réels handicaps cognitifs mais ils nous affectent tous.

17
Par exemple, nous sommes en vacances dans un autre pays et nous allons accéder
à un site dans une autre langue, ou nous n'allons pas être attentifs parce que nos
enfants sont en train de jouer dans la pièce, ou nous sommes dans un endroit qui va
être particulièrement bruyant. Donc, en axant nos conceptions sur ces problèmes
fonctionnels comme par exemple la mémoire, l'alphabétisation et l'attention, nous
allons créer des sites qui vont au final être beaucoup mieux pour tout le monde.

Déterminer les handicaps liés à l'âge

Au fur et à mesure que nous vieillissons, nos capacités vont changer et en particulier
diminuer. Si nous avons de la chance nous n'allons pas être touchés trop rapidement
par un changement de notre vision, de notre ouïe, de notre mobilité et autres
capacités. Mais de toute façon, on sait qu'une personne sur cinq va développer un
certain type de handicaps au cours de la vie. La population vieillit et les baby-
boomers s'approchent maintenant de la retraite ou sont carrément à la retraite. Ils ont
de bons revenus qui sont disponibles. Ils vont donc constituer un groupe
démographique qui va être conséquent en termes de population. C'est le marché
lucratif des seniors. Et quelque part leur vision, leur ouïe, leur mémoire et leur
coordination vont être en constante évolution. Il va donc falloir prendre ceci en
compte et proposer une accessibilité qui même si elle ne s'adresse pas à des
handicaps sévères, va prendre en compte une diminution des capacités.

Les facultés sensorielles vont baisser

avec l'âge. Personnellement je n'arrive
pas à lire, sans mes lunettes et sans
m'approcher très près de cet emballage,
les différentes instructions et les
différentes indications qui sont
mentionnées. Donc tout ce que nous
avons vu précédemment en termes de
gestion des différents handicaps est
crucial pour l'accessibilité, non seulement
si nous nous plaçons, ici et maintenant,
mais également si nous nous plaçons par
rapport à un avenir proche et peut-être
même par rapport à notre proche avenir. Il
faut donc mettre en place des interfaces accessibles à la fois pour les personnes qui
présentent des handicaps lourds mais également qui soient pensés pour le marché
des seniors. C'est à dire avec une simplification et un accès plus immédiat au
contenu.

18
 3- Mettre en place des dispositifs de lecture
Utiliser la reconnaissance vocale
Si vous avez un smartphone moderne, vous avez déjà probablement dans la poche
un dispositif de reconnaissance vocale. Avec un iPhone, il y a un système de
contrôle vocal du téléphone. Il s'agit donc avec le système de reconnaissance vocale
de pouvoir dicter des actions au périphérique sur lequel on va consulter un site web.

Le principe de base est

donc de proposer un
mode mains-libres où on
va pouvoir dicter soit
pour écrire des
documents, rédiger des
emails, ou remplir par
exemple des
formulaires.

Mais on va également
pouvoir prendre le
contrôle et commander
son ordinateur, par
exemple en déplaçant
des fichiers, en
actionnant des menus ou
en naviguant, voire en
cliquant sur des boutons
qui sont proposés par
l'interface.

Il existe des logiciels sur les différents

systèmes qui permettent de pouvoir
utiliser la reconnaissance vocale. Par
exemple sur Mac, on peut travailler
avec Dictée et puis Voice Over. On va
pouvoir également sur Mac/PC
travailler avec Dragon Dictation qui
vont offrir des possibilités de prise de
contrôle des ordinateurs.

19
 Pour que vous vous fassiez une idée,
nous allons voir comment tout cela va
fonctionner. Nous sommes ici sur Mac et
nous allons pouvoir, avec l'utilitaire
Dictée activée au niveau des paramètres
d'accessibilité, envoyer un certain
nombre de commandes. Nous allons
donc pouvoir entrer un certain nombre de
commandes vocales, en exprimant
d'abord une phrase qui va permettre de
faire comprendre à l'ordinateur qu'il s'agit
d'une commande vocale, en l'occurrence
ici, le terme est vocal. « Vocal faire défiler
vers le bas. » « Vocal faire défiler vers le
haut. » Vous voyez que rien qu'avec ma
voix, j'arrive à faire défiler vers le bas et vers le haut.

Voyons maintenant une autre

possibilité avec ici par exemple un
formulaire. « Vocal aller au champ
suivant. » Vous voyez je suis entré
dans le champ. « Vocal démarrer la
dictée. » « Victory. » « Arrêter la
dictée. » Vous voyez qu'avec des
commandes vocales on va pouvoir
ici, alors ce n'est pas forcément
facile, ça ne marche pas à tous les
coups mais on va pouvoir prendre
une commande complète de
l'ordinateur et se déplacer sur le site.
Il va falloir lorsque nous allons créer une interface qu'elle puisse fonctionner avec ce
système de reconnaissance vocale. Nous sommes ici maintenant sur ce formulaire
avec Dragon Dictation et nous allons lancer quelques indications à la souris pour la
déplacer et éventuellement effectuer une action. Nous allons donc pour cela
employer les commandes qui sont prévues par l'applicatif : « souris en bas, » « plus
vite, » « bien plus vite, » « stop, » « souris en haut, » « plus vite, » « stop, » « souris
clic. » Vous voyez que ce n'est pas forcément très facile. Ces logiciels demandent à
être soigneusement réglés. Il faut enregistrer la voix de l'utilisateur pour que
l'applicatif la reconnaisse. Et puis ensuite, il va falloir mentaliser toutes les
commandes.

On est donc sur des systèmes qui sont des systèmes qui vont demander à
l'utilisateur qui dispose d'un handicap moteur d'être extrêmement patient. Nous
devrons donc, lui faciliter la tâche de manière que cette reconnaissance vocale soit la
plus simple et la plus facile possible en termes d'interface. Vous voyez que ce n'est
pas évident de se déplacer et d'effectuer un simple clic.

20
 Avec Dragon Dictation, il y a une
autre manière de pouvoir
déplacer le curseur de la souris
dans la page et d'actionner des
commandes en déterminant des
zones de la page dans lesquelles
on va entrer et qui vont se réduire
successivement. Voyons
comment cela fonctionne. «
damier souris. » Vous voyez que
nous avons neuf zones et si par
exemple je veux aller cliquer sur Planètes ou sur Galaxies, le problème c'est que je
suis ici à cheval sur deux zones mais on va pouvoir le régler en affinant. « 5 » « 1 » «
2 » Et maintenant je vais pouvoir cliquer si je le souhaite. Vous voyez que le curseur
de ma souris se trouve bien sur Galaxies. Nous allons annuler « annuler. » Cela peut
vous paraître compliqué mais il faut comprendre qu'une personne handicapée va
utiliser ce type de dispositif au quotidien et va fonctionner aussi facilement que vous
le faîtes avec une souris, à condition que vous ayez des éléments qui soient
positionnés correctement sur la page. En privilégiant des maquettes qui vont être le
plus linéaire possible, vous allez faciliter les déplacements et les interactions.

Découvrir les logiciels agrandisseurs d'écran

Parmi nos utilisateurs certaines personnes vont avoir une vision assez faible et vont
donc avoir besoin d'agrandir pour mieux voir l'écran. Ils ne sont pas complètement
aveugles mais ils ont besoin d'agrandir l'écran pour pouvoir lire. Alors, bien entendu,
il va s'agir ici de traiter essentiellement les effets d'une vision partielle de l'écran. Les
logiciels de grossissement sont intégrés dans la plupart des systèmes d'exploitation,
actuellement. Il y a aussi des logiciels spécifiques.

Nous allons donc voir comment ça

fonctionne et puis surtout ce que nous
allons devoir, nous, mettre en place pour
que les gens qui utilisent ces dispositifs
d'agrandissement d'écran puissent avoir
accès à ce que nous voulons qu'ils
fassent. Nous sommes ici sur un
formulaire où il va s'agir simplement de
saisir un nom, un prénom, une adresse
email, un petit message, cocher un bouton
radio et puis envoyer le formulaire. Nous,
nous le voyons sous cette forme mais
voyons comment quelqu'un qui va agrandir
l'écran va le voir. Et vous voyez que la vision est forcément parcellaire. Alors ici, on a
un écran qui est déjà assez grand mais vous voyez que, déjà, la partie prénom n'est
pas forcément vue dès le départ. Alors les gens peuvent très bien défiler vers le bas,
avec le nom, l'adresse électronique, le message. Ils vont zapper forcément le
prénom. Si celui-ci était requis, il va falloir qu'ils ressaisissent ce nom parce qu'ils
vont avoir un message d'erreur, etc... Et là le bouton, il va falloir qu'ils aillent le
chercher, il se trouve en bas à droite. Donc cela va impliquer des positions
spécifiques pour nos call to action. Et puis, lorsque l'on va se trouver sur un site web,

21
vous voyez qu'ici on est sur un site web, et bien on a une colonne de gauche à
laquelle on est tout à fait à même d'accéder mais tout ce qui va se passer à droite, et
bien quelque chose peut être zappé. Donc un système avec trois colonnes comme
on l'utilise assez fréquemment, c'est quelque chose qui va poser un certain nombre
de problèmes. Tous les systèmes de zoom ne fonctionnent pas de la même façon. Il
y a par exemple des systèmes qui sont en fait des systèmes de loupe où on va
pouvoir se déplacer sur un site web mais il va falloir en tout état de cause que nous
fassions des tests, non seulement avec ces systèmes de loupe mais également avec
des systèmes d'agrandissement qui peuvent aller jusqu'à dix fois la taille réelle de ce
que nous avons à proposer. Il ne s'agit donc pas uniquement de vérifier ce qui se
passe lorsque la personne agrandit la taille des caractères avec la touche habituelle
qui est ctrl + ctrl -, sur la plupart des navigateurs mais de bien tester ce qui va se
passer lorsque l'on utilisera un agrandisseur d'écran. Les conséquences vont être
claires sur ce que nous allons avoir à faire.

À partir du
moment où
une seule
partie de
l'écran va être
visible à un
moment
donné, comme
c'est le cas sur
cet exemple, il
va donc falloir
que nous
fassions très
attention à la position de nos boutons, de nos call to action. Il est donc préférable,
dans la plupart des cas, de ne pas les repousser complétement dans la partie droite
de l'écran. Puis il va falloir faire attention à l'ouverture de fenêtres de dialogue. Il est
possible d'ouvrir des fenêtres de dialogue à un moment donné et que ces fenêtres de
dialogues ne soient pas perceptibles puisqu'il y a un agrandisseur d'écran au
moment donné. Donc vous allez survoler quelque chose qui va ouvrir une fenêtre de
dialogue automatiquement, une pop up, et cette pop up va s'ouvrir dans une partie
de l'écran qui ne sera pas visible à ce moment-là. La personne qui va consulter votre
site à ce moment-là, ne saura absolument pas ce qui se passe dans la fenêtre de
dialogue. Nous connaissons tous le proverbe « loin des yeux, loin du coeur », nous
pouvons établir un nouveau proverbe pour le _UI-UX_ qui va être « hors de la vue,
hors de l'esprit », on peut également dire « loin des yeux, loin du clic ».

22
 Mettre en place une lecture vocale
Avec la lecture vocale, il ne s'agit pas de prendre le contrôle sur l'ordinateur mais de
comprendre ce qui se passe à l'écran. Un lecteur d'écran est utilisé la plupart du
temps par des gens qui ne voient pas, qui sont non-voyants, pour pouvoir utiliser leur
ordinateur, leur téléphone ou leur tablette. Mais parfois, il est utilisé par d'autres
personnes qui vont avoir des difficultés de lecture. Quelque part, c'est une aide à
l'alphabétisation. Le logiciel lui, va mettre en évidence des mots et va les lire à haute
voix.

Les lecteurs
d'écran sont donc
les premiers outils
vers lesquels vont
se tourner les
développeurs et les
concepteurs pour
comprendre
comment
fonctionne
l'accessibilité. Et
bien entendu, il y a de nombreux lecteurs d'écran qui sont gratuits, nous allons le
voir.

Un lecteur d'écran va donc

analyser une page web et va
vocaliser en précisant par
exemple, qu'il y a sur cette
page, cinq entêtes, six liens,
trois champs de formulaire et
puis un bouton. Les lecteurs
d'écran peuvent fonctionner de
différentes façons. Soit ils
peuvent être en mode « Tout
dire », c'est-à-dire qu'ils vont lire la page de haut en bas. Soit on va être en mode «
Navigation au clavier », en fonction du déplacement, les différents éléments vont être
lus au fur et à mesure. Soit il va opérer avec le mode « Touches clavier » et il va lire
suivant les raccourcis qui vont être saisis par l'utilisateur. Pour que vous compreniez
bien comment ils fonctionnent, il va donc falloir que vous testiez vos interfaces sur
Mac avec VoiceOver.

23
 Nous allons voir dans un instant
comment il fonctionne mais vous
pouvez également sur Windows,
travailler avec NVDA. NVDA est un
lecteur d'écran qui est gratuit et que
vous allez pouvoir installer de
manière à tester si vos interfaces
fonctionnent correctement pour ce
type de lecteur écran. Bien entendu, il
en existe d'autres sur d'autres
systèmes, par exemple sur Linux.
Mais en testant sur, à la fois
VoiceOver pour Mac et puis NVDA
pour Windows, vous aurez déjà une
très bonne idée du comportement de votre interface pour un lecteur écran.

Pour comprendre comment

fonctionnent ces lecteurs d'écran,
voyons ici avec VoiceOver sur
Mac, comment cette page peut
être lue par un lecteur d'écran.
L'utilisateur va activer VoiceOver
par une combinaison de Touches
clavier, ici en l'occurrence sur Mac
cmd F5, VoiceOver activé
Chrome, Planètes, fenêtre,
Planètes, Contenu HTML est la
cible de la saisie au clavier. Vous
êtes actuellement sur du contenu HTML. Pour entrer dans cette zone web, appuyer
sur Contrôle-Option- Maj-Flèche Vers Le.... Vous voyez qu'ici le lecteur est entré
directement sur du contenu HTML et il nous demande si nous voulons rentrer à
l'intérieur de cette zone, en opérant un raccourci clavier qui va être Contrôle-Option-
Maj-Flèche Vers Le Bas. Et là vous voyez que nous sommes entrés dans la barre de
navigation. Nous allons donc pouvoir naviguer à l'intérieur de cette barre de
navigation. Avec ce système, au fur et à mesure du déplacement avec le clavier, le
lecteur d'écran va expliquer exactement ce qui se passe. Il y a une autre manière de
fonctionner qui va faire lire la totalité de la page. Nous allons voir comment ça
fonctionne. Constellations Galaxies Vous êtes actuellement sur élément texte.
Vidéos Vous êtes actuellement... Contact Vous êtes actuellement sur élément texte.
Vidéos Vous êtes actuellement sur élément texte. Contact Vous êtes actuellement
sur élément texte. Vidéo Vous êtes actuellement sur élément texte. Contact Vous
êtes actuellement sur élément texte. Accueil Galaxies, Planètes, Étymologie,
Nomenclature, Observation, Formation, niveau d'en-tête1, Planètes Une planète est
un objet céleste orbitant autour du Soleil ou d'une autre étoile et possédant une
masse suffisante pour que sa gravité la maintienne en équilibre hydrostatique, c'est-
à-dire sous une forme presque sphérique. Par extension on qualifie aussi parfois de
planète les objets libres de masse planétaire. VoiceOver désactivé. J'ai désactivé
VoiceOver car on ne va pas lire la totalité de la description des planètes du système
solaire. Mais vous avez compris maintenant, comment fonctionne ce système. Et l'on
va voir que ces flux de contenu doivent être vraiment bien adaptés pour une lecture

24
qui en général va être linéaire. Donc nous verrons absolument toutes les implications
de cette prise en compte des lecteurs d'écran.

Utiliser les technologies d'assistance

Jusqu'à maintenant, nous avons examiné ensemble différents dispositifs, différentes
technologies d'assistance qui sont toutes basées sur des logiciels mais il y a des
gens qui ont besoin de technologies d'assistance plus sophistiquées qui sont basées
sur des matériels soit parce que leur handicap est extrêmement lourd, soit parce
qu'ils veulent faire beaucoup de choses. Il va donc falloir en tant que concepteurs
que vous preniez le temps d'examiner ce qui se passe sur le marché. C'est-à-dire
quels types de matériels sont mis en place. Bien entendu, c'est quelque chose qui
évolue tous les jours. Et puis que vous vérifiez que vos interfaces et les interactions
que vous proposez vont bien pouvoir être utilisées avec ces types de matériels.

Je vous invite à
prendre le temps de
regarder cette vidéo
qui va vous
permettre de
comprendre
comment un jeune
homme qui a un
handicap qui est
assez sérieux, peut
utiliser une
combinaison de
matériels qui vont lui
permettre de prendre
le contrôle des outils
sur lesquels il travaille : ipad, ordinateur, etc... et qui va pouvoir utiliser tous les
dispositifs qui sont montés par exemple sur son appuie-tête, combinés avec des
gestes qui sont prévus par iOS et vous vous rendrez compte que c'est assez
impressionnant car il va pouvoir contrôler complètement les machines pour pouvoir
jouer à des jeux auxquels il n'aurait jamais pu accéder sans ces outils. En tant que
concepteurs d'interfaces particulièrement concernés par l'accessibilité, il va falloir
que vous vous rapprochiez des associations qui gèrent ce genre de dispositifs de
manière à pouvoir les tester par vous-mêmes pour vous rendre compte et vous
mettre dans la position d'une personne qui les utilise. Et c'est ainsi que vous pourrez
encore mieux améliorer vos interfaces.

25
 4- Optimiser l’accessibilité
Gérer le flux de lecture
De tout ce que nous avons vu jusqu'à présent, il ressort, vous vous en rendez bien
compte, qu'il va falloir gérer le plus possible nos flux de lecture. L'ordre dans lequel
vont apparaître Les éléments que nous allons présenter et les séquences des
interactions, que nous allons proposer aux utilisateurs devront être adaptés. Adaptés
à quoi ? Et bien, adaptés au clavier car quels que soient les types de handicaps, la
plupart reposent aujourd'hui sur l'utilisation du clavier, à la fois pour naviguer mais
également pour saisir.

Voyons quelques exemples.

Vous allez devoir être
particulièrement attentifs sur
la gestion en termes de code,
par exemple des formulaires.
Vous voyez qu'ici on a un
formulaire et si nous
naviguons à l'intérieur de ce
formulaire l'ordre, la
séquence dans laquelle on va
pouvoir se déplacer sur ce
formulaire avec le clavier est
très importante. Il ne faudrait
pas ici, que l'on puisse aller du modèle directement vers le bouton Trouver.
Effectivement là ce n'est pas le cas, nous allons sur Modèle puis sur Motos neuves,
puis sur Motos d'occasion et ensuite sur Trouver. Mais tous ces éléments sont des
éléments qu'il va falloir vérifier avec vos développeurs.

Nous avons ici un autre

exemple, où, lorsque nous
entrons dans le formulaire, et
bien au lieu d'arriver sur le
numéro de la carte qui est
obligatoire, nous arrivons
directement sur le nom
d'utilisateur qui lui est optionnel. Ensuite, nous nous déplaçons vers le numéro de la
carte, la case à cocher, le mot de passe et nous allons passer ensuite directement
aux différents textes avant d'activer le bouton. Et vous voyez que ceci ne va pas
fonctionner pour quelqu'un qui va travailler uniquement au clavier. Si vous travaillez
avec votre souris, vous allez bien entendu, pouvoir cliquer directement sur les
champs qui vous intéressent. Mais si vous fonctionnez uniquement avec un clavier,
l'ordre de la séquence va également être très important.

26
 Nous avons ici un exemple avec
du contenu où le texte est
déroulé de façon linéaire mais
nous allons nous retrouver à un
moment donné avec trois
images et puis trois textes qui se
trouvent sous ces trois images.
Si en termes de lecture, le
lecteur écran lit d'abord l'image
1, puis la 2, puis la 3, puis
ensuite les textes, et bien on
aura quelque chose qui ne va
pas fonctionner en termes de
séquence. Il va donc falloir
pouvoir lire l'image numéro 1 et
le texte qui se trouve dans la
colonne numéro 1, la première
qui se trouve à gauche. Puis
l'image numéro 2, celle du
milieu, et la colonne qui se trouve en dessous, puis l'image numéro 3 et celle qui se
trouve ensuite en dessous. On a des systèmes maintenant de mise en page web qui
sont avec les CSS, assez sophistiqués. Ιl va donc falloir s'assurer avec vos équipes
de développement que la façon dont les choses ont été écrites au niveau du code,
vont être linéaires et vont pouvoir être lues en fonction d'une séquence qui sera
interprétée correctement par un lecteur écran.

Repenser les interactions visuelles

Les concepteurs web utilisent énormément de visuels pour pouvoir indiquer les
endroits où va se trouver l'utilisateur et puis donner des indications sur des
interactions.

Par exemple sur cette page, nous

voyons dans la partie gauche, qu'il y a
un menu et nous avons ici des petites
flèches qui nous indiquent que nous
avons ouvert la partie vidéo et que
dans la partie vidéo, il y a la partie
Hubblecast et il y a un certain nombre
de liens qui vont pouvoir se déployer
au fur et à mesure qu'on va les
consulter. Tous ces outils visuels qui
vont aider à la navigation ne seront
absolument pas perçus, soit par
quelqu'un qui va avoir un handicap
visuel total, c'est-à-dire qu'il ne va
absolument rien voir et donc va lire
directement avec un outil de lecture écran, soit quelqu'un qui a une vision partielle et
qui va utiliser par exemple un agrandisseur d'écran avec lequel il aura parfois du mal
à voir ce genre de dispositifs. Il va donc falloir que nous fassions attention aux
informations visuelles que nous mettons en place, en assurant la redondance. C'est

27
à dire que pour tout ce que nous indiquons visuellement nous devons trouver un
moyen de l'indiquer à la fois par une structure du code qui soit cohérente mais
également par des moyens qui vont permettre à l'utilisateur de se dire : « Je me
trouve à tel endroit dans la navigation ». Alors il va faire cela bien entendu avec un fil
d'Ariane, avec la lecture du titre de la page et c'est cette redondance qui va
permettre de trouver la même information visuellement pour les gens qui n'ont pas
de handicap et puis avec d'autres moyens pour ceux qui auront un handicap.

Assurer la proximité des contenus

Le concept de proximité est très important pour tout le monde, pas uniquement pour
les personnes handicapées mais pour ceux qui ont une déficience visuelle le
problème s'accroît d'autant. Il faut comprendre qu'en termes d'interface deux choses
sont étroitement liées. Elles doivent être rapprochées dans cette interface. En
quelque sorte : « Qui se ressemble, s'assemble. ».

Voyons un cas d'école, une

mésaventure qui m'est arrivée
alors que je visitais un musée et
que je souhaitais accéder à une
exposition. Je me suis retrouvé
dans un ascenseur où les
boutons m'ont paru
énigmatiques, j'étais hors de
France, je ne comprenais donc
pas la différence entre 1, 1U, 3,
3U etc... À proximité de ce
boîtier avec les boutons qui
permettaient d'actionner
l'ascenseur, il y avait une
explication.

Malheureusement vous
constatez que cette explication,
loin de résoudre mon problème,
l'a encore plus compliqué parce
que je me suis retrouvé avec des
explications qui n'étaient pas
vraiment explicites. Pourquoi le 3
devenait le 01 ? Pourquoi le 1
devenait le 03 ? Je n'avais pas
de réponses à mes questions.

28
 Il a fallu que je me retourne
pour constater sur la paroi
opposée de l'ascenseur, qu'il
y avait un panneau explicatif
complet, expliquant où se
trouvaient ces fameux
espace 1, espace 2, espace
3 etc... Je n'étais pas tiré
d'affaire mais j'avais ici
quelques indications. Or, ces
indications ne s'étaient pas
trouvées à proximité des
moyens d'interaction que
j'avais, en l'occurrence le
boîtier avec les boutons qui
permettaient d'actionner l'ascenseur.

En ce qui concerne les interfaces

web, le problème est parfois
similaire notamment avec
l'utilisation de fenêtres, qui sont des
fenêtres d'infobulle ou des fenêtres
pop up qui vont donner des
indications contextuelles, en
fonction de la navigation. Si
effectivement je passe sur ce lien,
vous voyez qu'il y a une fenêtre qui
va me donner des explications
contextuelles.

Ιci, pour quelqu'un qui a une vision

normale, l'information contextuelle
apparaît correctement mais dans
certains cas, elle n’apparaîtra pas
forcément. Prenons l'exemple en
agrandissant notre écran, tout
simplement ici, en agrandissant la
taille écran. Vous voyez que si je
suis avec un agrandisseur d'écran
et qu'on se déplace au niveau de
ce lien, nous ne voyons pas
l'infobulle. Il va falloir défiler vers le bas pour commencer à afficher cette infobulle. Il
va donc falloir particulièrement étudier la proximité des éléments d'explication que
nous allons mettre en place. Dans un premier temps en rassemblant tout ce qui est à
caractère identique. Et dans un deuxième temps en faisant attention aux dispositifs
modernes que nous sommes tentés d'utiliser pour des personnes qui ont une vision
normale en pensant qu'avec certains dispositifs comme des agrandisseurs d'écran

29
ou des lecteurs d'écran et bien on ne verra pas forcément les informations que nous
affichons même si elles sont à proximité relative.

Assurer la prédictibilité
Pour les utilisateurs, que ceux-ci aient des handicaps ou non, trouver dans une
interface des indices, qui vont les aider à s'orienter, est très important. Il faut qu'ils
sachent où ils sont mais il faut également qu'ils sachent ce qu'ils peuvent faire et ce
qui va se passer s'ils cliquent sur un lien, soumettent un formulaire ou effectuent tout
autre type d'action. Lorsqu’ils vont être confrontés à un imprévu, ils vont se retrouver
dans la confusion, ils vont être perdus. Et à un moment donné, ils vont être
incapables de poursuivre, en quelque sorte, ils vont se retrouver coincés. Alors le
handicap est un amplificateur de tous ces problèmes. Il va donc falloir que nous
fassions très attention à assurer la prédictibilité de nos interfaces, de manière à éviter
tous types d'imprévu.

Nous avons ici une

interface qui
présente un
dispositif qui est
bien connu des
webdesigners, qui
consiste à présenter
des onglets avec
différents types de
contenu. Il est
évident pour un
utilisateur qui n'a
pas de handicap
visuel, qu'il va
suffire de cliquer sur
ces onglets, de manière à pouvoir afficher les différents contenus. Pour un utilisateur
qui souffre d'un handicap visuel, par exemple total, il ne va pas pouvoir ici forcément
accéder de la même façon à ces onglets. Voyons ce qui se passe avec VoiceOver
quand il est activé : VoiceOver activé Chrome, Onglets, fenêtres, Financement,
Sélectionné, tab, 1 sur 3 est la cible de la saisie au clavier. Vous êtes actuellement
sur tab, 1 sur 3, dans du contenu HTML. Pour sélectionner cette option, appuyez sur
Contrôle-Option-Espace. Pour sortir de cette zone web, appuyez sur Contrôle-
Option-Maj-Flèche Haut. Vous voyez qu'ici la prédictibilité, c'est-à-dire ce qui va se
passer si on clique, n'est mentionnée que par VoiceOver. Il n'y a aucune indication,
du fait que si maintenant je vais sélectionner cette option, je vais forcément afficher
le contenu. Effectivement si je clique sur Contrôle-Alt ou Contrôle-Option-Espace,
appuyer Financement, tab, 1 sur 3 et bien le logiciel ne va pas me lire le texte qui se
trouve dans l'onglet. Il faut donc que nous mettions en place des dispositifs qui soient
des dispositifs, qui fonctionnent parfaitement avec ces systèmes de lecture écran, en
assurant la prédictibilité, et de telle sorte que les choses fonctionnent toujours. C'est-
à-dire que lorsque l'utilisateur va suivre une indication, il obtiendra le contenu qu'il
recherche. En tant que concepteurs axés sur l'accessibilité, vous allez devoir vérifier
avec vos équipes de développement, que les dispositifs qui auront été mis en place
assurent toujours la prédictibilité de ce qui va se passer sur vos interfaces

30
 Résoudre les problèmes cognitifs et mémoriels
Nous avons déjà vu que pour pouvoir résoudre une grande partie des problèmes
cognitifs et des problèmes mémoriels, il fallait simplifier considérablement nos
interfaces. Ces problèmes cognitifs et mémoriels ne sont pas d'ailleurs uniquement
réservés aux personnes qui vont avoir des handicaps sérieux parce qu'ils ont subi
par exemple des traumatismes crâniens ou ont subi des maladies, mais s'adressent
également à tout le monde puisqu'à un moment donné en fonction du contexte, nous
pouvons être perturbés dans notre consultation d'un site web et réellement avoir des
problèmes de mémoire.

Or, nous nous apercevons

qu'à partir du moment où
quelque chose est sorti de
notre champ visuel et bien il
est également sorti de notre
esprit. Hors de la vue, hors
de l'esprit ! Vous vous êtes
certainement trouvés devant
cette situation, d'arriver sur la
deuxième page d'un
formulaire en ayant presque oublié ce que vous aviez saisi sur la première page. Et il
va falloir que vous reveniez sur la page précédente pour pouvoir avoir accès aux
informations que vous aviez déjà saisies. Ceci est un exemple qui montre bien que
dès que vous ne voyez plus quelque chose et bien votre mémoire, votre mémoire
immédiate, à un moment donné va être défaillante.

Voyons un exemple, ici où

nous avons sur un
formulaire qui est un
formulaire d'enregistrement,
effectué une saisie et il y eu
des erreurs de saisie. On
nous a indiqué que le nom
est requis, que nous devons
sélectionner une ville et que
le numéro de téléphone ne doit comporter que des chiffres. C'est très bien, nous
avons ici un résumé de nos erreurs mais ce résumé des erreurs ne suffit pas. Il ne
suffit pas, parce que lorsque nous allons entrer ensuite dans le champ même du
formulaire et que nous arriverons au niveau du numéro de téléphone, nous aurons
déjà oublié quelle était la nature du problème et nous devrons revenir en haut de la
page sur le résumé des erreurs pour le comprendre. Alors que si nous avions indiqué
la nature des erreurs à côté des champs et bien nous aurions résolu ce problème
mémoriel.

31
 Voyons un autre exemple, toujours lié aux
formulaires de problèmes mémoriels. Nous
avons ici, un formulaire d'abonnement à une
newsletter où l'on va nous demander de
renseigner un certain nombre de champs et
pour certains il va y avoir des critères pour
pouvoir remplir ces champs. Lorsque nous
allons saisir un nom, cela ne sera pas
forcément un problème. Lorsque nous allons
entrer une adresse email, cela ne sera pas un
problème. Mais quand nous allons rentrer ici
une date de naissance, par exemple nous
allons rentrer une date, et bien nous n'avons
plus d'indication de la nature des informations que nous devions rentrer. Or nous ne
sommes pas, actuellement ici, dans les normes. Il aurait donc fallu que nous
trouvions un autre système, c'est-à-dire ne pas spécifier la nature de ce que nous
avions à rentrer, la forme avec laquelle nous devons saisir les informations dans le
champ mais à proximité du champ.

Ici, nous avons un formulaire du

même type et vous voyez que les
indications sont saisies à l'intérieur
du champ, Saisissez votre date de
naissance mais ici, on a doublonné
cette indication avec la nature des
informations qui doivent être
entrées, c'est-à-dire quel va être le
format de cette date de naissance.
Et si je commets ici une erreur, je
pourrai me référer aux critères qui
étaient attendus. Il faut donc que
les informations soient placées au
bon endroit, là où il faut et quand il
le faut. Avec ce système d'aide,
des personnes qui vont avoir des
problèmes de mémoire mais
également des personnes qui ont
des problèmes de vision ou
d'attention, voire des personnes
qui n'ont pas de handicap mais qui
se trouvent dans un
environnement qui est perturbant, vont pouvoir accéder à vos interfaces de la
manière la plus optimale possible et remplir les différents formulaires que vous leur
proposer et les interactions que vous mettez à leur disposition.

32
5- Piloter le processus d’accessibilité
Tester l'accessibilité
Les tests sont une des
composantes-clés du travail de
l'ergonome et du designer UI-UX.
Il faut donc, à un moment donné,
être complètement sûr de bien
pouvoir intégrer les personnes
handicapées dans tous vos
processus de test.

Il va falloir, dans un premier temps, que vous

écoutiez et que vous observiez les personnes
handicapées. Vous allez devoir leur poser les
mêmes questions qu'aux personnes qui ne sont
pas handicapées afin de savoir comment ils
vont aborder ce que vous proposez. Vous devez
les observer lorsqu'ils vont être confrontés à
votre site web et vous devez également les
inviter à pouvoir parler lorsque vous allez
organiser des panels, des groupes de dialogue
et également mettre en place des sessions de tri
de cartes. La règle d'or est que vous devez
inclure les personnes handicapées dans toutes
vos phases de recherche et parfois ce n'est pas
toujours très facile. Il va donc falloir dialoguer
beaucoup avec eux et puis s'assurer également
que tous les dispositifs de test que vous avez
mis en place fonctionnent. Par exemple, si vous
avez utilisé un outil de tri de cartes en ligne comme Optimale Sortie, il va falloir
vérifier qu'il puisse être accessible aux personnes handicapées et qu'ils vont bien
pouvoir, avec un outil de prise de contrôle, pouvoir faire glisser et déposer les cartes
virtuelles dans les différentes piles que vous aurez prévues. Si vous utilisez des
sondages en ligne, par exemple avec Survey Monkey, il va également falloir que
vous puissiez tester vos sondages afin de vérifier qu'ils puissent bien être utilisables
à quelqu'un qui va utiliser Dragon ou VoiceOver. Il faut bien entendu vérifier qu'ils
fonctionnent avec un clavier. Et puis lorsque vous allez organiser des brainstormings,
des séances de remue-méninges, par exemple dans une pièce et avec un tableau
blanc, il va falloir que vous vérifiez des choses toutes basiques. Est-ce que les
personnes qui vont avoir un fauteuil roulant vont pouvoir accéder ? Est-ce que le
tableau blanc va se trouver à une hauteur suffisante pour qu'ils puissent écrire
dessus ? Quels vont être les mécanismes de collecte d'informations auprès de gens
qui participent ? Il va bien entendu falloir réfléchir comment adapter vos dispositifs
d'étude mais le fait de pouvoir recueillir les points de vue et puis les besoins
fonctionnels des personnes handicapées pour les intégrer à votre recherche globale
d'ergonomie, c'est un processus qui en vaut vraiment la peine.

33
 Conjuguer l'accessibilité et la stratégie de contenu
La stratégie de contenu est
un des éléments clés du
travail qui va être à faire
lorsque l'on crée un site
internet et l’accessibilité doit
être reliée à cette stratégie
de contenu. Elle doit en faire
partie intégrante. Il va donc
falloir se poser les bonnes
questions.

Lorsque nous avons effectué un test par exemple sur un site bancaire où il s'agissait
de pouvoir intégrer une facture à son compte et puis simplement de la payer, on a
constaté qu'il y avait 12 impasses dans lesquelles se trouvaient bloqués les différents
utilisateurs qui d'ailleurs pour la plupart n'étaient pas handicapés.

Et la note globale affectée au site en termes de

satisfaction était de 3 sur 10 ce qui signifie que les
utilisateurs se plaçaient très clairement dans la
catégorie de détracteurs.

34
 Les causes étaient
relativement simples.
Premièrement, il était
difficile de déterminer sur
quelle page à un moment
donné se trouvait
l'utilisateur, y compris
lorsqu'il se trouvait dans
des processus multi-
étapes. Ensuite, lorsqu'il y
avait des formulaires qui
devaient être envoyés, ceci
n'était pas prédictible, c'est-à-dire que l'on ne savait pas si la page allait être
rafraîchie, si on allait être envoyé vers une nouvelle page ou est-ce que l'on allait
afficher une autre partie de l'interface. L'utilisateur était dans le flou sur ce qui allait
se passer. Et puis dans les processus multi-étapes, en ce qui concernait les
formulaires et bien, il y avait une méconnaissance de l'étape courante. Et puis
surtout, on ne savait pas ce qui restait à compléter. On ne savait pas combien
d'étapes il restait à effectuer pour pouvoir compléter l'action qui était engagée.

Il va donc falloir pouvoir se

poser systématiquement, trois
questions. Premièrement, est-
ce que le contenu va créer
des attentes qui sont claires à
tous les niveaux ? Donc, il
faut savoir que les utilisateurs
doivent savoir à tout moment
où ils se trouvent. Il va donc
falloir bien gérer le types de
page, les liens, les étiquettes et tout le guidage par exemple des infos-bulles et des
textes d'instruction. Dans le cas que nous avons cité précédemment, les types de
page étaient toutes les mêmes. C'était service bancaire en ligne. Donc vous voyez
qu'avec un titre de cette nature, on ne savait pas où l'on était. On aurait pu mettre en
place des titres de pages spécifiques à chacune des pages, ajouter une facture,
confirmer votre numéro de compte ou payer une facture : « Sélectionnez votre
compte pour payer » ou confirmation, vous avez payé avec succès, etc. La deuxième
question à se poser est y a-t-il nécessité de mettre en place un contenu spécifique
dont les personnes handicapées vont avoir besoin ? Et si c'est le cas, où est-ce que
je vais le placer ? Prenons l'exemple d'une liste de succursales et puis chaque
succursale aura ensuite sa page. Est-ce que je vais placer des informations
détaillées sur les horaires d'ouverture ou l'accès aux personnes handicapées sur ces
succursales, sur la page des succursales ou sur la liste de pages ? Et bien, il faudra
le faire déjà sur la liste des pages afin que les personnes handicapées puissent
choisir la succursale qui apportera des réponses, par exemple à leur handicap avec
une rampe d'accès. Troisièmement, il faut se poser la question des besoins
fonctionnels spécifiques sur la page web pour ce qui est des services que vous allez
proposer à votre clientèle ou des systèmes de communication. Si par exemple sur un
formulaire vous précisez que les utilisateurs doivent vous contacter en fournissant un
numéro de téléphone. Et bien les personnes qui sont non entendantes vont avoir des
problèmes avec ce numéro de téléphone. Il faut mieux commencer par inclure un

35
champ qui va leur demander quel est leur mode de communication préféré, de leur
donner le choix entre téléphone, chat et email. Et ensuite, qu'il puisse renseigner
avec un deuxième champ leur mode de communication, c'est-à-dire leur adresse
email ou leur numéro de téléphone. Vous voyez que le travail de l'examen des
contenus est essentiel dans un projet web surtout si vous voulez créer de sites qui
soient efficaces et qui fonctionnent très bien pour les personnes handicapées.

Accorder l'accessibilité et le design web

Nous avons vu que pour
garantir l'accessibilité de nos
interfaces et de leurs sites web
pour les personnes dotées de
handicap, il était important de
pouvoir suivre le travail des
équipes de développement afin
que le code soit rédigé de manière à présenter les différents éléments dans une
séquence qui est une séquence logique.

En ce qui concerne le design web c'est

la même chose, il va falloir que vous
suiviez vos équipes de designers qui
eux sont essentiellement accès sur le
graphisme, donc évoluent dans un
univers visuel et leur faire comprendre
qu'il y a des personnes qui sans pour
autant êtres non-voyants vont avoir des
difficultés visuelles et qu'ils vont devoir
prendre un certain nombre de
dispositions pour garantir l'accès au contenu. Le premier défi va être celui des mises
en page multi colonnes même si le code-source va permettre de pouvoir dérouler le
contenu pour un lecteur d'écran de manière linéaire, une personne qui va avoir des
difficultés visuelles et qui va travailler avec un agrandisseur d'écran, aura des
problèmes avec des mises en page de type multi colonnes. Ensuite il va falloir que
les appels à l'action soient visibles, c'est-à-dire se trouvent à proximité immédiate de
ce qui va les motiver. Si ce n'est pas le cas encore une fois, les personnes qui vont
utiliser des agrandisseurs d'écran, vont avoir du mal à trouver ces appels à l'action.
Et puis le troisième problème n'est pas le moindre, il s'agit d'un problème de
contraste.

36
Nous sommes aidés en ce qui concerne le contraste car le consortium qui gère le
web, le World Wide Web Consortium, W3C, a édicté un certain nombre de règles et il
exige des applicatifs en ligne qui permettent de vérifier le contraste. Nous allons en
voir quelques exemples ensemble maintenant. Nous sommes ici sur un utilitaire qui
permet de saisir la couleur de premier plan et puis la couleur d'arrière plan et de
vérifier au niveau des résultats quelle va être la différence en termes de brillance,
différence de couleur, le taux de contraste et est-ce que ces couleurs vont respecter
les règles qui ont été édictées au niveau du consortium qui gère le web. Donc il y a
différents types de normes qui vont prendre en compte ou non la taille de la
typographie. Et nous allons pouvoir ici par exemple faire des essais. Ici nous avons
une couleur de premier plan qui est le noir, une couleur d'arrière plan qui est le blanc
et nous avons une différence de couleur qui est de 255 bien entendu et donc nous
sommes sur un taux de contraste qui est maximum et ces couleurs bien entendu
sont parfaitement lisibles, le taux de contraste correspond. Si nous saisissons
d'autres types de couleurs, vous voyez que nous avons chuté en termes de taux de
contraste et bien entendu, ces couleurs ne vont pas correspondre à toutes les
normes. Alors ça ne veut pas dire que ça ne va pas fonctionner mais vous pouvez
répondre à certaines normes et ici la typographie à une taille qui est supérieure à 18
points. Cela peut fonctionner mais globalement on est dans un système de couleurs
qui ne fonctionne pas. Alors on peut essayer d'autres couleurs et vous voyez que là,
on est carrément dans quelque chose qui ne fonctionne absolument pas. C'est-à-dire
qu'il faut éviter à tout prix.

37
 Alors cet utilitaire
va vous servir
mais ce n'est pas
le seul, il y en a
un autre qui est
particulièrement
intéressant et qui
lui, travaille
uniquement sur
le taux de
contraste, sur le
ratio entre le
premier plan et
l'arrière-plan.
L'intérêt de cet
utilitaire c'est que l'on peut saisir ces valeurs soit directement avec des codes HTML,
soit avec des codes de type teinte, saturation, luminosité ou carrément des valeurs
textuelles. Par exemple je peux dire : « ici, orange et puis ici, je vais mettre black ».
Bien entendu, il faudra le saisir en anglais. Et vous voyez que là, j'ai du texte qui va
être noir sur un fond orange avec un taux qui est un taux de 10.6 et normalement je
corresponds aux règles de lisibilité. Par contre de l'orange sur du brun, que ce soit
dans un sens ou dans l'autre, vous voyez qu'on peut intervertir les différentes
valeurs. Et bien ici, on a un taux qui est descendu à 3.6. Alors on va ici respecter les
normes mais uniquement si on a des textes qui sont des textes très grands.

Le dernier point qu'il va

falloir aborder, c'est le
point du daltonisme.
Pour ce faire, ici dans
Photoshop, j'ai fait une
capture d'écran d'une
interface sur laquelle
nous avons déjà
travaillé. Et nous allons
voir que pour 12% de la
population masculine
qui souffre de
daltonisme, c'est une
affection qui ne concerne pas les femmes, vont voir cette interface. Pour ce faire, je
vais dans le menu ici Affichage, au niveau du Format d'épreuve, choisir un des deux
problèmes qui vont concerner le daltonisme. Soit la pronatopie-dyschromatopsie, soit
la deutéranopie. Donc il y a quelques petites variantes. Vous voyez que la lisibilité
est loin d' être la même que celle qui était lorsqu'il y avait une vision normale de cette
interface. Donc vous devrez vérifier systématiquement vos interfaces de manière à
prendre en compte le daltonisme. Nous allons voir ici une autre capture d'écran et
vous voyez que nous sommes sur un site qui est un site officiel de la France, sur
France.fr. Si nous affichons ici les Couleurs d'épreuve c'est-à-dire que nous sommes
sur un Format d'épreuve qui est protanopie et bien en affichant les Couleurs
d'épreuve, nous avons quelque chose qui est pratiquement la même chose. Bien
entendu les couleurs ont été affaiblies dans la photo mais les daltoniens sont
habitués à ce type de vision. En ce qui concerne l'interface en tant que telle, le bleu

38
est resté bleu, nous avons juste ici un problème sur le rouge du logo mais ici le
designer web n'y pouvait rien. Donc vous comprenez peut-être mieux maintenant
pourquoi Facebook, Linkedin et d'autres sites sont systématiquement avec des
interfaces bleues, parce que l'on est sûr que même une population masculine qui va
souffrir de daltonisme, pourra la visualiser de la même façon que quelqu'un qui a une
vision totalement normale. Dans l'intégration de l'accessibilité, dans votre processus
de création web, vous devez veiller à ce que tous les éléments de design soient
passés en revue le plus tôt possible, de manière à ce que vous évitiez ce genre de
problèmes. Et si vous avez des doutes, pour les lever, effectuez un test réel avec des
personnes qui vont souffrir des handicaps visuels que vous désirez intégrer.

Gérer les interactions

C'est un fait que presque tous les
sites que nous avons à concevoir,
ont pour objectif de générer une
interaction avec nos utilisateurs.
Nous voulons qu'ils consultent un
catalogue, qu'ils achètent des
produits, qu'ils entrent en relation avec nous, qu'ils nous envoient des informations,
qu'ils reçoivent les informations que nous avons à leur envoyer, et toutes ces
interactions doivent être le plus accessible possible. Nous allons y parvenir en
multipliant les moyens d'accès au contenu.

Effectivement, il faut
comprendre que deux
personnes ne vont jamais
faire les choses
exactement de la même
façon. Et nous avons tendance à concevoir des interfaces ou des parcours, qui sont
des parcours uniques. Alors lorsque nous allons concevoir une interface, nous
l'envisageons en termes d'interaction par rapport à des tâches.

Mais dans une perspective

beaucoup plus élargie, il y
a le problème de la tâche à
accomplir mais cette tâche
est située dans le cadre
d'un objectif, qui est
beaucoup plus général. Et
pour l'utilisateur ce qui
compte, ce n'est pas
forcément la tâche qu'il a à
accomplir mais l'objectif
qu'il va vouloir atteindre.
Par exemple si je mets en
ligne, un podcast qui va expliquer comment construire un rayon rétrécissant, de
manière à minimiser ses ennemis. Pourquoi pas ? Et bien, la tâche va être de lire ce
podcast mais au final l’utilisateur a un objectif qui est de fabriquer, de construire, ce
fameux rayon rétrécissant. Il ne faut donc pas confondre la tâche qui va être

39
proposée par l'interface, de l'objectif. Et resituer toujours cette tâche, dans le cadre
plus général d'un objectif.

Dans le cas de handicap, un

même contenu va être
consommé de manière
différente, en fonction des
handicaps. Et également en
fonction des différents
périphériques. Par exemple
une personne avec des
problèmes de vision, va
préférer bien entendu,
télécharger un podcast pour
pouvoir le lire avec son
smartphone ou sur sa tablette
parce qu'elle considérera que c'est plus pratique. Une personne qui va avoir des
problèmes d'audition, va vouloir bien entendu, accéder à une transcription. Cette
transcription peut être bien entendu sur l'ordinateur mais elle peut également vouloir
télécharger cette transcription, pour pouvoir y accéder sur sa tablette. Et puis
quelqu'un avec des problèmes de mobilité aura une préférence, peut-être, pour ces
périphériques mobiles, qui vont être plus simples à commander qu'un ordinateur,
même avec des outils sophistiqués. Et puis une personne qui a des problèmes
cognitifs, ne se souviendra pas forcément de ce qu'elle a entendu lorsqu'elle a lu le
podcast, et aura besoin d'accéder à une transcription de manière à pouvoir revenir
sur toutes les explications, au fur et à mesure qu'elle réalisera son objectif, qui est la
construction de son fameux rayon rétrécissant. Même si les interactions que nous
créons, nous semblent assez simples, en réalité pour des personnes handicapées,
elles ne sont pas toujours aussi simples que cela. Il va donc falloir que nous
trouvions les interactions les plus simples possibles pour les différents handicaps et
que nous puissions doubler l'accès à nos contenus et à nos interactions de
différentes façons. Lorsque par exemple, nous avons mis en place un dispositif qui
est un dispositif de curseur, on fait glisser le curseur de gauche à droite, et au fur et à
mesure, le prix va s'afficher. On est dans quelque chose qui est parfaitement utile.
Mais lorsque vous allez utiliser ce curseur avec un agrandisseur d'écran, vous ne
verrez pas le bout de la ligne. Et donc vous ne comprendrez pas, lorsque vous ferez
bouger le curseur, ce qui va se passer en termes d'augmentation du prix. Si par
contre vous affichez le prix directement sur le curseur, et bien là vous allez donner
des indications qui vont être réellement contextuelles pour quelqu'un qui a un
problème de vision. Cela ne sont bien entendu ici, que quelques exemples de
conception.

Il va falloir que vous gardiez

toujours présent à l'esprit, qu'ils
existent de nombreuses façons
d'atteindre le même objectif. Et
lorsque vous allez mettre en place
vos conceptions graphiques, vous allez créer des interactions qui vont intégrer ce
fait, que plusieurs personnes vont atteindre le même but de façon différente, pour
toujours fournir une plus grande accessibilité à tous.

40
 Conclure sur l'UX et l'accessibilité
Nous voici arrivés au terme de cette formation consacrée à l'accessibilité. J'espère
qu'elle vous aura été utile, en vous permettant de comprendre l'impact des principaux
handicaps sur la consultation de nos sites web. Nous avons vu qu'au-delà des lois et
des normes, il s'agit avant tout d'une approche qui est globale. D'optimisation à la
fois de la forme, du contenu et des interactions qui sont proposées. Vous allez donc
devoir impliquer vos équipes de designers, comme celles qui assurent le
développement, et puis intégrer dans vos tests les personnes handicapées. Mon
conseil est donc de vous engager à contacter les associations, qui sont proches de
votre lieu d'exercice, pour échanger avec elles au maximum. Car la notion de
handicap est générale, et bien entendu, nous avons vu ensemble les grandes lignes
d'action mais c'est en dialoguant au quotidien, que vous allez pouvoir identifier quels
vont être les besoins fonctionnels auxquels vous n'auriez peut-être pas pensé
initialement. N'hésitez donc pas à me faire part de vos idées sur la question, que je
serai très heureux de découvrir ! Je vous souhaite de réaliser, des sites toujours plus
accessibles.

41