La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Laccessibilité numérique à lheure du Web 2.0 Bernard Ourghanlian Chief Technology & Security Officer Microsoft France.

Présentations similaires


Présentation au sujet: "Laccessibilité numérique à lheure du Web 2.0 Bernard Ourghanlian Chief Technology & Security Officer Microsoft France."— Transcription de la présentation:

1 Laccessibilité numérique à lheure du Web 2.0 Bernard Ourghanlian Chief Technology & Security Officer Microsoft France

2 2 Sommaire Introduction Le Web 2.0 La pyramide de laccessibilité du Web : HTML, DHTML et AJAX Ajax, laccessibilité et le Web 2.0 : problèmes et solutions Lexemple du Blog Conclusion

3 Le Web et laccessibilité Tim Berners-Lee, directeur du W3C et « inventeur » du World Wide Web, donne cette définition de laccessibilité numérique : En dautres termes, l'accessibilité numérique peut se définir simplement comme « la capacité d'une personne – quel quelle 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 quil 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 » « 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 »

4 Le Web et laccessibilité 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, dune 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é. Laccès par tous quel que soit le handicap en est un aspect essentiel » « La puissance du Web réside dans son universalité. Laccès par tous quel que soit le handicap en est un aspect essentiel » Le problème ne réside pas dans laccès à linformatique (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 lutilisation 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.

5 Le Web et laccessibilité 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 sen 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 sen trouvent dautant réduits. Les sites accessibles deviennent utilisables à partir d'ordinateurs dentrée de gamme disposant de connexions Internet plus lentes, etc. Ceci permet également daméliorer la portabilité des sites sur lensemble des supports daffichage tels quun 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

6 Lattachement de Microsoft à laccessibilité Lexpression du plein potentiel de chacun La mission de Microsoft est de mettre son expertise, sa capacité dinnovation 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 lexpression de leur potentiel Nous soutenons la vision dune technologie informatique qui puisse se mettre au service de chacun, y compris pour celles et ceux souffrant de handicaps

7 Lattachement de Microsoft à laccessibilité Un engagement permanent dans la durée Depuis plus de 15 ans, nous explorons et faisons évoluer les technologies daccessibilité Ainsi, dès 1988, nous avons lancé nos premiers travaux dans le domaine de laccessibilité en collaboration avec le Trace Research and Development Center de luniversité de Madison dans le Wisconsin Ceci nous a permis de développer, à destination des sourds et des malentendants ainsi quaux 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 aujourdhui mais ayant considérablement évolué) de simplifier les opérations de clavier et de souris et de fournir un retour visuel quand lordinateur émet des sons (ShowSounds), tout en permettant à des périphériques spécialisés dinteragir avec lordinateur à travers un port série (SerialKeys). Depuis, cet effort sest constamment poursuivi A ce effet, nous avons construit de nombreux partenariats afin daccélérer linnovation en matière daccessibilité

8 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 dune 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 lesthétique revêtaient une très grande importance Source Wikipedia : 8

9 Le Web 2.0 Le Web 2.0, quant à lui, voit larrivée dun Web de plus en plus orienté vers linteraction 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 lutilisateur plutôt que sur les sites web traditionnels Source Wikipedia : 9

10 Le Web 2.0 Linfrastructure du Web 2.0 est complexe et changeante, mais on peut considérer, en première approche, quelle 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 sil utilise un certain nombre des techniques suivantes : lutilisation de CSS, dun balisage XHTML sémantiquement valide et des micro-formats ; les techniques dapplications riches telles quAJAX ; la syndication et lagrégation de contenu RSS/Atom ; la catégorisation par étiquetage ; lutilisation appropriée des URL ; une architecture REST ou des services Web XML. 10 Source Wikipedia :

11 Le Web 2.0 et laccessibilité Dans ce cadre, linjection asynchrone de contenu (que lon appelle fréquemment « Javascript And Xml » [AJAX]) présente quelques problèmes spécifiques en matière daccessibilité, 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 lavoir chargé en permettant ensuite à lutilisateur 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 nest pas prévenu (voir plus loin) 11

12 Développer des applications Web accessibles On peut considérer que laccessibilité des applications Web obéit à une certaine hiérarchie en matière de complexité HTMLDHTMLAJAX 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 lutilisateur à 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 Ordre du DOM Notification par rappel vers la technologie dassistance 12

13 La pyramide de laccessibilité Web HTML13

14 Sémantique HTML Sémantique HTML Ordre du DOM Ordre du DOM Taille relative Taille relative Couleurs CouleursHTML14

15 HTML : Le DOM est votre Interface Sémantique HTML LinksButtonsImagesFormsHeadingsTablesListes 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

16 La pyramide de laccessibilité Web DHTML Sémantique HTML Sémantique HTML Ordre du DOM Ordre du DOM Taille relative Taille relative Couleurs CouleursHTML16

17 La pyramide de laccessibilité Web Liens et boutons Liens et boutons Evénement Click Evénement Click Ordre du DOM Ordre du DOMDHTML Sémantique HTML Sémantique HTML Ordre du DOM Ordre du DOM Taille relative Taille relative Couleurs CouleursHTML17

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

19 La pyramide de laccessibilité Web AJA X Liens et boutons Liens et boutons Evénement Click Evénement Click Ordre du DOM Ordre du DOMDHTML Sémantique HTML Sémantique HTML Ordre du DOM Ordre du DOM Taille relative Taille relative Couleurs CouleursHTML19

20 La pyramide de laccessibilité Web Evénement « Navigate » Evénement « Navigate » AJA X Liens et boutons Liens et boutons Evénement Click Evénement Click Ordre du DOM Ordre du DOMDHTML Sémantique HTML Sémantique HTML Ordre du DOM Ordre du DOM Taille relative Taille relative Couleurs CouleursHTML20

21 La problématique AJAX Linjection de contenu asynchrone appelée Javascript And Xml [AJAX] présente une problématique spécifique pour laccessibilité : 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 lavoir chargé et en permettant alors à lutilisateur 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 linstantané Le navigateur génère un événement navigate en réponse à un événement onclick sur un lien Le navigateur génère un événement navigate en réponse à un événement onclick sur un lien 21

22 La problématique AJAX AJAX fonctionne en ne mettant à jour que les éléments qui ont changé sur la page Ainsi donc, linstantané nest 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 davoir accès aux prévisions météo En fait le navigateur ne génère pas dévénement et linstantané géré par le périphérique dassistance nest pas mis à jour 22

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

24 La solution de cette problématique Les lecteurs décran (comme on vient de lindiquer) prennent un instantané du contenu Web et le stockent dans un buffer en permettant aux utilisateurs dinteragir avec cet instantané. Quand un utilisateur navigue vers une nouvelle page un événement navigate est envoyé au système dexploitation, le lecteur décran intercepte cet événement et met à jour son buffer. Ceci survient aussi quand un script se déclenche à partir dun é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 nest pas possible de générer un événement navigate directement depuis un script 24

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

26 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 derreur Ensuite, le code génère une valeur URL unique et appelle location.replace() sur l cachée comme on vient de le voir 26

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

28 La solution de cette problématique Le code HTML suivant est celui de l cachée

';
Annonces Google