Techdays 2011 – slides et ressources de la session Accessibilité d’HTML5 et Silverlight

2. Accessibilité du Web 2.0 avec et . Code Session : ACC301 Philippe BERAUD Consultant Architecte Direction Technique Microsoft France philippe.beraud@microsoft.com David Rousset Evangéliste Développeur DPE Microsoft France davrous@microsoft.com

3. Description de la session 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é.

4. Le parcours "Accessibilité Numérique" dans le cadre des Microsoft TechDays 2011 2 sessions pour faire un point ensemble Session ACC301 "Accessibilité du Web 2.0 avec HTML5 et Silverlight " Cette session !! Session ACC201 "SharePoint 2010 : le Web pour tous" A revivre prochainement en webcast

5. Objectifs et sommaire de la session Pourquoi l’accessibilité ? Silverlight et l’accessibilité HTML5 et l’accessibilité Conclusion

6. Accessibilité numériqueDe quoi s'agit-il ? L'accessibilité numérique est une nécessité… De plus en plus de personnes concernées "L’accessibilité est une condition primordiale pour permettre à tous d’exercer les actes de la vie quotidienne et de participer à la vie sociale. Aussi la loi prévoit-elle le principe d’accessibilité généralisée, quel que soit le handicap (physique, sensoriel, mental, psychique, cognitif, polyhandicap). .." Ministère de la Santé et des Solidarités (31/01/2007) …ET constitue EGALEMENT une obligation légale pour le secteur public Cf. Livre blanc "L’accessibilité de quoi s’agit-il ?" http://www.microsoft.com/downloads/details.aspx?FamilyID=b7864e09-be31-49d4-a608-9907d72e8720&displaylang=fr

7. Qu’est ce que l’accessibilité ? Cela peut représenter différentes choses en fonction des personnes Visuel Physique Audition Langage Difficultés d’apprentissage

9. Des millions d’utilisateurs souffrent de déficiences diverses Vous pouvez permettre à ce type de population de bénéficier de vos produits

10. …ou le bâton? United Nations G3ict (Global Initiative for Inclusive ICT) EC – Mandate 376 i2010 Initiative Member States Accessibility UK: Disability Discrimination Act (DDA) Japan JIS-X8341 Australia: Disability Discrimination Act Section 508 Refresh Section 255 Telecom U.S. State Accessibility OAS / L.A. / S.A Country Policies New Zealand Government Web Standards 9

11. Quels bénéfices à part les obligations légales ? Augmenter l’adoption de vos produits Améliorer l’ergonomie de vos interfaces Augmenter le « ranking » au près des moteurs de recherches (SEO)

12. Un moteur de recherche connu ressemble à un aveugle ! http://www.slideshare.net/AaronGustafson/progressive-enhancement-with-aria-accessibility-summit-2010-5324750

13. Le Web 2.0 et l’accessibilité : pas une belle histoire d’amour… L’arrivée de l’utilisation intensive du JavaScript (AJAX, jQuery, etc.) Du contenu très riche visuellement mais très difficile d’accès pour les technologies d’accessibilité Elles ne savent pas qui fait quoi Manque de sémantique Des zones dynamiques dans la page impossible « à voir » ou détecter

14. A quoi dois-je faire attention ? Au clavier Votre application doit pouvoir fonctionner sans souris … voir fonctionner sans clavier ! (Merci Kinect) Au visuel Votre application doit être « visible » à un lecteur d’écran Votre application doit pouvoir être utilisée par des personnes avec une acuité visuelle limitée A l’audio Votre media doit pouvoir être « lu » et pas uniquement être écouté

15. Regardons d’abord du côté de Silverlight

16. Silverlight Accessibilité au clavier

17. Démo Accessibilité au clavier d’une application Silverlight

18. Accessibilité au clavier Bilan Cela était joli… … mais non accessible Utilisez les contrôles pour les tabulations et le support du focus Gérez le clavier pour mettre en place des actions particulières Mais faites attention aux raccourcis claviers gérés par le navigateur par exemple

19. Permettre une navigation avec le clavier Indiquez quels contrôles peuvent recevoir le focus en spécifiant la propriété IsTabStop Précisez l’ordre de navigation par tabulation avec la propriété TabIndexdes éléments Seuls les éléments de type contrôles (héritant de Control) peuvent recevoir le focus Pour les autres éléments (images, multimédia, etc.), si vous prévoyez une accessibilité au niveau du clavier : Spécifiez une commande clavier ou un contrôle associé dans l’IHM Sinon, créez un contrôle personnalisé contenant l’élément visuel et ajouter la logique d’interaction au clavier dans celui-ci N’oubliez pas de fournir une indication visuel lors du focus de l’élément

