L’accessibilité numérique à l’heure du Web 2.0

Slides:



Advertisements
Présentations similaires
Didacticiel Mon EBSCOhost
Advertisements

Tutoriel - Les Ressources du BCH
Copyright ©: SAMSUNG & Samsung Hope for Youth. All rights reserved Tutorials Logiciels : Navigateurs Internet Niveau : Débutant Intermédiaire.
Accueil du public Déficient visuel. Quel est sa déficience visuelle ? Quelles solutions techniques ? - Quel est son niveau en informatique ? - Quelles.
Etude de Cas Une compagnie d'assurance automobile propose à ses clients quatre familles de tarifs identifiables par une couleur, du moins au plus onéreux.
TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05
Serveur jeu Le serveur fait partie d'un logiciel de jeu en ligne multi joueur en architecture client serveur. Il répond à des demandes.
Personnalisation des sites SharePoint avec SharePoint Designer 2007
Microsoft Office Groove Le contexte Une utilisation des postes de travail en très grande évolution chez les professionnels. Des lieux de travail.
3/26/2017 7:29 PM Taxonomie et gouvernance Organiser le patrimoine informationnel des entreprises © 2006 Microsoft Corporation. All rights reserved. This.
Design Pattern MVC En PHP5.
- TUTORIAL MCIE - Méthode de Conception d’Interfaces Ergonomiques
Assistance à distance Parfois on se sent bien seul face à un problème informatique surtout si on n’est qu’un simple utilisateur. Lorsqu'un problème survient.
La Recherche en Ligne.
12 novembre 2012 Grégory Petit
Systèmes d’exploitation
Formation Microsoft® Office Access 2007
Projet Alerte SMS.
GED Masters: Gestion Électronique de Documents
Xavier Tannier Accessibilité
Etude des Technologies du Web services
SECURITE DU SYSTEME D’INFORMATION (SSI)
1 Bibdoc 37 – Regards croisés Bibliothèques virtuelles, usages réels 7 avril 2009 – Tours « Les usages des bibliothèques virtuelles » Jean-Philippe Accart.
Module 1 : Préparation de l'administration d'un serveur
BINOMIAL PlanBuilder pour la continuité de services
Amélioration de la sécurité des données à l'aide de SQL Server 2005
Ajax. Contexte Dabord, il y a eu les terminaux des ordinateurs centraux (environnements TSO, CICS, etc.) et les terminaux plein écran des environnements.
Conférence web ARS Support dauto-formation utilisateur.
Lycée Louis Vincent Séance 1
Chaque use-case génère un ou des scénarios, traduits par des diagrammes objets, qui permettent d’introduire et/ou de compléter les diagrammes des catégories.
28 novembre 2012 Grégory Petit
Gestion denquêtes et suivi dindicateurs statistiques 1er degré © DOS3 – Pôle Analyse & Développement Octobre 2011 – v.0.1 Tutorial portail directeur décole.
Les relations clients - serveurs
Crystal Reports COPYRIGHT © 2007 BUSINESS OBJECTS SA. TOUS DROITS RÉSERVÉS. DIAPOSITIVE 2 Informatique - Déclaration de positionnement Crystal Reports.
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Les guides de formation WS-FTP Comment télécharger un site web sur le serveur de lÉcole.
Conjoncture des standards Internet et Web Benoît Girard, conseiller stratégique au réseau des webmestres gouvernementaux Ministère des Services gouvernementaux.
Jonathan Montois Cyrille Kriegel
Création et présentation d’un tableau avec Word 2007
Le langage du Web CSS et HTML
PROGRAMMATION WEB FRONT-END.
1 Architecture orientée service SOA Architecture orientée service SOA (Service Oriented Architecture)
Présente Conception d’un petit site Web. 2 4-nov-03© Préambule Cette présentation fait suite à celle intitulée « Imaginer, concevoir, mettre.
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II
L’ ACCESSIBILITE « C’est mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure.
Initiation à la conception des systèmes d'informations
L’ergonomie des IHM : pourquoi, comment ?
S'initier au HTML et aux feuilles de style CSS Cours 5.
Développement d’application Web.  Internet  WWW  Client/Serveur  HTTP.
POWERPOINT.
S'initier au HTML et aux feuilles de style CSS Cours 5.
2005 Adobe Systems Incorporated. All Rights Reserved. 1 Solutions Adobe Acrobat Génération de fichiers PDF accessibles Lionel Lemoine
eXtensible Markup Language. Généralités sur le XML.
AU REVOIR BONJOUR OFFICE COMMUNICATOR MICROSOFT LYNC Rendez-vous Le
Interaction Homme Machine
Accessibilité web Gérer l’accessibilité lors de la création d’un site ORT Lyon - 10/02/2014.
CONSEIL NATIONAL DE RECHERCHES CANADA PROGRAMME D’AIDE À LA RECHERCHE INDUSTRIELLE Accélérer la croissance des PME grâce à l'innovation et à la technologie.
Search IM Nouvelle Interface adCenter Avril 2007.
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
Guillaume MICHAUD – Yvan LECOMTE
Introduction aux Interfaces Homme-Machine
Dreamweaver le retour Avec Les Formulaires Les Calques
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Formation.
Introduction au HTML Qu’est ce que le HTML ?
1Boulogne Informatic Club PRESENTATION DE WINDOWS 10.
FACTORY systemes Module 5 Section 1 Page 5-3 Les scripts de traitement FORMATION INTOUCH 7.0.
NURUN 1. PLACE IMAGE HERE L’accessibilité n’est pas une option.
Transcription de la présentation:

L’accessibilité numérique à l’heure du Web 2.0 Microsoft Engineering Excellence L’accessibilité numérique à l’heure du Web 2.0 Bernard Ourghanlian Chief Technology & Security Officer Microsoft France

Microsoft Engineering Excellence Sommaire Introduction Le Web 2.0 La pyramide de l’accessibilité du Web : HTML, DHTML et AJAX Ajax, l’accessibilité et le Web 2.0 : problèmes et solutions L’exemple du Blog Conclusion

Le Web et l’accessibilité Tim Berners-Lee, directeur du W3C et « inventeur » du World Wide Web, donne cette définition de l’accessibilité numérique : En d’autres termes, l'accessibilité numérique peut se définir simplement comme « la capacité d'une personne – quel qu’elle soit – à accéder à la toile » : un site Web est accessible s'il peut être utilisé indifféremment par une personne présentant ou non un handicap quel qu’il soit. Le contenu, les caractéristiques et les services offerts par un site se doivent d’être accessibles à un public aussi large que possible, indépendamment de l'âge, d'un handicap ou des limites de la technologie ou de l'environnement de l'utilisateur. « Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.  Mettre les services et les contenus de communication en ligne à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales »

Le Web et l’accessibilité L'utilisation du Web fait partie intégrante de notre vie quotidienne et se répand rapidement dans tous les domaines de la société. Le Web constitue, à ce titre, la source d'information la plus globale. Pour autant, les personnes handicapées éprouvent des difficultés à utiliser à ce médium, ainsi que, d’une façon générale, les services (interactifs) proposés en ligne. Comme le souligne Tim Berners-Lee, directeur du W3C et « inventeur » du World Wide Web : « La puissance du Web réside dans son universalité. L’accès par tous quel que soit le handicap en est un aspect essentiel »  Le problème ne réside pas dans l’accès à l’informatique (selon certaines études, les personnes handicapées visuelles seraient deux fois plus équipées en ordinateur que la moyenne nationale de la France). Le problème réside réellement dans l’utilisation du Web : les sites Web que ces personnes visitent ne sont pas toujours adaptés aux dispositifs d'assistance qu'elles utilisent ou n'incluent aucune caractéristique d'accessibilité, même élémentaire.

Le Web et l’accessibilité L'accessibilité du Web est souvent perçue comme le fait de donner accès aux contenus numériques pour les personnes handicapées Pourtant, rendre un site accessible présente d'autres avantages dépassant largement le simple champ du handicap et va bien au-delà de la compatibilité des aides techniques des personnes handicapées avec les sites Web Ceci est loin de se limiter aux personnes handicapées Lorsque l'information Web est conçue et réalisée pour être accessible aux personnes handicapées Les sites résultants s’en trouvent généralement construits de manière plus logique et mettent l'accent sur le contenu plutôt que sur la fourniture d'information Les frais de maintenance s’en trouvent d’autant réduits. Les sites accessibles deviennent utilisables à partir d'ordinateurs d’entrée de gamme disposant de connexions Internet plus lentes, etc. Ceci permet également d’améliorer la portabilité des sites sur l’ensemble des supports d’affichage tels qu’un téléphone mobile avec accès Internet ou un assistant numérique personnel Constat important quand on comptabilise 810 millions de terminaux mobiles vendus en 2005

L’attachement de Microsoft à l’accessibilité L’expression du plein potentiel de chacun La mission de Microsoft est de mettre son expertise, sa capacité d’innovation et la passion qui l'anime au service des projets, des ambitions et de la créativité de ses clients, afin de faire de la technologie leur meilleure alliée dans l’expression de leur potentiel Nous soutenons la vision d’une technologie informatique qui puisse se mettre au service de chacun, y compris pour celles et ceux souffrant de handicaps

