11 Conception de sites Web accessibles avec les technologies Code Session : ACN201 Philippe BERAUD Consultant Architecte Direction Technique Microsoft.

Présentation au sujet: "11 Conception de sites Web accessibles avec les technologies Code Session : ACN201 Philippe BERAUD Consultant Architecte Direction Technique Microsoft."— Transcription de la présentation:

1 11 Conception de sites Web accessibles avec les technologies Code Session : ACN201 Philippe BERAUD Consultant Architecte Direction Technique Microsoft France philippe.beraud@microsoft.com Julien Chable Expert Kelios Solutions julien.chable@kelios-solutions.com http://www.kelios-solutions.com Michel HOËL Directeur technique Expert Accessibilité Urbilog m.hoel@urbilog.fr http://www.urbilog.fr

2 22 Description de la session Cette session co-animée avec les société Urbilog et Kelios- Solutions permet de comprendre comment concevoir des sites Web accessibles avec les technologies SharePoint et en vérifier le niveau d’accessibilité avec un outil comme Ocawa d’Urbilog. Cette session aborde, dans un premier temps, la version 2007 et décrit un cas client. Elle présente les ressources complémentaires de la version 2007 comme le Kit d’accessibilité pour SharePoint (AKS) et l’éditeur de texte riche accessible (aRTE) qui permettent de constituer, le cas échéant, un socle de travail. La session s’intéresse dans un second temps aux évolutions en termes d’accessibilité introduite par SharePoint 2010.

3 33 Le parcours "Accessibilité Numérique" dans le cadre des Microsoft TechDays 2010 3 sessions pour faire un point ensemble Session ACN201 "Conception de sites Web accessibles avec les technologies SharePoint 2007 et 2010" Cette session !! Session ACN102 "Créer un livre audio numérique MP3 à l'aide de Microsoft Office Word 2007/2010" Aujourd'hui de 17h30 à 18h30 Session ACN103 "L’accessibilité du Web : enjeux et impacts sur la société numérique française" Aujourd'hui de 13h00 à 14h00, à revivre prochainement en Session Web

4 44 Objectifs et sommaire de la session L'accessibilité pour qui, pour quoi ? Faire un point sur l'accessibilité de SharePoint 2007… …Et sur le kit d'accessibilité AKS 2.0 : De quoi s'agit-il ? Que faut-il en attendre ? Discuter ensemble d'un retour d'expérience Client Présenter les axes d'évolutions de SharePoint 2010 en termes d'accessibilité

5 55 Accessibilité numérique De quoi s'agit-il ?

6 66 Accessibilité de SharePoint 2007

7 77 Vidéo Nouveau site de gestion de contenu (CMS) du RNIB (Royal National Institute of Blind People) http://www.rnib.org.uk/Pages/Home.asp

8 88 Accessibilité de SharePoint 2007 Comment rendre son site SharePoint accessible ? Cf. Guide "Concevoir et développer des sites Web accessibles avec les technologies MOSS 2007" v2.1 http://msdn.microsoft.com/fr-fr/dd759316.aspx Partir d'une feuille blanche (enfin presque) Cf. billet "Minimal or Base Master Pages" http://www.heathersolomon.com/blog/articles/BaseMasterPages.aspx S'appuyer sur l'un des kits disponibles pour SharePoint 2007 Ex. HiSoftware Accessibility Kit for SharePoint 2007 (AKS) Cf. "Microsoft Announces Accessibility Kit for Microsoft Office SharePoint Server 2007" http://www.hisoftware.com/press/10-5-07RNIB_AKS.html

9 99 AKS 2.0 Kit d'accessibilité pour SharePoint 2007

10 10 AKS 2.0 Kit d'accessibilité pour SharePoint 2007

11 11 AKS 2.0 Kit d'accessibilité pour SharePoint 2007 Adaptateur de contrôle Utilisé dans ASP.NET 2.0 pour intercepter le source HTML avant qu'il ne soit restitué et en altérer sélectivement la sortie Programmable et extensible pour réaliser une ou plusieurs fonctions Ex. CSS Friendly Control Adapters http://www.codeplex.com/cssfriendly Cf. Billet "CSS Friendly Control Adapters in SharePoint 2007 (A Walk- Through)" http://blog.drisgill.com/2007/03/css-friendly-control-adapters-in.html 24 + 1 adaptateurs de contrôle AKS 1.x S'appuient sur cette fonctionnalité pour altérer sélectivement la sortie en vue d'en améliorer l'accessibilité Documentés de façon à pouvoir être utilisé dans de multiples scénarios Cette méthodologie peut être utilisée pour du code personnalisé code

