Rendre un portail accessible - journée Accessibilité de l’ADULOA

Olivier NOURRY – Qelios.fr
@OlivierNourry

COMMENT RENDRE ACCESSIBLE UN PORTAIL
ET RÉPONDRE AUX EXIGENCES DE LA RÈGLEMENTATION ?

16/11/2012 1

Rendre un portail accessible…
 Pourquoi?
 Les situations utilisateurs
 Les conséquences sur la conception des sites Web
 Comment?
 Les outils: référentiels
 Les principales bonnes pratiques
 Combien?
 Principales sources de coût
 Comment les optimiser

Olivier NOURRY – Qelios.fr 16/11/2012
@OlivierNourry 2

http://www.flickr.com/photos/quinnanya/8146545747

POURQUOI?

@OlivierNourry 3

La mission d’un site Web, en 3 points
1. Rendre service à l’utilisateur

Pour le faire correctement, il importe donc de connaître
et comprendre les besoins des utilisateurs.

@OlivierNourry 4

Les utilisateurs et leurs besoins
Il existe de nombreux modes de « consommation »
d’un site Web:
 Au bureau (PC, Mac)
 Dans son canapé (tablettes)
 En mobilité (smartphones)
 Dans un lieu public
 Au travers d’un autre site ou d’une application
tierce

@OlivierNourry 5

Certains modes d’accès sont très
spécifiques
 Lecteur d’écran
 Loupe
 Logiciels de personnalisation du rendu
 Clavier ou souris adaptés
 Entre autres!
L’accessibilité Web, c’est rendre possible l’utilisation d’un site par
une personne en situation de handicap.
Bonne nouvelle: ça facilitera aussi l’accès pour « tout le monde ».

@OlivierNourry 6

Handicap?
Définition « médicale »: résultat d’une déficience
physique ou sensorielle.

@OlivierNourry 7

Handicapé?
Oscar Pistorius
Demi-finaliste du 400m aux Jeux Olympiques 2012.

AFP/Olivier MORIN
www.leparisien.fr/sports/JO/jeux-olympiques-londres-2012-diaporamas/en-images-jo-oscar-pistorius-premier-double-ampute-aux-jeux-04-08-2012-2113555.php?pic=1

@OlivierNourry 8

Handicapé?
Stevie Wonder
24 Grammy Awards,
20+ singles n°1 aux USA,
20+ albums dans le Top 10.

http://www.steviewonder.org.uk/multimedia/photo_gallery/gallery.html

@OlivierNourry 9

Handicapé?
Stephen Hawking
Astrophysicien, auteur de découvertes
cosmologiques majeures.

http://www.hawking.org.uk/images.html

@OlivierNourry 10

Handicapé?
Dark Vador
Tyran intergalactique

@OlivierNourry 11

Il nous faut autre chose
On peut présenter une déficience sans pour autant être
systématiquement en situation de handicap.
Inversement, on peut être en situation de handicap,
sans pour autant systématiquement présenter de
déficience.
La définition « médicale » ne rend pas compte des
aptitudes et difficultés effectives de la personne.

@OlivierNourry 12

Définition « sociale » du handicap
Le handicap est le résultat d’un environnement
inadapté à un besoin spécifique.
 Renverse la perspective
 Rend mieux compte de la réalité des besoins
 Intègre les besoins qui ne résultent pas d’une
déficience à proprement parler
 Permet de parler de l’accessibilité sous l’angle
fonctionnel (ce que fait l’utilisateur, et comment il le
fait).
@OlivierNourry 13

Comprendre le besoin pour mieux le
satisfaire

Une mauvaise compréhension
du besoin conduit à des
solutions inadaptées.

 Gaspillages

 Frustrations

 Perte de confiance

@OlivierNourry 14

Pas si simple!
Différents besoins, que l’on ne peut pas résumer
par des notions de déficiences.
Exemple: déficience visuelle?

Yeah!
C’est à
Moi je veux
moi
des On peut
qu’tu
alternatives zoomer?
causes?
aux images!
WOOH!

