Upload
vanig
View
26
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Accessibilité du Web 2.0 avec et . Code Session : ACC301. Philippe BERAUD Consultant Architecte Direction Technique Microsoft France [email protected]. David Rousset Evangéliste Développeur DPE Microsoft France [email protected]. - PowerPoint PPT Presentation
Citation preview
2
Accessibilité du Web 2.0 avec et .
Code Session : ACC301Philippe BERAUDConsultant ArchitecteDirection TechniqueMicrosoft [email protected]
David RoussetEvangéliste DéveloppeurDPEMicrosoft [email protected]
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
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
La carotte…
• La population âgée est de plus en plus importante• Des millions d’utilisateurs souffrent de déficiences diverses
Vous pouvez permettre à ce type de population de bénéficier de vos produits
9
Section 508 Refresh
Section 255 Telecom
U.S. State Accessibility
United Nations G3ict (Global Initiative for Inclusive ICT)
EC – Mandate 376i2010 InitiativeMember States
AccessibilityJapan JIS-
X8341
Australia: Disability
Discrimination Act
9
UK: Disability
Discrimination Act (DDA)
OAS / L.A. / S.A Country Policies
…ou le bâton?
New Zealand Government Web
Standards
10
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)
11
Un moteur de recherche connu ressemble à un aveugle !
http://www.slideshare.net/AaronGustafson/progressive-enhancement-with-aria-accessibility-summit-2010-5324750
12
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
13
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é
17
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
18
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é TabIndex des é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
19
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 le contrôle est complètement personnalisé• Créez un focus visuel propre et ajoutez du code dans les
handler d'évènement GotFocus et LostFocus pour afficher/cacher l’indicateur visuel
21
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
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
• Attention aux couleurs et au contraste
• 8% des hommes ne peuvent faire la différence entre le rouge et le vert (aux Etats-Unis)
Accessibilité visuelle
27
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
30
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
33
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
34
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
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”><img role=“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.
37
API d’accessibilité
role=button
action=press
state=focused
value=submit query
Navigateur
Périphérique d’entrée
38
Landmark Roles vs. HTML5 Section Elements
ARIArole="banner"
role="main"role="navigation"
role="search"role="contentinfo"
role="complementary"role="form"
role="application"
HTML5 <header> ? Pas d’équivalent <nav> <input type="search">
? Pas d’équivalent <aside> <form> Pas d’équivalent
41
Potentiel : HTML5 Forms controls
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 !
45
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
47
<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
48
<SVG> et ARIA<svg width="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"/><text id="text1" x="160" y="100" font-size="40"> svg circle checkbox 1</text></svg>
51
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 !
53
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
55
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
56
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/
57
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
58
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
60
MSDN et TechNet : l’essentiel des ressources techniques à portée de clic
http://technet.com http://msdn.com
Portail administration et infrastructure pour informaticiens
Portail de ressources technique pour développeurs