12 12 AKS 2.0 Kit d'accessibilité pour SharePoint 2007

13 13 Editeur de texte riche aRTE

14 14 Quelques kits additionnels… pour SharePoint 2007 uAKS Une branche non-officielle du projet AKS http://aks.codeplex.com/ SPWorks ARF (Alternative Rendering Framework for SharePoint) http://www.spworks.co.uk/arf/accessibility.aspx Content and Code SAS (SharePoint Accessibility Solution) http://www.contentandcode.com/solutions/Pages/accessibility.aspx Etc.

15 15 Pour aller au-delà… Compléments HiSoftware Prise en compte de l'accessibilité directement au niveau de l'EDI, de la gestion de contenu (CMS) et des workflows http://www.hisoftware.com/MOSS/MOSSsolutions.htm

16 16 Retour d'expérience Illustration d'un cas client

17 17 Urbilog http://www.urbilog.fr Qui sommes-nous ? Société de service basée dans le Nord de la France (Roubaix) Spécialisée dans l’accessibilité du Web Quels services délivrons nous ? Audit d’Accessibilité de site/application Web Préconisations de mise en conformité par rapport à un référentiel (WCAG, RGAA, Section 508, etc.) Formation des équipes techniques Développement Conseil sur plusieurs plateformes / technologies : SharePoint, WebSphere, PeopleSoft, Joomla, etc.

18 18 Retour d'expérience Une mise en accessibilité d’un Intranet rédactionnel d’un grand Groupe Travail à fournir Fabrication d’une maquette HTML avec les pages les plus représentatives du site Rendre les pages accessibles Intégrer dans l’environnement SharePoint l’ensemble des éléments de cette maquette Page d’accueil Les gabarits Puis adapter les différents contrôles : Menu, Recherche, Recherche avancée, les éléments Flash, les vidéos, etc.

19 19 Mise en accessibilité de chaque page

20 20 Mise en accessibilité de chaque page

21 21 Page d’accueil

22 22 Page d’accueil avec CSS désactivées

23 23 Problèmes de Mise en accessibilité

24 24 Accessibilité des menus déroulants

25 25 Accessibilité des menus en accordéon Ici pas d’utilisation de JQuery, les déclarations CSS ont suffis !

26 26 Accessibilité de la Recherche simple

27 27 Accessibilité d’autres éléments Ce principe a également été adopter pour chaque élément de page sensible pour l’accessibilité : La recherche avancée et résultats de recherche Le plan de site La notion de "popin"  une solution avec JQuery Les éléments Flash, vidéo, etc. auxquels il faut associer des informations alternatives

28 28 Derniers ajustements A l’origine, SharePoint favorise la présentation sous forme de tableaux Certains éléments rendus accessibles par les travaux précédents se retrouvent malheureusement à l’intérieur de blocs non accessibles Le principe de la correction via des adaptateurs de contrôle : Capter le flux HTML avant génération Remplacer les éléments non désirés par ceux nécessaires à notre version accessible

29 29 Editeur riche Le site à rendre accessible a une partie CMS Donc utilisation d’un éditeur riche Le choix du client à l’origine du projet : Telerik RadEditor

30 30 Diagnostique accessibilité de l’éditeur riche Cet outil ne favorise pas du tout la mise en accessibilité des contenus : Présentation en tableau obligatoire Ajout d’attributs non conformes Il ne fait pas toujours ce que l’on veut obtenir … La seule solution pour obtenir un contenu complètement accessible est de ne plus du tout utiliser les outils WYSIWYG de RadEditor, mais plutôt de taper directement le code source voulu ! Et même dans ce cas des balises "indélicates" sont générées par l’outil et perturbe l’accessibilité ! L’idéal aurait été d’avoir un éditeur de texte enrichi générant un contenu accessible

31 31 Editeur riche aRTE Lancé en mars 2009 par HiSoftware, aRTE se veut un éditeur riche accessible pour MOSS 2007 et WSS 3.0 Il facilite la création de contenus Web plus accessibles Hi Software est également concepteur d’AKS, le Kit d'accessibilité pour SharePoint Nous avons testé cet éditeur et effectivement : Il produit du contenu accessible, notamment les tableaux, images, objets, etc. Il produit du code XHTML valide Il respecte WAI-ARIA du W3C Il fonctionne sur plusieurs navigateurs Mais attention à bien sensibiliser les rédacteurs afin de créer de façon optimale un contenu accessible

