palais descongrèsParis7, 8 et 9février 2012
Accessibilité du Web 2.0 avec HTML5Code Session : ACC301Aurélien LEVY    Thibault LANSSADETemesis          FullSIX
Le parcours "Accessibilité Numérique" dansle cadre des Microsoft TechDays 2012   2 sessions pour faire un point ensemble  ...
Objectifs de la session   Partager une même compréhension de l’accessibilité   S’interroger sur les apports d’HTML5 dans c...
Accessibilité, HTML5 et ARIA   Que faut-il en comprendre et en retenir ?1
Aurélien LEVYTemesis général et expert accessibilité  Directeur  Président du WaSP-ILG France  Corédacteur du RGAA (Référe...
Accessibilité pour qui ? P.O.U.R vous, dès demain ! 30% de la population de +65 ans en 2020
Accessibilité pour qui ? P.O.U.R tous les handicaps Perceptible, Operable, Understandable, Robuste
Accessibilité pourquoi ? P.O.U.R des raisons morales, économiques, juridiques, concurrences
HTML5 néfaste ou bénéfique pourlaccessibilité ? Attention à leffet nouveauté !
HTML5 néfaste ou bénéfique pourlaccessibilité ? Attention au support !
HTML5 néfaste ou bénéfique pourlaccessibilité ? Attention aux nouveaux usages !
HTML5 néfaste ou bénéfique pourlaccessibilité ? + de sens <nav>, <article>, <aside>, <header>, <footer>, etc. + de contenu...
HTML5 néfaste ou bénéfique pourlaccessibilité ? Support navigateur et application mobile Android, iOS, Windows Phone
ARIA HTML5 Compatible avec ARIA ? ARIA : Accessible Rich Internet Application  rôle, état, propriété pour les aides techn...
ARIA Le double effet "Kiss Cool" !  HTML5                 ARIA  required              aria-required  draggable            ...
DEMOmail dojo
DEMOLandmarks WordPress
DEMOChat ideance
Mise en place de l’accessibilité dans lesprojets   Partageons à présent deux   expériences2
Une première expérience : un simple    formulaireContexte                       Développement   Client institutionnel    ...
Une première expérience : un simple    formulaireLe bilan Objectif atteint : un formulaire « correctement accessible » Un ...
Une prise de conscience… L’accessibilité, ça ne s’improvise PAS !      Plus de 130 critères dans 13 catégories      Diff...
Une prise de conscience… L’accessibilité, ça demande de l’habitude !      Utilisation des aides techniques      Intégrat...
…ET des actions  Formations AccessiWeb pour 3 développeurs      3500€/pers + 7-8 j  Evangélisation / vulgarisation en int...
Une seconde expérience : la refonte    complète (front +back)Contexte :                      Développement :   Client non...
Une seconde expérience : la refonte    complète (front +back)Le bilan Délai / budget tenu Implication forte de toute la ch...
Que faut-il en retenir ? L’accessibilité, ça ne s’improvise PAS !       Surtout pour les catégories de critères         ...
Que faut-il en retenir ?    L’accessibilité est globale au projet       Responsabilisation des graphistes, développeurs, ...
Que faut-il en retenir ?    Les critères de présence sont faciles à intégrer       Donc pourquoi ne pas le faire systémat...
Mis en place de l’accessibilité   Une première expérience : un simple formulaire   Prise de conscience et actions       F...
ANNONCEAccessibility First StepDiscussion autour des consignes de bases à suivre obligatoirement avant decommencer à trava...
palais descongrèsParis7, 8 et 9février 2012
En guise de conclusion Innovez avec HTML5      mais innovez accessible ! :)
Pour aller plus loin  Chaque semaine, les DevCamps               Prochaines sessions des Dev  ALM, Azure, Windows Phone, H...
Pour aller plus loin    "Etre meilleur ensemble"    Centre de développement Accessibilité MSDN France       conseils, des...
Pour aller plus loin    Tester l’accessibilité de ses contenus et la compatibilité    avec les technologies dassistance   ...
Pour aller plus loin    Site de l’institut de l’accessibilité numérique       http://accessibilite-numerique.org    Site ...
Pour aller plus loin    Site J’en crois pas mes yeux       http://www.jencroispasmesyeux.com/site/
Microsoft France39, quai du président Roosevelt  92130 Issy-Les-Moulineaux  www.microsoft.com/france
Prochain SlideShare
Chargement dans…5
×

