Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Olivier NOURRY – Qelios.fr
                                     @OlivierNourry




          COMMENT RENDRE ACCESSIBLE UN ...
Rendre un portail accessible…
 Pourquoi?
          Les situations utilisateurs
          Les conséquences sur la concep...
http://www.flickr.com/photos/quinnanya/8146545747


                                                    POURQUOI?

       ...
La mission d’un site Web, en 3 points
1. Rendre service à l’utilisateur
2. Rendre service à l’utilisateur
3. Rendre servic...
Les utilisateurs et leurs besoins
Il existe de nombreux modes de « consommation »
d’un site Web:
 Au bureau (PC, Mac)
 D...
Certains modes d’accès sont très
spécifiques
 Lecteur d’écran
 Loupe
 Logiciels de personnalisation du rendu
 Clavier ...
Handicap?
Définition « médicale »: résultat d’une déficience
physique ou sensorielle.




   Olivier NOURRY – Qelios.fr   ...
Handicapé?
Oscar Pistorius
Demi-finaliste du 400m aux Jeux Olympiques 2012.




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




http://www.steviewonder...
Handicapé?
Stephen Hawking
Astrophysicien, auteur de découvertes
cosmologiques majeures.




http://www.hawking.org.uk/ima...
Handicapé?
Dark Vador
Tyran intergalactique




         Olivier NOURRY – Qelios.fr   16/11/2012
         @OlivierNourry  ...
Il nous faut autre chose
On peut présenter une déficience sans pour autant être
systématiquement en situation de handicap....
Définition « sociale » du handicap
Le handicap est le résultat d’un environnement
inadapté à un besoin spécifique.
 Renve...
Comprendre le besoin pour mieux le
satisfaire



                               Une mauvaise compréhension
               ...
Pas si simple!
    Différents besoins, que l’on ne peut pas résumer
    par des notions de déficiences.
    Exemple: défic...
Vraiment pas simple!
Même au sein d’un groupe précis d’utilisateurs, les
besoins varient.



         Moi je surfe
       ...
Vraiment, vraiment pas simple…
Même au sein d’un groupe précis d’utilisateurs
utilisant les mêmes outils, les besoins vari...
Un vrai casse-tête
La conception d’un site Web accessible recèle plusieurs pièges:
 Partir de présupposés
 Faire en fonc...
Pourtant, c’est possible…
… de faire un site utile, graphiquement attractif, ET accessible. La preuve:




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


                                                      COMMENT?

    ...
Les clés de la réussite
 Comprendre les usages et les utilisations pour
  les rendre possibles.
 Utiliser les standards ...
Les référentiels à la rescousse
 Les référentiels résultent de l’étude des besoins
  fonctionnels des utilisateurs
     ...
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’u...
http://www.flickr.com/photos/filmstalker/7639232476


                      QUELQUES BONNES PRATIQUES

              Olivi...