32 32 Bilan de la mise accessibilité Avec SharePoint 2007, la mise en accessibilité peut être qualifiée de complexe Surtout si on y intègre des zones éditables Si on doit utiliser un Editeur riche, prendre aRTE Tout cela sera facilité avec Microsoft SharePoint 2010

33 33 Objectifs de SharePoint 2010 Logiciel/Fondation accessible Utilisable Compréhensible Sémantique Contextuel Support des standards

34 34 Standards pris en considération WCAG 2.0 (Web Content Accessibility Guidelines) (niveau AA) Recommandation W3C/WAI en date du 11 décembre 2008 Traduction française agréée : http://www.braillenet.org/accessibilite/wcag20/wcag20_fr/fr_WCAG20 _24avr09.htm La nouvelle référence pour le contenu accessible Les technologies autres que le HTML sont aussi traitées : ex. Silverlight 2/+ http://www.w3.org/WAI/GL/WCAG20/implementation- report/Silverlight_accessibility_support_statement Section 508 + VPAT Voluntary Product Accessibility Template Bonnes pratiques vis-à-vis des Technologies d'assistance

35 35 Technologies "Classique" Champs d'entrée HTML Libellé de contrôle Attribution appropriée Alternatives textuelles, Titres Organisation du contenu avec les titres Liens pour outrepasser un contenu répétitif Raccourcis Clavier Mode "Plus accessible" Accès aux fonctionnalités par les technologies d'assistance indépendamment des capacités du navigateur Ex. Support ou non de WAI-ARIA

36 36 Technologies WAI-ARIA Accessible Rich Internet Applications Initiative du W3C pour répondre à la problématique DHTML/AJAX/JavaScript HTML 5 devrait incorporer ces fonctionnalités Axes d’amélioration d’ARIA Utilisation des technologies Web sémantiques : "Sémantique de partout" Séparation du contenu et de la présentation Permettre la surveillance passive d’une application par les technologies d’assistance Internationalisation Etc.

37 37 Technologies WAI-ARIA Extensions ARIA pour rendre accessible le contenu des sites Web dynamiques : Attributs d’états et de propriétés : focus, états et propriétés associés directement aux APIs d’accessibilité des technologies d’assistance Attributs de rôle : information sémantique à propos d’un élément Repères de rôle de document : ensemble de valeurs d’attributs de rôle conçu pour désigner des parties de document Taxonomie des valeurs de rôle : permet de définir de façon extensible des rôles Nécessaire pour permettre aux technologies d’assistance d’associer les bonnes propriétés à un rôle non standard

38 38 Technologies

39 39 Détails Evolution de la restitution Cf. billet "SharePoint 2010 Changes in Rendering" http://www.andrewconnell.com/blog/archive/2009/11/04/sharepoi nt-2010-changes-to-rendering.aspx Ex. Rendu SharePoint 2007 pour la navigation globale <table class="topNavItem zz2_Globalnav_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <a class="zz2_Globalnav_1 topNavItem zz2_GlobalNav_3" href="/sites/Publishing/PressReleases/Pages/default.aspx" style="border-style:none;font-size:1em;">Press releases

40 40 Détails Evolution de la restitution Rendu SharePoint 2010 correspondant <a class="static selected menu-item" href="/sites/Publishing/Pages/default.aspx" accesskey="1"> Publishing Currently selected <a class="static menu-item" href="/sites/Publishing/PressReleases/Pages/default.aspx"> Press Releases

41 41 Détails Menus contextuels Raccourcis clavier du ruban Ctrl+[ – Saut aux onglets Ctrl+] – Saut à la dernière commande MAJ+Touche Flèche – Saut entre les groupes de commande

42 42 Détails Raccourcis clavier de navigation Touches d'accès S – Saut vers la boîte de recherche W – Menu Bienvenu et Web parts X – Aller vers le contenu principal Y – Aller vers le ruban 1 – Aller vers la navigation 3 – Voir le contenu Tout le site 6 – Saut vers l'aide / – Menu Actions du Site

43 43 Détails Sémantique ARIA Ruban Alertes Edition de texte Edition de grille Formulaires riches Dialogues

44 44 Exemple ARIA Editeur de texte riche <div… role="textbox" aria-haspopup="true" aria-autocomplete="both" aria-haspopup="true">

45 45 Exemple ARIA Ruban <a… role="button" aria- describedby="Ribbon.EditingTools.CPEditTab.Clipboard.Paste.Menu.Paste.Paste_ToolTip">