Accessibilité du Web 2.0 : HTML5 et WAI-ARIA

814 vues

Publié le

Les technologies liés au « Web 2.0 » introduisent de nombreuses fonctionnalités qui aideront les développeurs à mettre à disposition plus facilement des contenus accessibles MAIS également non accessibles. HTML 5, la nouvelle version d’HTML, n’échappe pas à ce constat. Parfois, cela peut signifier un choix ou peu de travail supplémentaire pour rendre une fonctionnalité utile et utilisable de tous. Que faut-il en retenir ? Dans ce contexte, cette session s’intéresse à l’usage des rôles et propriétés WAI-ARIA dans ce contexte : s’agit-il d’une redondance dans HTML ? Qu’en est-il par ailleurs en termes de support dans IE 9 et d’exposition aux technologies d’assistance ? La session s’intéresse à ces dimensions ainsi qu’à l’outillage disponible pour tester la compatibilité de ces technologies avec les API d'accessibilité.

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
814
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Accessibilité du Web 2.0 : HTML5 et WAI-ARIA

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Accessibilité du Web 2.0 avec HTML5Code Session : ACC301Aurélien LEVY Thibault LANSSADETemesis FullSIX
  3. 3. Le parcours "Accessibilité Numérique" dansle cadre des Microsoft TechDays 2012 2 sessions pour faire un point ensemble  Session ACC301 "Accessibilité du Web 2.0 avec HTML5"  Cette session !!  Session ACC201 "Adaptation du poste de travail Windows"  A revivre prochainement en webcast
  4. 4. Objectifs de la session Partager une même compréhension de l’accessibilité S’interroger sur les apports d’HTML5 dans ce contexte Préciser le rôle d’ARIA, un autre standard Illustrer la réflexion avec des applications Web et mobile accessibles Partager les retours d’expérience d’une "Web Agency" sur la mise en place de l’accessibilité
  5. 5. Accessibilité, HTML5 et ARIA Que faut-il en comprendre et en retenir ?1
  6. 6. Aurélien LEVYTemesis général et expert accessibilité Directeur Président du WaSP-ILG France Corédacteur du RGAA (Référentiel Général d’Accessibilité pour les Administrations)
  7. 7. Accessibilité pour qui ? P.O.U.R vous, dès demain ! 30% de la population de +65 ans en 2020
  8. 8. Accessibilité pour qui ? P.O.U.R tous les handicaps Perceptible, Operable, Understandable, Robuste
  9. 9. Accessibilité pourquoi ? P.O.U.R des raisons morales, économiques, juridiques, concurrences
  10. 10. HTML5 néfaste ou bénéfique pourlaccessibilité ? Attention à leffet nouveauté !
  11. 11. HTML5 néfaste ou bénéfique pourlaccessibilité ? Attention au support !
  12. 12. HTML5 néfaste ou bénéfique pourlaccessibilité ? Attention aux nouveaux usages !
  13. 13. HTML5 néfaste ou bénéfique pourlaccessibilité ? + de sens <nav>, <article>, <aside>, <header>, <footer>, etc. + de contenus <video>, <audio>, <canvas>, etc. + dinformations date, tel, email, required, etc.
  14. 14. HTML5 néfaste ou bénéfique pourlaccessibilité ? Support navigateur et application mobile Android, iOS, Windows Phone
  15. 15. ARIA HTML5 Compatible avec ARIA ? ARIA : Accessible Rich Internet Application  rôle, état, propriété pour les aides techniques : <ul role="tablist"> <li role="presentation"> <a id="tab1" href="#demo" aria-controls="demo" role="tab" aria-selected="true" tabindex="0">Dogs</a> </li> … <div id="demo" role="tabpanel" aria-hidden="false" aria-expanded="true" aria- labelledby="tab1"> <h2>Dogs</h2>…
  16. 16. ARIA Le double effet "Kiss Cool" ! HTML5 ARIA required aria-required draggable aria-grabbed a, img, button link, img, button h1, h2, h3 aria-level
  17. 17. DEMOmail dojo
  18. 18. DEMOLandmarks WordPress
  19. 19. DEMOChat ideance
  20. 20. Mise en place de l’accessibilité dans lesprojets Partageons à présent deux expériences2
  21. 21. Une première expérience : un simple formulaireContexte Développement Client institutionnel  Méconnaissance des Version accessible d’un critères module Flash  Problème de structure des Pas de réelle compétence formulaires en interne  Gestion des erreurs Temps estimé : 2 jours ignorées  Beaucoup d’approximation  Beaucoup de fausses bonnes idées
  22. 22. Une première expérience : un simple formulaireLe bilan Objectif atteint : un formulaire « correctement accessible » Un peu d’expérience acquise ! :) 5 jours de travail  dépassement budget/planning Beaucoup d’aller-retour avec l’expert Un code pas très propre…
  23. 23. Une prise de conscience… L’accessibilité, ça ne s’improvise PAS !  Plus de 130 critères dans 13 catégories  Difficulté de compréhension de certains critères L’accessibilité, ça n’est PAS une surcouche  Coté CMS : changement du modèle de données (ajout de champs)  Coté Front : un js mal pensé est à refaire
  24. 24. Une prise de conscience… L’accessibilité, ça demande de l’habitude !  Utilisation des aides techniques  Intégration des notions de contexte
  25. 25. …ET des actions Formations AccessiWeb pour 3 développeurs  3500€/pers + 7-8 j Evangélisation / vulgarisation en interne Intégration des critères de présence comme base de développement Ecriture des scripts avec orientation accessible (non intrusif, sémantique)  Séparation stricte fond / forme / comportement  Pas d’action forte, ajustement au fur et à mesure
  26. 26. Une seconde expérience : la refonte complète (front +back)Contexte : Développement : Client non soumis au RGAA  Meilleure anticipation des Site complet (1000 pages, contraintes (présence + js) +10 templates)  Adaptation graphique Graphisme avancé, (problème de cohérence, animation, interaction de contraste) Labellisation Argent demandée  Quelques erreurs (image texte, structure,  Beaucoup plus ambitieux changement de langue, css désactivée…)
  27. 27. Une seconde expérience : la refonte complète (front +back)Le bilan Délai / budget tenu Implication forte de toute la chaîne de production Qualité de développement finale Problème avec les critères de pertinence PDF existant à refaire Lourdeur de gestion des vidéos (sous-titre + transcript) Erreurs dans la gestion des événements clavier.
  28. 28. Que faut-il en retenir ? L’accessibilité, ça ne s’improvise PAS !  Surtout pour les catégories de critères  Médias  Vidéo  Fichier joint dans un format accessible  Scripts  Gestion du clavier et du focus  Fonctionnement sans script
  29. 29. Que faut-il en retenir ? L’accessibilité est globale au projet  Responsabilisation des graphistes, développeurs, manager et contributeurs L’accessibilité dès le début  Plus simple à mettre en œuvre lors de la conception initiale  En partie prêt pour une labellisation future La labellisation est jusqu’au-boutiste  La perfection est attendue, mais ça va s’améliorer (MIPAW) Mais l’accessibilité reste un bon guide pour le projet  Qualité finale, implication des équipes
  30. 30. Que faut-il en retenir ? Les critères de présence sont faciles à intégrer  Donc pourquoi ne pas le faire systématiquement ? Les critères de pertinence nécessite une formation des contributeurs  Ils seront garant de la pertinence des textes, et à ce titre doivent être formé/guidé Pas d’improvisation mais pas de défis irréalisables !
  31. 31. Mis en place de l’accessibilité Une première expérience : un simple formulaire Prise de conscience et actions  Formation  Evangélisation / explication / vulgarisation  Modifications des processus Une seconde expérience : la refonte complète  Difficultés rencontrées  Difficultés anticipées !
  32. 32. ANNONCEAccessibility First StepDiscussion autour des consignes de bases à suivre obligatoirement avant decommencer à travailler réellement sur laccessibilité pour un intégrateur webhttps://checklists.opquast.com/firststepv1/workshop/
  33. 33. palais descongrèsParis7, 8 et 9février 2012
  34. 34. En guise de conclusion Innovez avec HTML5 mais innovez accessible ! :)
  35. 35. Pour aller plus loin Chaque semaine, les DevCamps Prochaines sessions des Dev ALM, Azure, Windows Phone, HTML5, Camps 10 février 2012 Live Meeting Open Data - Développer des applications riches avec le protocole Open Data OpenData 16 février 2012 Live Meeting Azure series - Développer des applications sociales sur la plateforme Windows Azure  http://msdn.microsoft.com/fr- 17 février 2012 Live Meeting Comprendre le canvas avec Galactic et la librairie three.js fr/devcamp 21 février 2012 Live Meeting La production automatisée de code avec CodeFluent Entities 2 mars Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, Live Meeting 2012 iOS et Android 6 mars Live Meeting Nuget et ALM Téléchargement, ressources et 2012 9 mars Live Meeting Kinect - Bien gérer la vie de son capteur toolkits : RdV sur MSDN 2012 13 mars Live Meeting Sharepoint series - Automatisation des tests 2012  http://msdn.microsoft.com/fr-fr/ 14 mars 2012 Live Meeting TFS Health Check - vérifier la bonne santé de votre plateforme de développement 15 mars Azure series - Développer pour les téléphones, les tablettes et le cloud Live Meeting 2012 avec Visual Studio 2010 16 mars Applications METRO design - Désossage en règle dun template METRO Les offres à connaître 2012 20 mars Live Meeting javascript Retour dexpérience LightSwitch, Optimisation de laccès aux données, Live Meeting  90 jours d’essai gratuit de Windows 2012 23 mars Intégration Silverlight Live Meeting OAuth - la clé de lutilisation des réseaux sociaux dans votre application Azure www.windowsazure.fr 2012 Jusqu’à 35% de réduction sur Visual
  36. 36. Pour aller plus loin "Etre meilleur ensemble" Centre de développement Accessibilité MSDN France  conseils, des outils, des méthodes afin de faire enfin de l’accessibilité numérique une réalité du quotidien, que ce soit dans la conception de sites Web, de documents ou d’applications  http://msdn.microsoft.com/fr-fr/dd759316.aspx  Son équivalent MSDN US  http://msdn.microsoft.com/en-us/windows/bb735024.aspx
  37. 37. Pour aller plus loin Tester l’accessibilité de ses contenus et la compatibilité avec les technologies dassistance  Suppose un outillage d’inspection pour les propriétés d’accessibilité Weblog Microsoft Windows Automation  Cf. billet Windows Automation API SDK Tools  Ex. AccChecker, un outil de détection de problèmes d’accessibilité avec MSAA  Ex. UI Verify, un outil de test de fournisseurs UIA  Mais aussi Inspect32 et UI Spy
  38. 38. Pour aller plus loin Site de l’institut de l’accessibilité numérique  http://accessibilite-numerique.org Site Web AccessiWeb  http://www.accessiweb.org Site Web Microsoft France Accessibilité pour tous  http://www.microsoft.com/france/accessibilite/  Son équivalent US  http://www.microsoft.com/enable/
  39. 39. Pour aller plus loin Site J’en crois pas mes yeux  http://www.jencroispasmesyeux.com/site/
  40. 40. Microsoft France39, quai du président Roosevelt 92130 Issy-Les-Moulineaux www.microsoft.com/france

×