20. Fournir les indications sur le focus Visuellement un contrôle doit montrer qu'il possède le focus Si le contrôle dérive d'un contrôle Silverlight existant Utilisez le gestionnaire visuel d'état (Visual State Manager) pour spécifier un modèle de contrôle qui définit visuellement le focus Si lecontrôle est complètement personnalisé Créez un focus visuel propre et ajoutez du code dans les handler d'évènement GotFocuset LostFocuspour afficher/cacher l’indicateur visuel

21. Silverlight Accessibilité visuelle

22. UI Automation(UIA)En 30 secondes… API d’accessibilité fournies dans Silverlight UIA expose chaque partie de l’UI, ses propriétés, son état, etc. aux applications clientes et technologies d’assistance (JAWS, NVDA, narrateur, etc.) <button x:Name="openBookButton" AutomationProperties.Name="Open Book" AutomationProperties.HelpText="Open a Daisy book from your local computer" AutomationProperties.AcceleratorKey="0" ... <button>

23. Démo Support d’un lecteur d’écran avec Silverlight

24. Accessibilité pour lecteur d’écran Bilan Utilisez les contrôles livrés par défaut et faites du « retemplate » Certains contrôles ont besoin de métadonnées supplémentaires Si vous partez de 0, créez votre propre AutomationPeer Identifiez les contrôles non textuels (par ex. des images) AutomationProperties.Name

25. Démo Application avec contrôles personnalisés

26. Accessibilité visuelle Attention aux couleurs et au contraste 8% des hommes ne peuvent faire la différence entre le rouge et le vert (aux Etats-Unis)

27. Démo Gestion du contraste élevé

28. Accessibilité visuelle Pour supporter le contraste élevé Analysez la propriété SystemParameters.HighContrast Jouez avec les styles Le Toolkit Silverlight propose un thème adapté Ne vous contentez pas de la couleur Ajoutez d’autres formes ou mise en forme du texte Zoom et large taille de police Assurez vous que votre application réagisse au zoom du navigateur Fournissez un contrôle permettant de choisir la taille de la police

29. Démo Bonnes pratiques : Lecteur Silverlight DAISY sous licence libre

30. Silverlight Accessibilité audio

31. Accessibilité audio Utilisez des lecteurs média prêt à l’emploi Accessible Media Project (AMP) sur Codeplex http://amp.codeplex.com/ Expression Encoder Utilisez des sous-titres

32. Démo Player AMP

33. Regardons maintenant du côté de HTML5 et WAI-ARIA

34. HTML5 : le futur La prochaine version du markup HTML De nouvelles balises permettant de clarifier les rôles Beaucoup de parties ne sont pas encore implémentées voire même encore statuées Certains parlent de 2022 ! De nombreuses nouveautés permettront aux développeurs web de créer du contenu accessible… et aussi totalement inaccessible La spécification est énorme ! Environ 800 pages

35. HTML5 : un gros potentiel Nouveaux éléments sémantiques <nav>, <article>, <footer>, etc. Fournirons une structure sémantique jusqu’à présent inexistante Pas encore implémentés dans tous les navigateurs Pas encore supportés par les technologies d’assistance

36. Futur potentiel Avant en HTML4 Après en HTML5

37. WAI-ARIA : le présent Permet l’ajout d’un nom, d’un rôle, d’un état à n’importe quel élément via des attributs <div role=“slider”> <input aria-required=“true”> <imgrole=“presentation”> <input type=“text” aria-haspopup=“true”> Toujours en cours de développement mais de nombreuses parties sont stables et implémentées dans les navigateurs et les technologies d’assistance Peut être utilisé avec HTML, XHTML, SVG, etc.

38. API d’accessibilité Périphérique d’entrée role=button Navigateur state=focused value=submit query action=press

40. Pas d’équivalent

41. <nav>

42. <input type="search"> ?

43. Pas d’équivalent

44. <aside>

45. <form>

47. Accessibilité au clavier

48. Potentiel : HTML5 Formscontrols Input type="number" Input type=“date" Input type=“range" Très bon support dans Opera, assez bon dans Chrome, léger dans Firefox 4 et inexistant dans IE9 mais… Inaccessible dans tous ! 

49. Démo Web Forms dans Opera et chez les autres

50. Démo WAI-ARIA

51. Accessibilité visuelle

52. HTML5 <canvas> Super sexy pour les personnes voyantes ! Mais totalement invisible dans le DOM et donc pour les personnes malvoyantes… L’unique alternative consiste donc à dupliquer le contenu pour le rendre accessible Ne mettez pas ce contenu dans le tag <canvas> mais en dehors