46 46 Exemple ARIA Info bulles améliorées <span… id="Ribbon.EditingTools.CPEditTab.Clipboard.Paste.Menu.Paste.Pa ste_ToolTip" role="tooltip" aria-hidden="false">

47 47 Exemple ARIA Dialogues <div… role="dailog" aria-labeledby="dialogTitleSpan">

48 48 Exemple AJAX Mode "Plus accessible" Internet Explorer 8 Support de la spécification du W3C WAI-ARIA (rôle, état et propriété d’informations) Internet Explorer 7 et antérieur ne notifie pas lors d’un changement de l’arbre DOM Technique de contournement mise en œuvre via le mode "Plus accessible" : simuler la navigation (inventé par George Young, Microsoft) pour mettre à jour le tampon de données des lecteurs d’écran Sans quitter la page en cours Sans créer une entrée dans l’historique du navigateur Navigation dans une iframe cachée en utilisant location.replace Cf. http://dotnetslackers.com/articles/ajax/AccessibleUpdatePanel.aspx

49 49 Démo Illustration du principe d'accessibilité AJAX avec ASP.NET

50 50 Composant "Web part" Silverlight 2+ Support du modèle d'accessibilité UI Automation pour les contrôles personnalisés Cf. Windows Automation API 3.0 (MSAA, IAccessibleEx, Dynamic Annotation API, UI Automation) Les contrôles Silverlight standard sont tous testés par Microsoft avec UI Automation Suppose, pour les contrôles personnalisés, de travailler avec AutomationPeer et les interfaces fournisseur d’UI Automation Cf. Séminaire Web "Développer au quotidien des applications accessibles sous Windows" http://www.microsoft.com/france/accessibilite/products/windowsvist a/developper.aspx Cf. Article "Creating Accessibility-aware Silverlight 2 Content" http://www.code- magazine.com/articleprint.aspx?quickid=0810062&printmode=true

51 51 Démo Mise en œuvre d'un composant "Web part" Silverlight 2+ accessible http://www.silverlight.net

52 52 Projets Exemple Silverlight 2+ Lecteur DAISY 3 http://buttercupreader.codeplex.com/ Site accessible en ligne : http://www.buttercupreader.net/ Cf. Webcast du MIX09 "Building Accessible RIAs in Microsoft Silverlight" : http://videos.visitmix.com/MIX09/T65M Media Accessible http://www.codeplex.com/amp

53 53 Tester l'accessibilité de vos solutions Evaluer votre quadrature entre : Respect des cadres de référence internationaux en termes d’accessibilité (Web) et, dans le contexte français pour le secteur public, du RGAA Degré de mise en avant sur la compatibilité avec les technologies d’assistance et suivi des bonnes pratiques de conception des interfaces Cf. eBook "Engineering Software for Accessibility" http://download.microsoft.com/download/5 /0/1/501FF941-E93D-423F-868B- C7BB2EC08C56/engineering_for_accessibility _eBook.pdf Importance des tests d’IHM automatisés dans votre cycle de développement

54 54 Tester l'accessibilité de vos solutions Urbilog a développé pour France Télécom un outil de validation pour la problématique de l’accessibilité Cet outil s’appelle Ocawa Il existe plusieurs versions, celle qui est en ligne sur Ocawa.com fait des tests automatiques sur des URLs données en donnant un diagnostique en fonction d’un référentiel: WCAG 1.0, Référentiel ADAE, etc. et dans plusieurs langues La dernière version OCAWA G4 prend en compte le référentiel RGAA : Référentiel Général d’Accessibilité des Administrations Cf. session ACN103 "L’accessibilité du Web : enjeux et impacts sur la société numérique française"

55 55 Tester l'accessibilité de vos solutions Ocawa version professionnelle Des tests automatiques sur un site donné : couverture des recommandations 30% au mieux Des tests semi-automatiques en récoltant un certain nombre d’éléments des pages Web analysées et en posant des questions ciblées sur ces éléments: celui-ci couvre les 70% des tests non automatisables Ce questionnaire est instancié automatiquement et les réponses à ce questionnaire permet de donner un résultat de mesure : indice d’accessibilité Ocawa et un rapport complet des anomalies Une anomalie est : Soit détectée par l’automate en émettant d’un fait particulier lié en général à un élément de la page. Soit générée indirectement par la réponse au questionnaire, question(s) liée(s) également un élément particulier de la page

56 56 Tester l'accessibilité de vos solutions Ocawa version professionnelle Aujourd’hui la version G4 est compatible avec le RGAA V1.0 et les WCAG 1.0 La compatibilité avec la RGAA V2.0 et WCAG 2.0 est en cours de développement et sortira cette année : 1 er trimestre pour la partie automatique, 2/3 ème trimestre pour la partie semi- automatique