L’attachement de Microsoft à l’accessibilité Un engagement permanent dans la durée Depuis plus de 15 ans, nous explorons et faisons évoluer les technologies d’accessibilité Ainsi, dès 1988, nous avons lancé nos premiers travaux dans le domaine de l’accessibilité en collaboration avec le Trace Research and Development Center de l’université de Madison dans le Wisconsin Ceci nous a permis de développer, à destination des sourds et des malentendants ainsi qu’aux personnes à la dextérité limitée, les premiers éléments complémentaires à Windows 2.0 appelés « Access Utility for Windows 2.0 » et permettant grâce aux fonctionnalités StickyKeys, FilterKeys et MouseKeys (encore présentes dans Windows Vista aujourd’hui mais ayant considérablement évolué) de simplifier les opérations de clavier et de souris et de fournir un retour visuel quand l’ordinateur émet des sons (ShowSounds), tout en permettant à des périphériques spécialisés d’interagir avec l’ordinateur à travers un port série (SerialKeys). Depuis, cet effort s’est constamment poursuivi A ce effet, nous avons construit de nombreux partenariats afin d’accélérer l’innovation en matière d’accessibilité

Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 3/30/2017 11:44 AM Le Web 2.0 Web 2.0 est un terme souvent utilisé pour désigner ce qui est perçu comme une transition importante du Web, passant d'une collection de sites Web à une plate-forme informatique à part entière, fournissant des applications Web aux utilisateurs Ainsi, dans sa conception originale, le Web (nommé dans ce contexte le « Web 1.0 ») comprenait des pages Web statiques qui étaient rarement mises à jour, voire jamais Le succès du Web se fondait essentiellement sur un Web dynamique, où des systèmes de gestion de contenu servaient des pages Web dynamiques, créées à la volée à partir d’une base de données en constant changement Le Web était considéré principalement comme un outil de diffusion et de visualisation de données, où des aspects comme le nombre de pages vues et l’esthétique revêtaient une très grande importance Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 8 © 2006 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.

Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 3/30/2017 11:44 AM Le Web 2.0 Le Web 2.0, quant à lui, voit l’arrivée d’un Web de plus en plus orienté vers l’interaction entre les utilisateurs et la création de réseaux sociaux rudimentaires, pouvant servir du contenu exploitant les effets de réseau, avec ou sans réel rendu visuel et interactif de pages Web. En ce sens, les sites « Web 2.0 » agissent plus comme des points de présence, ou des portails Web centrés sur l’utilisateur plutôt que sur les sites web traditionnels 9 Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 © 2006 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.

Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 3/30/2017 11:44 AM Le Web 2.0 L’infrastructure du Web 2.0 est complexe et changeante, mais on peut considérer, en première approche, qu’elle inclut les logiciels de serveur, la syndication de contenu, les protocoles de messagerie, des standards de navigation, et des applications clientes diverses. Un site peut ainsi être appelé comme utilisant une approche Web 2.0 s’il utilise un certain nombre des techniques suivantes : l’utilisation de CSS, d’un balisage XHTML sémantiquement valide et des micro-formats ; les techniques d’applications riches telles qu’AJAX ; la syndication et l’agrégation de contenu RSS/Atom ; la catégorisation par étiquetage ; l’utilisation appropriée des URL ; une architecture REST ou des services Web XML. 10 Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 © 2006 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.

Le Web 2.0 et l’accessibilité 3/30/2017 11:44 AM Le Web 2.0 et l’accessibilité Dans ce cadre, l’injection asynchrone de contenu (que l’on appelle fréquemment « Javascript And Xml » [AJAX]) présente quelques problèmes spécifiques en matière d’accessibilité, notamment celui de permettre aux lecteurs d’écran de savoir que le contenu a été mis à jour sur la page. En effet, les lecteurs d’écran fonctionnent en prenant un « instantané » de la page après l’avoir chargé en permettant ensuite à l’utilisateur de se déplacer au sein de cet instantané ; il est donc nécessaire que le lecteur d’écran reçoive un évènement de type « navigation » pour lui permettre de mettre à jour cet instantané car, sinon, il n’est pas prévenu (voir plus loin) 11 © 2006 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.

Développer des applications Web accessibles On peut considérer que l’accessibilité des applications Web obéit à une certaine hiérarchie en matière de complexité HTML DHTML AJAX Définition Pages Web HTML. Ces pages peuvent être statiques, générées par le serveur ou générées par des scripts côté client. HTML plus interaction avec l’utilisateur à travers du script côté client. DHTML plus mise à jour asynchrone. Considérations Sémantique HTML Ordre du DOM Taille relative Couleurs Liens et boutons Evénement Click Notification par rappel vers la technologie d’assistance 12

La pyramide de l’accessibilité Web HTML 13

La pyramide de l’accessibilité Web HTML Sémantique HTML Ordre du DOM Taille relative Couleurs 14