@OlivierNourry 15

Vraiment pas simple!
Même au sein d’un groupe précis d’utilisateurs, les
besoins varient.

Moi je surfe
avec Jaws et Et moi avec
Firefox sur VoiceOver sur
mon PC! mon Mac!

@OlivierNourry 16

Vraiment, vraiment pas simple…
Même au sein d’un groupe précis d’utilisateurs
utilisant les mêmes outils, les besoins varient…

Ok, je me suis
acheté un
Mac, comme
Ah, je sais
toi, WOOH!
pas, moi
Mais
j’utilise que
comment on
les headings!
fait pour
avoir la liste
des liens?

@OlivierNourry 17

Un vrai casse-tête
La conception d’un site Web accessible recèle plusieurs pièges:
 Partir de présupposés
 Faire en fonction d’un utilisateur ou groupe d’utilisateurs donnés
 Généraliser à outrance
 Essayer de faire le travail à la place des outils
Exemples de fausses bonnes idées:
 Version vocale
 Version « pour déficients visuels »
 Version dégradée

@OlivierNourry 18

Pourtant, c’est possible…
… de faire un site utile, graphiquement attractif, ET accessible. La preuve:

@OlivierNourry 19

http://www.flickr.com/photos/filmstalker/7639232476

COMMENT?

@OlivierNourry 20

Les clés de la réussite
 Comprendre les usages et les utilisations pour
les rendre possibles.
 Utiliser les standards du Web; ils sont faits pour
ça.
 Appliquer les bonnes pratiques et
recommandations.
 Fournir les contenus alternatifs lorsque c’est
nécessaire.

@OlivierNourry 21

Les référentiels à la rescousse
 Les référentiels résultent de l’étude des besoins
fonctionnels des utilisateurs
 Pas nécessaire de repartir de 0
 Pas nécessaire de tout comprendre
 Ils en forment la synthèse
 Ils sont l’inventaire des objectifs à atteindre pour
le site Web.
 Peuvent être utilisés directement comme
procédure de tests
@OlivierNourry 22

Ce que les référentiels ne sont pas
 Un cahier des charges
 Une liste de solutions
 Une fin en soi
 Ce n’est qu’un outil
 Nécessaire de conserver la perspective utilisateur,
et le recul nécessaire pour arbitrer les cas limites

@OlivierNourry 23

http://www.flickr.com/photos/filmstalker/7639232476

QUELQUES BONNES PRATIQUES

@OlivierNourry 24

Les images
Le besoin (version courte): restituer une information
purement visuelle sous une forme non visuelle (=texte).
Version longue: Attention aux différents types d’images…
 Images informatives simples
 Images informatives complexes
 Images décoratives
 Images de textes
 Images CAPTCHA…

Différentes actions en fonction de la situation.
@OlivierNourry 25

Les images informatives simples
Associer un texte (court) à l’image.
Réalisé au travers du code (attribut alt de la balise
<img/> en général).

@OlivierNourry 26

Les images informatives complexes
Associer un texte (long, structuré) à l’image.

@OlivierNourry 27

Les contrastes
 Proposer des contrastes suffisants

@OlivierNourry 28

Les contenus multimédias
Fournir l’information pour ceux qui:
 N’ont pas l’image
 N’ont pas le son
 N’ont ni son, ni image

@OlivierNourry 29

Les contenus multimédias – pas
d’image
Audiodescription des vidéos.
 Piste son en « voix off », désactivable;
 Ou, version audiodécrite

@OlivierNourry 30

Les contenus multimédias – pas de son
Sous-titrage des vidéos.
 Sous-titres activables à la demande
 Ou, version sous-titrée

@OlivierNourry 31

Les contenus multimédias – pas de son
Versions en langue des signes.
 Deux vidéos synchronisées
 Ou, incrustation

@OlivierNourry 32

Les contenus multimédias – ni son, ni
images
Transcription textuelle.