53. Démo HTML5 <canvas> avec contenu alternatif

54. <SVG> Toujours aussi sexy pour les voyants ! Et déjà plus sympa pour les malvoyants car visible dans le DOM  A privilégier à <canvas> si l’accessibilité est une cible Doit être utilisé avec ARIA en complément

55. <SVG> et ARIA <svgwidth="6cm"height="5cm"viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"version="1.1"> <desc>SVG checkbox buttons</desc> <circle id="cb1"role="checkbox"aria-checked="false" onclick="toggle(evt.target)" aria-label="first svg circle checkbox" cx="100"cy="100"r="20" stroke="black"stroke-width="5" fill="white"/> <textid="text1"x="160"y="100"font-size="40"> svg circle checkbox 1 </text> </svg>

56. Démo <SVG> avec attributs ARIA

57. Accessibilité audio

58. HTML5 <audio> & <video> Permet de s’affranchir des plug-ins Silverlight ou Flash pour le contenu audio/vidéo Les lecteurs ont un support disparate du clavier L’unique alternative consiste donc faire un transcript en texte pour le rendre le contenu accessible A nouveau, ne pas mettre ce contenu dans le tag <audio> ou <video> mais en dehors  Avantage : indexation par les moteurs de recherches !

59. Démo Lecteur HTML <audio> accessible au clavier Lecteur HTML <video> avec sous-titres

60. Conclusion L’accessibilité pour le contenu Web 2.0 s’améliore et HTML5 est plein de promesses ! Mais il y a beaucoup de choses qui sont difficilement accessibles malgré tout Silverlight semble pour l’instant mieux supporté par les technologies d’assistance et vous permet d’avoir le même niveau de support cross-navigateurs L’accessibilité se conçoit dès le début du projet, c’est plus difficile en cours de route… L’accessibilité vous apporte des avantages concurrentiels certains

61. Annonce Séminaire "SharePoint 2010 à l'heure des WCAG 2.0, du RGAA et d'AccessiWeb 2.0"

62. Implémenter l’Accessibilité dans vos solutions SharePoint 2010 Séminaire gratuit "SharePoint 2010 à l'heure des WCAG 2.0, du RGAA et d'AccessiWeb 2.0" Organisé en partenariat avec l'Association BrailleNet et HiSoftware Avec une journée pratique centrée sur des ateliers techniques 3 sessions 22 et 23 mars 2011 18 et 19 avril 2011 14 et 15 juin 2011 Inscriptions http://inova.snv.jussieu.fr/evenements/colloques/colloques/72_index_fr.html

63. Références utilisées HTML5 http://www.slideshare.net/stevefaulkner/html5-accessibility-is-it-ready-yet http://www.slideshare.net/AaronGustafson/progressive-enhancement-with-aria-accessibility-summit-2010-5324750 http://www.slideshare.net/stevefaulkner/html5-waiaria-happy-families Introducing HTML5 de Bruce Lawson et Remy Sharp Silverlight Sessions MIX09 et MIX10 Silverlight Accessibility Issues and Proposed Guidelines by Hitachi http://www.hitachi.co.jp/universaldesign/silverlight/en/guideline.html Making Silverlight Applications Accessible http://www.silverlight.net/learn/quickstarts/accessibility/

64. Plus d’informations "Etre meilleur ensemble" Séminaire "Web SharePoint 2010 à l'heure des WCAG 2.0, du RGAA et d'AccessiWeb 2.0" http://www.microsoft.com/france/accessibilite/products/office2010/sharepoint2010.aspx Guide compagnon http://download.microsoft.com/documents/France/accessibilite/2010/SharePoint_2010-WCAG_2_0-RGAA-AccessiWeb_2_0.docx Centre de développement Accessibilité MSDN France http://msdn.microsoft.com/fr-fr/dd759316.aspx Son équivalent MSDN US http://msdn.microsoft.com/en-us/windows/bb735024.aspx

65. Plus d’informations Weblog Microsoft Windows UI Automation http://blogs.msdn.com/winuiautomation/ Site Microsoft France Accessibilité, technologies pour tous http://www.microsoft.com/france/accessibilite UI Automation : Développer au quotidien des applications accessibles sous Windows http://www.microsoft.com/france/accessibilite/products/windowsvista/developper.aspx

66. Questions / Réponses

67. MSDN et TechNet: l’essentiel des ressources techniques à portée de clic Portail administration et infrastructure pour informaticiens Portail de ressources technique pour développeurs http://technet.com http://msdn.com