HTML : Le DOM est votre Interface Sémantique HTML Links Buttons Images Forms Headings Tables Listes Toolbar et menu bar Ordre de lecture Unité de taille relative Couleurs Spécification des couleurs Information textuelle sur les couleurs Images avec un fort contraste Contraste des couleurs 15

La pyramide de l’accessibilité Web DHTML HTML Sémantique HTML Ordre du DOM Taille relative Couleurs 16

La pyramide de l’accessibilité Web DHTML Liens et boutons Evénement Click Ordre du DOM HTML Sémantique HTML Ordre du DOM Taille relative Couleurs 17

DHTML : Actions et événements Evénements « Click » sur liens et boutons Ordre du DOM Les technologies d’assistance n’ont pas accès au placement visuel des éléments sur la page ; au lieu de cela, ils se reposent sur l’ordre dans lequel les éléments apparaissent dans le source HTML ou le DOM (ceci détermine l’ordre de navigation par tabulation ainsi que l’ordre dans lequel les éléments sont lus par le lecteur d’écran) Il faut donc Faire correspondre l’ordre visuel Insérer le prochain dans le DOM après avoir déclenché l’élément Si l’on ne peut faire les deux, il s’agit probablement d’une mauvaise conception 18

La pyramide de l’accessibilité Web AJAX DHTML Liens et boutons Evénement Click Ordre du DOM HTML Sémantique HTML Ordre du DOM Taille relative Couleurs 19

La pyramide de l’accessibilité Web AJAX Evénement « Navigate » DHTML Liens et boutons Evénement Click Ordre du DOM HTML Sémantique HTML Ordre du DOM Taille relative Couleurs 20

La problématique AJAX L’injection de contenu asynchrone appelée Javascript And Xml [AJAX] présente une problématique spécifique pour l’accessibilité : il faut faire savoir aux lecteurs d’écran quand le contenu a été mis à jour sur la page Ceci constitue un problème dans la mesure où les lecteurs d’écrans fonctionnent en prenant un « instantané » de la page après l’avoir chargé et en permettant alors à l’utilisateur de se déplacer au sein de cet instantané Il faut donc que le lecteur d’écran reçoive un événement navigate afin de mettre à jour l’instantané Le navigateur génère un événement navigate en réponse à un événement onclick sur un lien <href> 21

La problématique AJAX AJAX fonctionne en ne mettant à jour que les éléments qui ont changé sur la page Ainsi donc, l’instantané n’est pas mis à jour quand un appel AJAX met ensuite à jour un seul élément sur la page Par exemple ce qui se passe quand un utilisateur ajoute une action à une application qui gère les cours de bourse ou une ville à une application qui permet d’avoir accès aux prévisions météo En fait le navigateur ne génère pas d’événement et l’instantané géré par le périphérique d’assistance n’est pas mis à jour 22

La problématique AJAX Il faut donc trouver un moyen pour faire en sorte que l’injection asynchrone de contenu (AJAX) soit accessible aux lecteurs d’écran et aux autres technologies d’assistance 23

La solution de cette problématique Les lecteurs d’écran (comme on vient de l’indiquer) prennent un instantané du contenu Web et le stockent dans un buffer en permettant aux utilisateurs d’interagir avec cet instantané. Quand un utilisateur navigue vers une nouvelle page un événement navigate est envoyé au système d’exploitation, le lecteur d’écran intercepte cet événement et met à jour son buffer. Ceci survient aussi quand un script se déclenche à partir d’un événement onclick sur un lien ou un bouton Avec les mises à jour asynchrones, le contenu est retourné et ajouté au DOM après que l’événement navigate ait été traité Malheureusement, ajouter un événement asynchrone au DOM ne génère aucun événement que le lecteur d’écran puisse intercepter et il n’est pas possible de générer un événement navigate directement depuis un script 24

La solution de cette problématique Toutefois, un événement navigate est généré pour toute navigation, y compris une navigation au sein d’une <frame> ou d’une <iframe> Il suffit donc de créer une <iframe> cachée, dans un script, et d’y naviguer à la fin de la fonction qui récupère le contenu depuis l’appel asynchrone On navigue vers l’<iframe> grâce à un URL unique, créé à partir de la date et de l’heure courante afin d’éviter de toucher le cache et de s’assurer que l’événement est bien généré et en utilisant location.replace afin d’éviter d’encombrer l’historique du navigateur 25

La solution de cette problématique Après que le XML retourné est bien confirmé, la fonction de callback recopie le nouveau contenu dans le DOM ou génère un message d’erreur Ensuite, le code génère une valeur URL unique et appelle location.replace() sur l’<iframe> cachée comme on vient de le voir 26

La solution de cette problématique function Callback(response) { var target = document.getElementById("output"); var out = null; if ("200" == response.status) out = response.responseText; } else out = response.status + ":" + response.statusText; target.innerHTML = out; // create a unique href and navigate the iframe var url = 'blank.htm?' + (new Date()).getMilliseconds(); window.frames['nav-i-frame'].location.replace(url); 27