@OlivierNourry 33

Les liens
L’intitulé doit être explicite (on doit comprendre ce
qui se passera si on clique).
Eviter les liens identiques, avec des destinations
différentes.
 Eviter « cliquer ici », « lire la suite », « en savoir plus », etc.

@OlivierNourry 34

Clavier vs. souris
S’assurer qu’on peut tout utiliser, avec le clavier ou
la souris.
 Bonne nouvelle: par défaut, les standards du
Web fonctionnent au clavier comme à la souris
 Difficultés possibles pour les composants
d’interfaces riches (widgets): travail spécifique
de gestion du clavier

@OlivierNourry 35

Titres des pages
Fournir un titre de page explicite.

@OlivierNourry 36

Séparer le fond et la forme
Utiliser les feuilles de style CSS

= =
@OlivierNourry 37

Permettre le zoom
Sinon…

@OlivierNourry 38

Ne pas oublier les documents!
PDF, documents Word et assimilés:
 Les rendre accessibles
 Ou fournir une version accessible

@OlivierNourry 39

COMBIEN?

@OlivierNourry 40

Ne pas sous-estimer l’impact
 Intégrer l’accessibilité dès le début du projet
 Faire bien directement vs. Faire, casser, refaire
 Planifier les actions spécifiques
 Budgéter
 Pour réaliser
 Pour entretenir

@OlivierNourry 41

Tenir compte des gains
 Elargissement de l’audience potentielle
 Réduction du besoin d’assistance
 Meilleure satisfaction utilisateur
 Amélioration de la qualité technique
 Amélioration du référencement naturel
 Amélioration de l’image de marque
 Réduction du risque politique
@OlivierNourry 42

Se donner un objectif
Compte tenu des gains possibles, définir un objectif
de surcoût.
(En général, autour de 10%)

@OlivierNourry 43

Les sources de coût
 Intégration des bonnes pratiques
 Formation
 Spécifications
 Développements spécifiques
 Tests
 Contenus alternatifs
 Pour les vidéos
 Pour les documents
 Pas de coûts logiciels ou matériels
@OlivierNourry 44

Les bonnes pratiques
 Combien ça coûte?
Combien coûte une bonne orthographe?
 La clé: la compétence
Si on sait ce qu’il faut faire, le surcoût est négligeable.

@OlivierNourry 45

Acquérir la compétence
 Le chemin à parcourir
1. Apprendre
2. Pratiquer
3. Se planter
4. Recommencer
 Le raccourci
1. Casser sa tirelire
2. Louer les services d’un expert

@OlivierNourry 46

Produire les contenus alternatifs:
vidéos
 Partir du transcript
 Un travail de dactylo…
 Saisir les sous-titres dans un outil spécialisé
 Audiodescriptions
 Un dispositif simple suffit (un PC, un micro…)

Bien maîtrisé, le coût n’excède pas 5% de celui de la
fabrication de la vidéo.
@OlivierNourry 47

Produire les contenus alternatifs:
documents
 Définir le bon format
 Word plus simple que PDF
 HTML, le meilleur choix dans l’absolu…
 Etre correctement outillé
 Inclure les préconisations le plus en amont possible
 Contrats de sous-traitance
 Formation des producteurs internes

@OlivierNourry 48

3 CHOSES À RETENIR

@OlivierNourry 49

3 leçons essentielles
 Comprenez le besoin pour mieux le satisfaire
 Les normes sont là pour vous y aider
 Intégrez l’accessibilité dès le début du projet

@OlivierNourry 50

Merci de votre attention!

Olivier Nourry
Directeur du Développement, Qelios

@OlivierNourry
about.me/oliviernourry

@OlivierNourry 51

Rendre un portail accessible - journée Accessibilité de l’ADULOA

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Rendre un portail accessible - journée Accessibilité de l’ADULOA

Ähnlich wie Rendre un portail accessible - journée Accessibilité de l’ADULOA (6)

Mehr von Qelios

Mehr von Qelios (11)