2

Accessibilité du Web 2.0 avec et .

Code Session : ACC301Philippe BERAUDConsultant ArchitecteDirection TechniqueMicrosoft Francephilippe.beraud@microsoft.com

David RoussetEvangéliste DéveloppeurDPEMicrosoft Francedavrous@microsoft.com

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é

14

Regardons d’abord du côté de Silverlight

15

Silverlight

Accessibilité au clavier

16

DémoAccessibilité au clavier d’une application Silverlight

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

20

SilverlightAccessibilité visuelle

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>

22

DémoSupport d’un lecteur d’écran avec Silverlight

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

24

DémoApplication avec contrôles personnalisés

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

26

DémoGestion du contraste élevé

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

28

DémoBonnes pratiques :Lecteur Silverlight DAISY sous licence libre

29

SilverlightAccessibilité audio

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

31

DémoPlayer AMP

32

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

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

35

Futur potentiel

Avant en HTML4 Après en HTML5

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

39

Pragmatisme

HTML4 + ARIA HTML5 + ARIA

40

Accessibilité au clavier

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 !

42

DémoWeb Forms dans Opera et chez les autres

43

DémoWAI-ARIA

44

Accessibilité visuelle

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

46

DémoHTML5 <canvas> avec contenu alternatif

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>

49

Démo<SVG> avec attributs ARIA

50

Accessibilité audio

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 !

52

DémoLecteur HTML <audio> accessible au clavierLecteur HTML <video> avec sous-titres

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

54

AnnonceSéminaire "SharePoint 2010 à l'heure des WCAG 2.0, du RGAA et d'AccessiWeb 2.0"

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

59

Questions / Réponses

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