La solution de cette problématique Le code HTML suivant est celui de l’<iframe> cachée <iframe tabindex="-1" id="nav-i-frame" name="nav-i-frame" src="blank.htm" height="0" width="0"></iframe> 28

L’exemple du Blog et du lecteur d’écran Les utilisateurs de lecteur d’écran peuvent affronter plusieurs obstacles lorsqu’ils consultent des blogs Les nouveaux lecteurs d’écran savent interpréter le JavaScript : les développeurs ne peuvent s’appuyer sur des alternatives NOSCRIPT Si les formulaires ne sont pas accessibles, les utilisateurs peuvent ne pas être capables de créer du contenu ou de poster des commentaires Le contenu peut avoir été ajouté par le propriétaire du blog dans un format non accessible Il y a aussi le problème général que nous venons de voir en environnement AJA X : le fait que les utilisateurs de lecteur d’écran puisse ne pas savoir que la page a été mise à jour

Utilisateurs de lecteur d’écran et contenu dynamique Les lecteurs d’écran peuvent interpréter le contenu de différentes manières ; par exemple, avec JAWs, il y a 3 modes différents : Virtual PC Cursor mode PC Cursor mode Forms mode Chacun des lecteurs d’écran et des navigateurs interagissent de manière spécifique La plupart des solutions proposées requièrent de l’utilisateur que celui-ci passe d’un mode à l’autre Ceci suppose un niveau de technicité élevé de la part de l’utilisateur Il y a une task force au sein du W3C pour trouver une solution, mais son travail n’est pas encore achevé

Blogs et lecteur d’écran En utilisant le Home Page Reader d’IBM, sans la dernière version de real audio, la vérification de mot en mode audio ne peut être effectuée ; l’utilisateur de lecteur d’écran ne peut se connecter au blog

Blogs : créer un contenu accessible L’éditeur HTML doit permettre la création de documents sémantiques

Blogs : créer un contenu accessible L’éditeur HTML doit fortement encourager les utilisateurs à inclure un texte alternatif pour chaque image

Blogs : créer un contenu accessible Les contrôles de type formulaire sont positionnés de manière incorrecte

Blogs : créer un contenu accessible Les applications Web accessibles doivent permettre d’éviter la création de contenu non accessible quand c’est possible Inclure des textes alternatifs Ne pas permettre de pop-up sans message d’alerte Eviter les navigations Formulaire accessibles Les applications Web accessibles doivent encourager la création d’un contenu accessible à chaque fois que c’est possible Options d’accessibilité par défaut Contrôleur de contraste des couleurs Encouragement au balisage sémantique Aide claire Inclusion en standard d’outils de test automatique

10 conseils techniques pour des applications Web accessibles Concevoir pour la simplicité Modéliser votre conception à l’aide de contrôles HTML intrinsèques Utiliser CSS pour lui donner le look que vous souhaitez Faites en sorte que l’ordre source corresponde à l’ordre visuel et faire en sorte qu’il définisse l’ordre des tabulations Nommer vos images (alt) et les éléments de type formulaire (label) Utiliser des unités relatives pour les polices et les dimensions Déclencher des scripts lors de la réception de l’événement Click sur les liens et les boutons Insérer le nouveau contenu après l’élément déclenchant Naviguer au sein d’une iframe cachée dans votre callback AJAX Contrôler votre travail avec Inspect32, la barre de développement IE, et en utilisant les grosses polices du navigateur et le mode de fort contraste 36

L’acccessibilité et le Web 2.0 Créer un environnement Web 2.0 accessible c’est possible ! Ceci nécessite cependant certaines précautions techniques et méthodologiques Suivre guides et procédures Mais plus important encore : tester avec l’aide d’utilisateurs handicapés ! Les « vrais » utilisateurs peuvent trouver des problèmes que les guides et les procédures ne peuvent anticiper

Recommandations de mise en œuvre Microsoft a le plaisir d’annoncer la disponibilité de la version 2 de son livre blanc « Guide de conception et de réalisation de sites accessibles avec les solutions Microsoft » à l’occasion de cette conférence Ce livre blanc constitue un guide de référence vous permettant de produire des sites Web accessibles basés sur la nouvelle version Microsoft Office SharePoint Server 2007 Il définit dans quelle mesure ces technologies offrent le meilleur respect possible des critères AccessiWeb au moins de niveau Bronze

Mise en place d’un nouveau site Web sur l’accessibilité Nous avons également le plaisir de vous annoncer l’ouverture d’un nouveau site Web dédié à l’accessibilité http://www.microsoft.com/france/accessibilite Nous nous ferons un plaisir de vous accueillir à l’occasion des ateliers

