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

999 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
999
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. Olivier NOURRY – Qelios.fr @OlivierNourry COMMENT RENDRE ACCESSIBLE UN PORTAILET 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 points1. Rendre service à l’utilisateur2. Rendre service à l’utilisateur3. Rendre service à l’utilisateurPour le faire correctement, il importe donc de connaîtreet comprendre les besoins des utilisateurs. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 4
  5. 5. Les utilisateurs et leurs besoinsIl 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èsspé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 parune 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éficiencephysique ou sensorielle. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 7
  8. 8. Handicapé?Oscar PistoriusDemi-finaliste du 400m aux Jeux Olympiques 2012. AFP/Olivier MORINwww.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 Wonder24 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 HawkingAstrophysicien, auteur de découvertescosmologiques majeures.http://www.hawking.org.uk/images.html Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 10
  11. 11. Handicapé?Dark VadorTyran intergalactique Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 11
  12. 12. Il nous faut autre choseOn peut présenter une déficience sans pour autant êtresystématiquement en situation de handicap.Inversement, on peut être en situation de handicap,sans pour autant systématiquement présenter dedéficience.La définition « médicale » ne rend pas compte desaptitudes et difficultés effectives de la personne. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 12
  13. 13. Définition « sociale » du handicapLe handicap est le résultat d’un environnementinadapté à 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 lesatisfaire 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’tualternatives 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, lesbesoins 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’utilisateursutilisant 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êteLa 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 outilsExemples 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 imagesLe besoin (version courte): restituer une informationpurement 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 simplesAssocier 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 complexesAssocier 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édiasFournir 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 – pasd’imageAudiodescription 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 sonSous-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 sonVersions 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, niimagesTranscription textuelle. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 33
  34. 34. Les liensL’intitulé doit être explicite (on doit comprendre cequi se passera si on clique).Eviter les liens identiques, avec des destinationsdifférentes. Eviter « cliquer ici », « lire la suite », « en savoir plus », etc. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 34
  35. 35. Clavier vs. sourisS’assurer qu’on peut tout utiliser, avec le clavier oula 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 pagesFournir un titre de page explicite. Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 36
  37. 37. Séparer le fond et la formeUtiliser les feuilles de style CSS = = Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 37
  38. 38. Permettre le zoomSinon… 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 objectifCompte tenu des gains possibles, définir un objectifde 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 lafabrication 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 À RETENIROlivier 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 NourryDirecteur du Développement, Qelios@OlivierNourryabout.me/oliviernourry Olivier NOURRY – Qelios.fr 16/11/2012 @OlivierNourry 51

×