Les images
Le besoin (version courte): restituer une information
purement visuelle sous une forme non visuelle (=texte).
V...
Les images informatives simples
Associer un texte (court) à l’image.
Réalisé au travers du code (attribut alt de la balise...
Les images informatives complexes
Associer un texte (long, structuré) à l’image.




   Olivier NOURRY – Qelios.fr        ...
Les contrastes
 Proposer des contrastes suffisants




    Olivier NOURRY – Qelios.fr         16/11/2012
    @OlivierNour...
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 im...
Les contenus multimédias – pas
d’image
Audiodescription des vidéos.
 Piste son en « voix off », désactivable;
 Ou, versi...
Les contenus multimédias – pas de son
Sous-titrage des vidéos.
 Sous-titres activables à la demande
 Ou, version sous-ti...
Les contenus multimédias – pas de son
Versions en langue des signes.
 Deux vidéos synchronisées
 Ou, incrustation




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




   Olivier NOURRY – Qelios.fr     16/11/2012
   ...
Les liens
L’intitulé doit être explicite (on doit comprendre ce
qui se passera si on clique).
Eviter les liens identiques,...
Clavier vs. souris
S’assurer qu’on peut tout utiliser, avec le clavier ou
la souris.
 Bonne nouvelle: par défaut, les sta...
Titres des pages
Fournir un titre de page explicite.




   Olivier NOURRY – Qelios.fr         16/11/2012
   @OlivierNourr...
Séparer le fond et la forme
Utiliser les feuilles de style CSS




                       =             =
   Olivier NOURR...
Permettre le zoom
Sinon…




  Olivier NOURRY – Qelios.fr   16/11/2012
  @OlivierNourry                      38
Ne pas oublier les documents!
PDF, documents Word et assimilés:
 Les rendre accessibles
 Ou fournir une version accessib...
COMBIEN?

Olivier NOURRY – Qelios.fr        16/11/2012
@OlivierNourry                           40
Ne pas sous-estimer l’impact
 Intégrer l’accessibilité dès le début du projet
      Faire bien directement vs. Faire, ca...
Tenir compte des gains
 Elargissement de l’audience potentielle
 Réduction du besoin d’assistance
 Meilleure satisfacti...
Se donner un objectif
Compte tenu des gains possibles, définir un objectif
de surcoût.
                                (En...
Les sources de coût
 Intégration des bonnes pratiques
         Formation
         Spécifications
         Développemen...
Les bonnes pratiques
 Combien ça coûte?
     Combien coûte une bonne orthographe?
 La clé: la compétence
     Si on sait...
Acquérir la compétence
 Le chemin à parcourir
     1.    Apprendre
     2.    Pratiquer
     3.    Se planter
     4.    ...
Produire les contenus alternatifs:
vidéos
 Partir du transcript
       Un travail de dactylo…
 Saisir les sous-titres d...
Produire les contenus alternatifs:
documents
 Définir le bon format
      Word plus simple que PDF
      HTML, le meill...
3 CHOSES À RETENIR

Olivier NOURRY – Qelios.fr                  16/11/2012
@OlivierNourry                                 ...
3 leçons essentielles
 Comprenez le besoin pour mieux le satisfaire
 Les normes sont là pour vous y aider
 Intégrez l’a...
Merci de votre attention!




Olivier Nourry
Directeur du Développement, Qelios

@OlivierNourry
about.me/oliviernourry

  ...
Vous avez terminé ce document.
Télécharger et lire hors ligne.
Prochain SlideShare
Intégrer l'accessibilité dans une démarche qualité
Suivant
Prochain SlideShare
Intégrer l'accessibilité dans une démarche qualité
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

1

Partager

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

Télécharger pour lire hors ligne

Présentation effectuée dans le cadre de la journée d'étude sur l'accessibilité organisée par l'ADULOA.
Pourquoi? Comment? Combien? sont les questions qui structurent cet exposé. Les besoins des utilisateurs de sites Web y sont abordés, et la notion de handicap est présentée dans toute sa complexité. Quelques bonnes pratiques sont décrites, ainsi que les principales sources de gains et de coûts, et quelques pistes pour les optimiser.
Si vous disposez de Microsoft PowerPoint version 2007 et suivantes, il est recommandé de télécharger le fichier afin de visualiser les animations.
Version plus accessible téléchargeable ici (format DOC, 904ko): https://docs.google.com/open?id=0B0uVswdZfZR2QnZoM0c2YTNEWUU (CTRL+S pour lancer le téléchargement).

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

  1. 1. Olivier NOURRY – Qelios.fr @OlivierNourry COMMENT RENDRE ACCESSIBLE UN PORTAIL ET RÉPONDRE AUX EXIGENCES DE LA RÈGLEMENTATION ? 16/11/2012 1
  2. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 2
  3. 3. http://www.flickr.com/photos/quinnanya/8146545747 POURQUOI? Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 3
  4. 4. La mission d’un site Web, en 3 points 1. Rendre service à l’utilisateur 2. Rendre service à l’utilisateur 3. Rendre service à l’utilisateur Pour le faire correctement, il importe donc de connaître et comprendre les besoins des utilisateurs. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 4
  5. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 5
  6. 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 ». Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 6
  7. 7. Handicap? Définition « médicale »: résultat d’une déficience physique ou sensorielle. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 7
  8. 8. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 8
  9. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 9
  10. 10. Handicapé? Stephen Hawking Astrophysicien, auteur de découvertes cosmologiques majeures. http://www.hawking.org.uk/images.html Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 10
  11. 11. Handicapé? Dark Vador Tyran intergalactique Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 11
  12. 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. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 12
  13. 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). Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 13
  14. 14. Comprendre le besoin pour mieux le satisfaire Une mauvaise compréhension du besoin conduit à des solutions inadaptées.  Gaspillages  Frustrations  Perte de confiance Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 14
  15. 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! C’est à Moi je veux moi des On peut qu’tu alternatives zoomer? causes? aux images! WOOH! Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 15
  16. 16. 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! Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 16
  17. 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 Ah, je sais toi, WOOH! pas, moi Mais j’utilise que comment on les headings! fait pour avoir la liste des liens? Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 17
  18. 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ée Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 18
  19. 19. Pourtant, c’est possible… … de faire un site utile, graphiquement attractif, ET accessible. La preuve: Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 19
  20. 20. http://www.flickr.com/photos/filmstalker/7639232476 COMMENT? Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 20
  21. 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. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 21
  22. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 22
  23. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 23
  24. 24. http://www.flickr.com/photos/filmstalker/7639232476 QUELQUES BONNES PRATIQUES Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 24
  25. 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. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 25
  26. 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). Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 26
  27. 27. Les images informatives complexes Associer un texte (long, structuré) à l’image. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 27
  28. 28. Les contrastes  Proposer des contrastes suffisants Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 28
  29. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 29
  30. 30. Les contenus multimédias – pas d’image Audiodescription des vidéos.  Piste son en « voix off », désactivable;  Ou, version audiodécrite Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 30
  31. 31. Les contenus multimédias – pas de son Sous-titrage des vidéos.  Sous-titres activables à la demande  Ou, version sous-titrée Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 31
  32. 32. Les contenus multimédias – pas de son Versions en langue des signes.  Deux vidéos synchronisées  Ou, incrustation Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 32
  33. 33. Les contenus multimédias – ni son, ni images Transcription textuelle. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 33
  34. 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. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 34
  35. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 35
  36. 36. Titres des pages Fournir un titre de page explicite. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 36
  37. 37. Séparer le fond et la forme Utiliser les feuilles de style CSS = = Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 37
  38. 38. Permettre le zoom Sinon… Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 38
  39. 39. Ne pas oublier les documents! PDF, documents Word et assimilés:  Les rendre accessibles  Ou fournir une version accessible Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 39
  40. 40. COMBIEN? Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 40
  41. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 41
  42. 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 politique Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 42
  43. 43. Se donner un objectif Compte tenu des gains possibles, définir un objectif de surcoût. (En général, autour de 10%) Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 43
  44. 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ériels Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 44
  45. 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. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 45
  46. 46. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 46
  47. 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. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 47
  48. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 48
  49. 49. 3 CHOSES À RETENIR Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 49
  50. 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 Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 50
  51. 51. Merci de votre attention! Olivier Nourry Directeur du Développement, Qelios @OlivierNourry about.me/oliviernourry Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 51
  • firewalkwizme

    Nov. 22, 2012

Présentation effectuée dans le cadre de la journée d'étude sur l'accessibilité organisée par l'ADULOA. Pourquoi? Comment? Combien? sont les questions qui structurent cet exposé. Les besoins des utilisateurs de sites Web y sont abordés, et la notion de handicap est présentée dans toute sa complexité. Quelques bonnes pratiques sont décrites, ainsi que les principales sources de gains et de coûts, et quelques pistes pour les optimiser. Si vous disposez de Microsoft PowerPoint version 2007 et suivantes, il est recommandé de télécharger le fichier afin de visualiser les animations. Version plus accessible téléchargeable ici (format DOC, 904ko): https://docs.google.com/open?id=0B0uVswdZfZR2QnZoM0c2YTNEWUU (CTRL+S pour lancer le téléchargement).

Vues

Nombre de vues

1 296

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

6

Actions

Téléchargements

13

Partages

0

Commentaires

0

Mentions J'aime

1

×