©. 2006 Microsoft Corporation. All rights reserved © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

Ressources

Outils Inspect32 et AccessibleExplorer http://www.microsoft.com/downloads/details.aspx?FamilyId=3755582A-A707-460A-BF21-1373316E13F0&displaylang=en Barre d’outil d’IE pour le développeur http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en 42

Ressources Additionelles W3C Web Content Accessibility Guidelines 1.0 W3C Web Content Accessibility Guidelines 2.0 Last Call Working Draft W3C Definition of Luminosity Contrast Ratio for determining color contrast 43

Annexe Généralités

Qu’est-ce que l’accessibilité ? « Des fonctionnalités équivalentes pour tous les utilisateurs » Fonctionnalités équivalentes Ce que l’utilisateur est en train de faire, pas nécessairement le contrôle qu’il utilise Tous les utilisateurs Les personnes âgées qui utilisent des grosses polices de caractères Les utilisateurs avec une vision déficiente qui utilisent une loupe logicielle Les utilisateurs souffrant de dyschromatopsie Les utilisateurs aveugles qui utilisent des lecteurs d’écran Les utilisateurs avec des handicaps moteurs et souffrant de limitations en termes de mobilité Clavier seul Souris seule Terminal alternatif, tel qu’une plage braille Les utilisateurs sourds ou malentendants Les utilisateurs soufrant de difficultés cognitives ou de dyslexie Toute combinaison des éléments précédents 45

Réaliser le potentiel de chacun eInclusion/Digital Inclusion Le but du plan d’action de la commission européenne i2010 est de rendre la société de l’information accessible à tous et l’eInclusion est un élément clé de ce processus L’eInclusion est un objectif clé de la stratégie de l’emploi et l’inclusion sociale en Europe L’inclusion numérique a pris son élan dans le monde en se concentrant sur l’accès à la technologie pour tous Le nombre de personnes pouvant tirer parti des technologie d’accessibilité est largement supérieur à ce qui avait été imaginé initialement

Qu’est-ce qu’une technologie d’accessibilité ? Les technologies d’accessibilité sont des technologies flexibles et ajustables aux besoins de l’individu en termes de vue, de mobilité, d’ouïe, de langage et d’apprentissage Elles permettent l’accès à l’ordinateur pour des personnes handicapées, quelles que soient leurs capacités fonctionnelles Les solutions technologiques d’accessibilité permettent à chacun de réaliser son plein potentiel Produit standard (accessibilité intégrée) Technologies d’assistance

Les engagements de Microsoft Microsoft prend en compte les besoins des personnes handicapées ou malades dans le domaine de l'informatique pour leur permettre de bénéficier des nouvelles technologies tant dans leur cadre professionnel que pour leur usage personnel. Microsoft a reconnu très tôt que les technologies informatiques constituaient un outil important et puissant pour les personnes souffrant d’un handicap ou d’une diminution de leurs facultés. Depuis bientôt deux décennies, Microsoft a exploré et fait évoluer les fonctionnalités d’accessibilité qui sont intégrés dans ses produits. Microsoft s’est engagé à offrir des innovations continues dans ce domaine (Cf. « Microsoft's Corporate Mission and Accessibility Strategy ») et a constitué à cette attention l’Accessible Technology Group (ATG) dont les 50 personnes dédiées gèrent et coordonnent tous les efforts associés au sein de la société. L’engagement de Microsoft pour l’accessibilité contribue à donner aux gouvernements les moyens de choisir des technologies accessibles ; ce qui améliore notamment les opportunités d’emploi des personnes souffrant d’une invalidité ou d’une incapacité et offre un meilleur accès aux services publiques. Microsoft supporte les initiatives, directives et réglementations des gouvernements pour piloter l’inclusion numérique en mettant à disposition l’information sur l’accessibilité des produits Microsoft, et comment ils répondent à une variété de standards d’accessibilité communément adoptés.

Les engagements de Microsoft Aux Etats-Unis notamment, la section 508 du « Rehabilitation Act » impose aux agences fédérales de rendre leur technologie informatique et électronique accessible aux personnes handicapées. La Section 508 crée une forte motivation pour les éditeurs de logiciel afin d’intégrer plus et de meilleures fonctionnalités d’accessibilité au sein de leurs produits. Elle complémente et renforce le travail que Microsoft a déjà entrepris pour rendre la technologie universellement accessible. Pour de plus amples informations, vous pouvez vous référer à l’engagement public de Microsoft l’adresse Internet « Microsoft Actively Supports Section 508 ». En Europe, Microsoft supporte l’initiative eInclusion de la Communauté Européenne mentionnée précédemment et participe aux efforts transatlantiques de support de i2010.

