Le Web et l’accessibilité

handicap Human Talks

12 novembre 2013

Lauren Thévin

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Introduction

/!\ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Handicap moteur

Problématique : Mobilité des membres supérieurs ◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Handicap moteur 2

Test ◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience auditive

Problématiques : n’entend pas / entend mal

◦ Contenu audio et vidéo

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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience visuelle partielle

Problématique : mauvaise vision des couleurs / mauvaise acuité

◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience visuelle partielle 2

Tests

◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience visuelle totale

Problématique : ne voient pas ◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience visuelle totale Tests

◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience mentale

Problématique : attention et mémoire ◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Déficience mentale 2

Test

◦ 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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Conclusion

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

Hum

an T

alks

12 n

ov

2013 L

aure

n T

hévi

n

/13

Merci de votre attention

Des questions ?

13