1. Le Web et l’accessibilité
handicap
Human Talks
12 novembre 2013
Lauren Thévin

2. Introduction
Human Talks 12 nov 2013
Lauren Thévin


/! Toute généralité est abusive
Est-il nécessaire de justifier l’accessibilité pour
tous ?

Débat sur la définition :
◦ Handicap / situation de handicap
◦ Note : pour des raisons pratiques, mots et
expressions courtes seront utilisés dans cet exposé
 Non voyant / aveugle
 Personne en situation de handicap/handicapé

Vous savez coder ? Je ne détaillerai donc pas les
solutions
2 /13

3. Handicap moteur

Problématique : Mobilité des membres supérieurs
Human Talks 12 nov 2013
Lauren Thévin
◦ Manipulation clavier / souris / tactile

Mobilité limitée
◦ Navigation via raccourcis clavier
Navigation via Tabulation + « Entrée »
Définir des raccourcis
 permettre à l’utilisateur de les connaitre
 si possible avec pas plus de 2 touches, proches

Immobilité des bras et des mains
◦ Dispositifs de pointeurs alternatifs + clavier virtuel
◦ Compatibilité / respect des normes : W3C
3 /13

4. Handicap moteur 2

Test
Lauren Thévin

Human Talks 12 nov 2013
◦ Utilisez votre site sans souris

Les cas classiques
◦ Feedback pour savoir où on se trouve
◦ Logique d’organisation visuelle de la page
◦ Appellation des liens
Les plus
◦ Confort lors du remplissage de formulaire
◦ Utilisation « experte » (raccourcis)
◦ Plus de pile dans la souris…
4 /13

5. Déficience auditive

Problématiques : n’entend pas / entend mal
◦ Contenu audio et vidéo
Human Talks 12 nov 2013
Lauren Thévin

Solution : Sous-titre, audiodescription
◦ Si nécessaire, synchronisation temporelle
◦ Sinon, juste un texte suffit

Test
◦ Utiliser son site sans le son

Les plus:
◦
◦
◦
◦
Environnement bruyant
Eléments de protection
Open space, bibliothèque
Pas de matériel pour écouter
5 /13

6. Déficience visuelle partielle

Problématique : mauvaise vision des couleurs / mauvaise
acuité
Human Talks 12 nov 2013
Lauren Thévin
◦ Lecture
◦ Compréhension des schémas, légendes et symboles

Acuité
◦ Utilisation du zoom
◦ Mise en négatif
◦ Reconnaissance des formes (enveloppe des mots)
 Première lettre majuscule, puis minuscules
 Sans empattement (Sans Serif)

Daltonisme/achromatopsie
◦ Reconnaissance des contrastes de luminance
◦ Reconnaissance de forme
6 /13

7. Déficience visuelle partielle 2

Tests
Human Talks 12 nov 2013
Lauren Thévin
◦ Zoomez et utilisez votre site
◦ Mettez notre écran en noir et blanc

Les cas classiques
◦ Zoom : réorganisation
◦ Zoom : certaines parties ne s’agrandissent pas
◦ Couleur : luminance identique avec une même forme

Les plus
◦ Large population (daltoniens, vieillissement de la population…)
◦ Impression en noir et blanc possible
◦ Zoom : sur petit écran, ou présentation d’un site à un groupe
(de loin)
◦ S’adapte mieux aux différentes caractéristiques d’écran
7 /13

8. Déficience visuelle totale

Problématique : ne voient pas
Human Talks 12 nov 2013
Lauren Thévin
◦ Utilisation de l’écran et des propriétés spatiales du site
◦ Donc pas de souris

Approche vocale
◦ Lecteur d’écran
◦ Description des contenus visuels
◦ Intonation pour le gras ou l’italique (<strong> / <em> )

Approche tactile
◦ Afficheur braille
◦ Description des contenus visuels
8 /13

9. Déficience visuelle totale

Tests
Human Talks 12 nov 2013
Lauren Thévin
◦ Utiliser votre site avec lecteur d’écran, écran éteint
◦ Navigateur mode textuel uniquement

Les cas classiques
◦
◦
◦
◦
◦
◦

Les rafraichissements des pages (pub) : lecture depuis le début!
L’utilisation des cartes interactives
Les liens importants pas au début (ex: page alternative textuelle)
Description alternative non adaptée au contexte (images, liens)
La hiérarchie des titres non respectée
Nouvelle page qui apparait, sans indication en début de page
Les plus
◦ Utilisable sur téléphone
◦ Sites utilisables sans CSS, plugin, script…
◦ Alternative si les images ne se chargent pas
9 /13

10. Déficience mentale

Problématique : attention et mémoire
Human Talks 12 nov 2013
Lauren Thévin
◦ Se repérer sur un site
◦ Erreurs d’inattention

Mémoire
◦ Où se situe-t-on? (fil d'Ariane)
◦ Combien d’étapes avant la fin?
◦ Moins de 5 items retenus à court terme (normal: 7+-2)

Attention
◦ Ressemblance(même site)/dissemblance (autre page)
◦ Retour possible si erreurs (à l’étape juste avant, au début)
10 /13

11. Déficience mentale 2

Test
Human Talks 12 nov 2013
Lauren Thévin
◦ Essayer de revenir à une étape précédente choisie
◦ Localisez-vous quand on vous place sur une page au hasard

Les cas classiques
◦ Pas de feedback dans l’onglet des menus
◦ « retour page précédente »  page d’accueil, perte de toutes
les données
◦ Vérification que vous êtes sur le bon formulaire à la fin

Les plus
◦ Reprenez l’utilisation du site même après avoir été dérangé
◦ Meilleure mémorisation
◦ (sauvez les pc)
11 /13

12. Conclusion
Human Talks 12 nov 2013
Lauren Thévin

Rien ne vaut des tests réalisés par les
principaux concernés

Multipliez les testeurs
◦ Un vécu par histoire

Testez sur les différents systèmes
d’exploitation, et sur les différents
navigateurs
12 /13

13. Merci de votre attention
Des questions ?
Human Talks 12 nov 2013
Lauren Thévin

13 /13