Pour élargir la perspective… Microsoft a commissionné une étude pour : Mieux comprendre le marché des technologies accessibles Obtenir des informations sur la façon dont les gens utilisent les ordinateurs L’étude de Forrester Research, Inc a porté sur 15 000 personnes aux USA au printemps 2003 Des considérations démographiques complémentaires suggèrent que les résultats de l’enquête auraient été identiques en d’autres points du globe, notamment en Europe En 2010, presque la moitié de la population dans des pays tels que la Belgique, l’Allemagne et la France auront 45 ans et plus En 2050 il y aura presque deux fois plus de « vieux » de plus de 60 ans que de «jeunes » de moins de 20 ans

Les conditions de l’enquête Questionnaire complet comprenant des questions permettant : D’identifier des personnes se considérant elles-mêmes comme souffrant de difficultés ou de handicaps D’identifier des personnes qui ne se considèrent pas elles-mêmes comme souffrant d’un handicap mais se considérant comme ayant des difficultés à effectuer leurs tâches de tous les jours Bénéfices de cette approche Identification de groupes de personnes souffrant de difficultés physiques ou cognitives ou de handicaps les restreignant dans leurs activités de tous les jours Capture d’informations pour chacun des groupes de personnes

Les questions de l’enquête Pour chaque type de difficulté ou de handicap (visuel, dextérité, ouïe, parole, cognitif) les questions suivantes ont été posées : Difficultés dans les tâches de tous les jours Questions directes à propos des handicaps afin d’évaluer la proportion de la population qui s’est elle-même identifiée comme souffrant de handicap Questions directes au sujet de l’impact sur l’emploi afin de permettre aux personnes de communiquer leur évaluation sur les contraintes imposées par un handicap

Une nouvelle perspective Les anciennes définitions avaient créé deux catégories : les handicapés et les autres Cette enquête montre Que la plupart des individus ne s’identifient pas eux-mêmes comme ayant une difficulté ou un handicap Il y a un continuum de difficultés et de handicaps physiques et cognitifs qui comprend les personnes handicapées Les populations vieillissent Les anciens restent au travail plus longtemps que leurs ainés Les difficultés et les handicaps augmentent avec l’âge

Les personnes susceptibles de bénéficier des technologies accessibles 57% des utilisateurs d’ordinateurs (18 – 64 ans) sont susceptibles ou très susceptibles d’en bénéficier 1 utilisateur sur 4 a des difficultés visuelles 1 utilisateur sur 4 a des douleurs aux mains ou aux poignets 1 utilisateur sur 5 a des difficultés auditives Very likely to benefit 17% Likely to benefit 40% Not likely to benefit 43% Base : US 18-64 year old computer users Enquête commissionnée par Microsoft, Conduite par Forrester Research en 2003

Annexe technique

Technologies d’assistance

Technologies d’assistance Les terminaux implémentant des technologies d’assistance sont conçus pour améliorer l’accessibilité pour les personnes souffrant de handicaps, qu’ils soient physiques ou cognitifs Un périphérique d’assistance est installé entre un utilisateur et une application et permet de faciliter l’interaction de l’utilisateur avec cette application Le périphérique traduit les données de l’application en un format que l’utilisateur peut accéder et avec lequel il peut interagir, et réciproquement, transformer les données entrées par l’utilisateur en un format que l’application peut interpréter Pour fonctionner effectivement, le périphérique d’assistance doit être compatible avec le système d’exploitation et les programmes sur l’ordinateur utilisé 57

Accessibilité sur le Web Utilisateur Le DOM est votre interface Sémantique de l’élément Certaines sémantiques d’élément sont mappés avec MSAA Evénements Technologie d’assistance Evénements Propriétés Modèle objet Modèle objet MSAA Application client Navigateur HTML + Script

L’utilisation du DOM est de MSAA Heureusement, les développeurs n’ont pas à comprendre chaque technologie d’assistance Les périphériques d’assistance utilisent un modèle objet standard, tel que le Document Object Model (DOM) ou un ensemble d’interfaces telles que Microsoft Active Accessibility (MSAA) pour communiquer avec une application cliente s’exécutant sur Windows ou s’exécutant sur le Web Une large variété de technologie d’assistance est construite sur cette base commune 59

L’utilisation du DOM est de MSAA MSAA est un ensemble d’interfaces COM et d’API qui fournissent un moyen fiable pour exposer et collecter des informations à propos des éléments de l’interface homme – machine de Windows et du contenu Web Les périphériques d’assistance peuvent alors utiliser cette information pour communiquer l’IHM dans des formats alternatifs tels que la voix ou le Braille et les applications de contrôle ou les commandes vocales peuvent manipuler l’interface 60

