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

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

Olivier NOURRY – Qelios.fr

@OlivierNourry

16/11/2012 1

2

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

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

3

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


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

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

4

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.

5

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

6

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 ».

7

Handicap?

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


8

Handicapé?Oscar Pistorius

Demi-finaliste du 400m aux Jeux Olympiques 2012.


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

AFP/Olivier MORIN

http://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

9

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



10

Handicapé?Stephen Hawking

Astrophysicien, auteur de découvertes cosmologiques majeures.


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



11

Handicapé?


Dark Vador

Tyran intergalactique

12

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.


13

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).


14

Comprendre le besoin pour mieux le satisfaire

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

Gaspillages

Frustrations

Perte de confiance


15

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!Moi je veux

des alternatives aux images!

WOOH!

On peut zoomer?

C’est à moi

qu’tu causes?

16

Vraiment pas simple!

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


Moi je surfe avec Jaws et Firefox sur mon PC!

Et moi avec VoiceOver sur

mon Mac!

17

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 toi, WOOH!

Mais comment on

fait pour avoir la liste des

liens?

Ah, je sais pas, moi

j’utilise que les headings!

18

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ée16/11/2012Olivier NOURRY – Qelios.fr

@OlivierNourry

19

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


20

COMMENT?


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



21

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.


22

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


23

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


24

QUELQUES BONNES PRATIQUES





25

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.16/11/2012Olivier NOURRY – Qelios.fr

@OlivierNourry

26

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).


27

Les images informatives complexes

Associer un texte (long, structuré) à l’image.


28

Les contrastes Proposer des contrastes suffisants


29

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


30

Les contenus multimédias – pas d’image

Audiodescription des vidéos. Piste son en « voix off », désactivable;

Ou, version audiodécrite


31

Les contenus multimédias – pas de son

Sous-titrage des vidéos. Sous-titres activables à la demande

Ou, version sous-titrée


32

Les contenus multimédias – pas de son

Versions en langue des signes. Deux vidéos synchronisées

Ou, incrustation


33

Les contenus multimédias – ni son, ni images

Transcription textuelle.


34

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.


35

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


36

Titres des pages

Fournir un titre de page explicite.


37

Séparer le fond et la forme

Utiliser les feuilles de style CSS


= =

38

Permettre le zoom

Sinon…


39

Ne pas oublier les documents!

PDF, documents Word et assimilés:

Les rendre accessibles

Ou fournir une version accessible


40

COMBIEN?


41

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


42

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 politique16/11/2012Olivier NOURRY – Qelios.fr

@OlivierNourry

43

Se donner un objectif

Compte tenu des gains possibles, définir un objectif de surcoût.

(En général, autour de 10%)


44

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ériels16/11/2012Olivier NOURRY – Qelios.fr

@OlivierNourry

45

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.


46

Acquérir la compétence

Le chemin à parcourir

1. Apprendre2. Pratiquer3. Se planter4. Recommencer

Le raccourci

1. Casser sa tirelire2. Louer les services d’un expert


47

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.


48

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


49

3 CHOSES À RETENIR


50

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


51

Merci de votre attention!

Olivier NourryDirecteur du Développement, Qelios

@OlivierNourryabout.me/oliviernourry


https://twitter.com/OlivierNourry

https://twitter.com/OlivierNourry

http://about.me/oliviernourry

http://about.me/oliviernourry

Technology

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