Accessibilité web pour les édimestres

803 views
720 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
803
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Accessibilité web pour les édimestres

  1. 1. 15 juin 2012Accessibilité web pour les édimestres Mohamed Rebaï, ing. jr
  2. 2. Accessibilité web pour les édimestres Sommaire• L’accessibilité web, c’est quoi ?• Les clientèles de l’accessibilité web• Le SGQRI 008-01• Processus de l’accessibilité et l’implication des édimestres• Ce que vous devez/ne devez pas faire• Questions ?
  3. 3. Accessibilité web pour les édimestresL’accessibilité web, c’est quoi ?« Mettre le Web et ses services à la disposition detous les individus, quel que soit leur matériel oulogiciel, leur infrastructure réseau, leur languematernelle, leur culture, leur localisationgéographique, ou leurs aptitudes physiques oumentales. »  (Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web) 
  4. 4. Accessibilité web pour les édimestres Les clientèles de l’accessibilité web● Personnes souffrant de limitations visuelles.● Personnes souffrant de limitations auditives.● Personnes souffrant de limitations motrices.● Personnes souffrant de limitations cognitives.● Personnes vieillissantes.
  5. 5. Accessibilité web pour les édimestres Au Québec• Entre 1,8% et 3,2% de la population a des limitations visuelles.• Entre 4,2% et 5% de la population a des limitations auditives.• Entre 8% et 11,5% de la population a des limitations motrices.• Entre 2,5% et 4,1% de la population a des limitations cognitives.
  6. 6. Accessibilité web pour les édimestresFréquence de l’handicap en fonction de l’âge Source : http://www.ekloweb.com
  7. 7. Accessibilité web pour les édimestres Les standards de l’accessibilité web● Standard sur laccessibilité dun site Web (SGQRI 008-01);● Standard sur laccessibilité dun document téléchargeable (SGQRI 008-02);● Standard sur laccessibilité du multimédia dans un site Web (SGQRI 008-03).
  8. 8. Accessibilité web pour les édimestres SGQRI 008-01Le standard SGQRI 008-01 énonce lesrègles permettant à tout site Web, public ouintranet ou extranet, dêtre accessible afinde faciliter son utilisation par toutepersonne, handicapée ou non.
  9. 9. Accessibilité web pour les édimestres Dates importantesLes dates d’entrée en vigueur de chacun desstandards SGQRI 008 (pour les sitesgouvernementaux) :● le 10 mai 2012 pour les sites Web publics● le 10 novembre 2012 pour les documents téléchargeables et● le 10 mai 2013 pour les sites Intranet et Extranet et pour le multimédia.
  10. 10. Accessibilité web pour les édimestres Pages importantes● Page accessibilité● Page plan du site
  11. 11. Accessibilité web pour les édimestresProcessus de l’accessibilité web1. Vérification de l’accessibilité dans le document des Wireframes.2. Vérification de l’accessibilité dans la maquette graphique du site web.3. Application de l’accessibilité par les développeurs/intégrateurs web.4. Vérification de l’accessibilité des contenus par les édimestres.
  12. 12. Accessibilité web pour les édimestres Implication des édimestresLes développeurs, intégrateurs et designersne sont pas responsables de l’accessibilitédes contenus!Les édimestres ont la responsabilité devérifier l’accessibilité de leurs contenus!
  13. 13. Accessibilité web pour les édimestres Que devez vous vérifier ?● Les liens● Les images● Les entêtes● Les tableaux● Les contenus textuels● Les formulaires
  14. 14. Accessibilité web pour les édimestresLes liens
  15. 15. Accessibilité web pour les édimestres Les liens Les liens doivent êtrecompréhensibles hors-contexte!
  16. 16. Accessibilité web pour les édimestres Les liensCliquez-iciVoir la suiteTélécharger le fichierLes lecteurs d’écran offrent la possibilité delister tous les liens d’une page web!
  17. 17. Accessibilité web pour les édimestres Les liensUn lien doit décrire le contenu de la page vers laquelle il pointe!
  18. 18. Accessibilité web pour les édimestres Les liensTitre d’une nouvelle :« Le canadien de Montréal remporte lacoupe Stanley, Scott Gomez élu meilleurjoueur. »Section principale d’un site web :« Nos services » « Historique »
  19. 19. Accessibilité web pour les édimestres Les liens Les liens portant le même libellé sur une même page,doivent mener vers la même destination
  20. 20. Accessibilité web pour les édimestres Les liensEncore une fois!Cliquez-iciVoir la suiteTélécharger le fichier
  21. 21. Accessibilité web pour les édimestres Les liensSi un lien pointe vers une page externe, spécifiez-le!
  22. 22. Accessibilité web pour les édimestresLes liens
  23. 23. Accessibilité web pour les édimestres Les liens Évitez de remplir le champ« title » sur les liens, les lecteurs d’écran les lisent!
  24. 24. Accessibilité web pour les édimestres Les images Pour les images nondécoratives, remplissez le « alt »
  25. 25. Accessibilité web pour les édimestresLes images
  26. 26. Accessibilité web pour les édimestres Les imagesPour les images décoratives, ne remplissez pas le « alt »
  27. 27. Accessibilité web pour les édimestres Les imagesToute image dans une page Web si elleillustre un schéma, un graphe, unorganigramme ou un diagramme, doitcomporter une description complète del’illustration sur la même page Web
  28. 28. Accessibilité web pour les édimestresTexte caché
  29. 29. Accessibilité web pour les édimestresTexte caché
  30. 30. Accessibilité web pour les édimestres Les imagesL’animation des gifs animés ne doit pas dépasser les 5 secondes!
  31. 31. Accessibilité web pour les édimestres Les entêtesExemple de structure valide :H1 – Titre 1 H2 – Titre 2 H3 – Titre 3 H3 – Titre 3 H2 – Titre 2 H3 – Titre 3 H4 – Titre 4
  32. 32. Accessibilité web pour les édimestresLes entêtes
  33. 33. Accessibilité web pour les édimestresLes entêtes
  34. 34. Accessibilité web pour les édimestres Les entêtes Utilisez le module FirefoxHeadingsMap pour valider vos structures d’entêtes!
  35. 35. Accessibilité web pour les édimestresHeadingsMap : Structure valide
  36. 36. Accessibilité web pour les édimestresHeadingsMap : Structure invalide
  37. 37. Accessibilité web pour les édimestres Les entêtesSouvent les édimestres ne respectent pasles structures des entêtes à cause de lataille de police des titres : « Je n’aime pasles H3, ils sont trop gros! »Dans ce cas, demandez aux intégrateursde modifier la taille de police du titres!
  38. 38. Accessibilité web pour les édimestres Les entêtesÉvitez les titres dans les listes à puces!
  39. 39. Accessibilité web pour les édimestres Les tableauxTableau simple ou complexe ?
  40. 40. Accessibilité web pour les édimestres Les tableauxTableau simple ou complexe ?
  41. 41. Accessibilité web pour les édimestres Les tableauxTableau simple ou complexe ?
  42. 42. Accessibilité web pour les édimestres Outils – Tableaux complexesPour les tableaux complexes, les édimestresdoivent remplir le champ « id » pour lestitres, et le champ « header » pour lescellules.Par défaut, le champ « header » n’existe pasdans TYPO3.
  43. 43. Accessibilité web pour les édimestresLes tableaux
  44. 44. Accessibilité web pour les édimestresLes tableaux
  45. 45. Accessibilité web pour les édimestres Les tableauxSi vos tableaux sont tropcomplexes, simplifiez les!
  46. 46. Accessibilité web pour les édimestresLes tableaux
  47. 47. Accessibilité web pour les édimestresLes tableaux
  48. 48. Accessibilité web pour les édimestresLes contenus textuels : Les abréviations Utilisez la balisedabréviation (et évitez les acronymes)
  49. 49. Accessibilité web pour les édimestresLes contenus textuels : Les abréviations
  50. 50. Accessibilité web pour les édimestresLes contenus textuels : Les abréviations
  51. 51. Accessibilité web pour les édimestresLes contenus textuels : Les abréviations
  52. 52. Accessibilité web pour les édimestres Les contenus textuels : Les abréviationsDans certains cas, les abréviations sont plusconnues que la forme complète, dans ce cas,n’utilisez pas la balise abbr!Exemple : CÉGEP
  53. 53. Accessibilité web pour les édimestres Les contenus textuels : Ordre logiqueRédigez vos contenus en respectant unordre logique.Exemple : Une nouvelle :DateTitreTexte de la nouvelleIl est préférable de placer la date à la suitedu titre!
  54. 54. Accessibilité web pour les édimestres Les contenus textuels : BalisageLes listes à puces, les blocs « blockquote » et lestableaux doivent seulement être utilisé pour leurutilisation première (énumérations, citations etprésentation de données), ces balises ne doiventjamais être utilisé que pour la présentation.
  55. 55. Accessibilité web pour les édimestresLes contenus textuels : Les listes à puces
  56. 56. Accessibilité web pour les édimestresLes contenus textuels : Les listes numérotées
  57. 57. Accessibilité web pour les édimestresLes contenus textuels : Les blockquote (citations)
  58. 58. Accessibilité web pour les édimestres Les contenus textuels : Rédaction● Utiliser un langage simple● Découper le contenu● Utiliser des phrases courtes● Utiliser de courts paragraphes● Utiliser des listes plutôt que des paragraphes How users read on the web, Jakob Nielsen
  59. 59. Accessibilité web pour les édimestres Les contenus textuels : RédactionVous pouvez utiliser un outil danalyse enligne pour savoir si vos textes sont assezsimple à lire :http://labs.translated.net/lisibilite-texteLe niveau de facilité à lire ne devrait jamaisdépassé « Moyen »
  60. 60. Accessibilité web pour les édimestres Les contenus textuels : RédactionQuand vous écrivez un contenu en une langue différente quecelle de la page, il faut spécifier le changement de langue!
  61. 61. Accessibilité web pour les édimestresLes contenus textuels : Rédaction
  62. 62. Accessibilité web pour les édimestres Les formulaires Il ne faut jamais donner devaleur par défaut pour un champ dans un formulaire
  63. 63. Accessibilité web pour les édimestresLes formulaires
  64. 64. Accessibilité web pour les édimestres Et les couleurs ? Et la taille du texte?Généralement, on ne donne jamais auxédimestres l’accès à modifier les couleurs, etla taille de la police d’écriture : Il s’agit d’untravail d’intégrateurs et de designers!
  65. 65. Accessibilité web pour les édimestres ContactCourriel : mrebai@infoglobe.caTwitter : @mow_r
  66. 66. Accessibilité web pour les édimestresMerci !

×