57 57 Tester l'accessibilité de vos solutions Compatibilité avec les technologies d'assistance Cf. billet Windows Automation API SDK Tools http://blogs.msdn.com/winuiautomation/archive/2009/06/03/windo ws-automation-api-sdk-tools.aspx Ex. UI Accessibility Checker, un outil de détection de problèmes d’accessibilité avec MSAA Disponible sous 3 formes : 1.Une interface graphique 2.Un ensemble d’APIs autonomes pour automatiser les tests (ex. : tests de non régression) 3.Un outil en ligne de commande Offre les vérifications sur : Nom, rôle et état accessible Intégrité de l’arbre MSAA (relations parent-enfant et rectangles de délimitation La navigation tabulée depuis le clavier Un lecteur d’écran simplifié montrant les informations textuels réellement disponible à un vrai lecteur d’écran

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

59 59 Implémenter l’Accessibilité dans vos solutions 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 3 dates 29 mars 2010 15 avril 2010 3 juin 2010 Inscriptions http://www.braillenet.org/accessiweb/seminaires/sp_aw_ms

60 60 Annonce 4 ième Forum européen de l'accessibilité numérique organisé par l'Association BrailleNet "L'accessibilité numérique des services publics en Europe" http://inova.snv.jussieu.fr/evenements/colloques/colloques/62_programme_fr.html

61 61 Nos attentes Explorez SharePoint 2010 (Bêta) Testez le avec vos aides techniques Faites nous part de vos commentaires

62 62 Tester SharePoint Foundation 2010 Bêta http://www.microsoft.com/downloads/details.aspx?displaylang=fr&Famil yID=906c9f5a-6505-4eba-bf24-95e423ac1703 SharePoint Server Enterprise 2010 Bêta http://www.microsoft.com/downloads/details.aspx?familyid=77C30C6C- 47FC-416D-88E7-8122534B3F37&displaylang=fr SharePoint Server for Internet Sites Enterprise 2010 Bêta http://www.microsoft.com/downloads/details.aspx?familyid=77195785- 0282-4ACC-B6F4-7569E1011581&displaylang=fr SharePoint Designer 2010 Bêta http://www.microsoft.com/downloads/details.aspx?familyid=82DF15BD- 16A5-460E-A7C4-22599C669BB1&displaylang=fr Centre de mise en route Office 2010 http://officebeta.microsoft.com/en-us/support/getting-started-with- microsoft-office-2010-FX100996114.aspx

63 63 Pour aller plus loin sur les WCAG W3C/WAI : http://www.w3.org/WAI/ W3C WCAG 2.0 : http://www.w3.org/TR/WCAG20/ Comprendre les WCAG 2.0 http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Techniques pour les WCAG 2.0 http://www.w3.org/TR/WCAG20-TECHS/

64 64 Pour aller plus loin avec ARIA WAI-ARIA : http://www.w3.org/TR/wai-aria/ Primer http://www.w3.org/TR/wai-aria-primer/ Bonnes pratiques http://www.w3.org/TR/wai-aria-practices

65 65 Plus d’informations Site Web Urbilog http://www.urbilog.fr Site Web Ocawa http://www.ocawa.fr

66 66 Plus d’informations "Etre meilleur ensemble" 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 Livre-blanc "Ecrire des applications Web accessibles" Du code HTML simple à des pages DHTML complexes et à des applications AJAX http://download.microsoft.com/download/0/2/d/02ddb755- cd51-4b42-9fde-ff7d61cdcec8/Ecrire-des-applications-Web- accessibles.doc Livre blanc " Développer au quotidien des applications accessibles sous Windows" http://download.microsoft.com/download/3/C/6/3C622977-A0E8- 4994-A810- 43FB5E753312/DevelopperAuQuotidienDesApplicationsAccessiblesSou sWindows.docx

67 67 Plus d’informations Forum Accessibilité SharePoint http://social.technet.microsoft.com/forums/en- US/sharepointaccessibility/threads/ Weblog Microsoft SharePoint Team http://blogs.msdn.com/sharepoint/ http://blogs.msdn.com/sharepoint/archive/tags/Accessibility/default.aspx Weblog Microsoft Windows UI Automation http://blogs.msdn.com/winuiautomation/ Site Microsoft France Accessibilité, technologies pour tous http://www.microsoft.com/france/accessibilite

68 68 Questions / Réponses

69 69 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Votre potentiel, notre passion TM