Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Accessibilité d_HTML5 et Silverlight - ACC301
1.
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
8.
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é
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
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>
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
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)
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
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
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
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.
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 !
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
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>
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
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
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
Notes de l'éditeur
Best practices : Guidelines and guidance for keyboard user interface design dans MSDN : http://msdn.microsoft.com/en-us/library/ms971323.aspx
Each HTML feature has a role, name, state and other property values that need to be hooked into the accessibility APIs by the browser. Assistive technology can then use this information to convey a representation of the feature to users.
SPEAKERS PLEASE NOTE: our standard timing for your availability for Q&A at the Ask-the-Experts pavilion will be the next lunch-break following your session, and variations from this standard will be scheduled based on your availability and for all Friday afternoon sessions.