L’utilisation du DOM est de MSAA La différence clé entre développer des applications accessibles sur le bureau Windows et des applications accessibles sur le Web est qu’alors que l’API Microsoft Win32 permet l’écriture de membres accessibles sur n’importe quel contrôle, HTML est en lecture seule pour les rôles et les événements Un navigateur fait donc correspondre les balises HTML à des valeurs MSAA mais le développeur n’y a aucun accès direct Il faut donc utiliser une sémantique HTML correcte 61

Les Outils Vous pouvez ne pas avoir de périphériques d’assistance à votre disposition quand vous concevez, développez et testez des applications Heureusement, les outils suivants peuvent vous servir d’intermédiaire pour des technologies d’assistance Ces outils sont gratuits et simple à utiliser et peuvent vous aider à découvrir la majorité des problèmes d’accessibilité 62

Les Outils : Inspect32 L’outil Inspect Object (Inspect32.exe) expose les noms et les rôles MSAA (ainsi que d’autres propriétés) pour les éléments fonctionnels, les images et les tables Avec cet outil, il est facile de parcourir l’application et de vérifier que les noms et les rôles pour les éléments clés – tels que les liéns et les éléments formulaires – soient positionnés correctement On peut aussi utiliser Inspect32 pour naviguer au sein d’une hiérarchir DOM, appeler l’action par défaut sur un élément, et mettre en évidence le focus du clavier 63

Les Outils : Inspect32 On peut télécharger Inspect32 est les outils connexes en : http://www.microsoft.com/downloads/details.aspx?FamilyId=3755582A-A707-460A-BF21-1373316E13F0&displaylang=en 64

Les Outils : la barre développeur d’Internet Explorer Il y a des types d’éléments qui sont importants pour les technologies d’assistance qui ne sont pas explicitement identifés dans MSAA, tels que les en-têtes et les listes Les fonctions View DOM et Select Element de l’Internet Explorer Developer Toolbar vous permettront de confirmer que les types d’éléments HTML appropriés – par exemple, <h3>, <ul>, etc. — sont utilisés 65

Les Outils : la barre développeur d’Internet Explorer Si l’on sélectionne View Source depuis le navigateur, on peut visualiser le HTML comme s’il avait été télécharger par le navigateur Toutefois, si l’on utilise la barre développeur, on peut visualiser le DOM après qu’il ait été manipulé par le script La barre est aussi utilisable come un outil de débogage et de test On peut l’utiliser pour inspecter le nom d’une balise, les attributs HTML, les propriétés Cascading Style Sheet (CSS) des éléments La barre a d’autres fonctionnalités utiles telle que des validateurs et la possibilité de visualiser rapidement CSS ou les textes alternatifs pour les images 66

Les Outils : la barre développeur d’Internet Explorer 67 On peut télécharger la barre d’outils en : http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

Concevoir pour l’accessibilité Il est fondamental que les architectes et concepteurs d’une application considèrent les besoins de tous les utilisateurs pendant les phases initiales du développement L’objectif d’obtenir des fonctionnalités équivalentes pour tous les utilisateurs ne veut pas dire que tous les utilisateurs doivent utiliser l’application de la même façon Il faut donc se concentrer quand on conçoit des fonctionnalités équivalentes sur ce que l’utilisateur essaye de faire et pas nécessairement sur le contrôle qu’il utilise ou sur la façon dont il l’utilise 68

Concevoir pour l’accessibilité Pour concevoir et développer effectivement des applications accessibles, vous devez Considérer l’accessibilité dès les phases de conception du cycle de vie de l’application. Inclure les fonctionnalités d’accessibilité dans le recueil des besoins et les spécifications Penser à la façon d’exposer les fonctionnalités applicatives, pas nécessairement à propos des contrôles et des aspects visuels Considérer la logique fonctionnelle de l’application et sur la façon dont communiquer cette logique vers les différents périphériques Penser à la structure HTML et à la façon dont elle peut refléter la logique applicative Faire attention à la façon dont les technologies d’assistante fonctionnent avec le navigateur et réfléchir à la façon dont l’IHM de l’application peut fonctionner avec les différents périphériques 69

Concevoir pour l’accessibilité En particulier Pour toute action, utiliser un click sur un lien ou un bouton Vous pouvez utiliser des effets de survol (hover effect) s’ils sont purement décoratifs ou si la fonctionnalité est aussi disponible à l’aide d’un click sur un lien ou un bouton Utiliser des polices et des container permettant la mise à l’échelle Utiliser suffisamment de contraste de couleur Ne jamais utiliser la couleur seule pour faire passer une information Utiliser du texte et les polices de caractère disponibles, ne jamais utiliser des images de texte Utiliser un texte pour l’IHM qui ne soit pas ambigu et qui puisse disposer d’un sens par lui-même Fournir des sujets d’aide à propos de l’accessibilité Faire attention lors de l’utilisation de contrôles customisée car cela représente plus de travail de les rendre accessibles que d’utiliser les contrôles HTML standard 70