laccessibilité numérique à lheure du web 2.0 bernard ourghanlian chief technology & security...
TRANSCRIPT
L’accessibilité L’accessibilité numérique à l’heure du numérique à l’heure du Web 2.0Web 2.0
Bernard OurghanlianBernard OurghanlianChief Technology & Security OfficerChief Technology & Security OfficerMicrosoft FranceMicrosoft France
Le Web et l’accessibilitéLe Web et l’accessibilitéTim Berners-Lee, directeur du W3C et « inventeur » du World Wide Tim Berners-Lee, directeur du W3C et « inventeur » du World Wide Web, donne cette définition de l’accessibilité numérique :Web, donne cette définition de l’accessibilité numérique :
En d’autres termes, l'accessibilité numérique peut se définir En d’autres termes, l'accessibilité numérique peut se définir simplement comme « la capacité d'une personne – quel qu’elle soit simplement comme « la capacité d'une personne – quel qu’elle soit – à accéder à la toile » : un site Web est accessible s'il peut être – à accéder à la toile » : un site Web est accessible s'il peut être utilisé indifféremment par une personne présentant ou non un utilisé indifféremment par une personne présentant ou non un handicap quel qu’il soit. Le contenu, les caractéristiques et les handicap quel qu’il soit. Le contenu, les caractéristiques et les services offerts par un site se doivent d’être accessibles à un public services offerts par un site se doivent d’être accessibles à un public aussi large que possible, indépendamment de l'âge, d'un handicap aussi large que possible, indépendamment de l'âge, d'un handicap ou des limites de la technologie ou de l'environnement de ou des limites de la technologie ou de l'environnement de l'utilisateur.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 »
Le Web et l’accessibilitéLe Web et l’accessibilitéL'utilisation du Web fait partie intégrante de notre vie L'utilisation du Web fait partie intégrante de notre vie quotidienne et se répand rapidement dans tous les quotidienne et se répand rapidement dans tous les domaines de la société. Le Web constitue, à ce titre, la domaines de la société. Le Web constitue, à ce titre, la source d'information la plus globale. source d'information la plus globale. Pour autant, les personnes handicapées éprouvent des Pour autant, les personnes handicapées éprouvent des difficultés à utiliser à ce médium, ainsi que, d’une façon difficultés à utiliser à ce médium, ainsi que, d’une façon générale, les services (interactifs) proposés en ligne. générale, les services (interactifs) proposés en ligne. Comme le souligne Tim Berners-Lee, directeur du W3C et Comme le souligne Tim Berners-Lee, directeur du W3C et « inventeur » du World Wide Web :« inventeur » du World Wide Web :« « La puissance du Web réside dans son universalité. L’accès par La puissance du Web réside dans son universalité. L’accès par
tous quel que soit le handicap en est un aspect essentieltous quel que soit le handicap en est un aspect essentiel » »
Le problème ne réside pas dans l’accès à l’informatique Le problème ne réside pas dans l’accès à l’informatique (selon certaines études, les personnes handicapées visuelles (selon certaines études, les personnes handicapées visuelles seraient deux fois plus équipées en ordinateur que la seraient deux fois plus équipées en ordinateur que la moyenne nationale de la France). moyenne nationale de la France). Le problème réside réellement dans l’utilisation du Le problème réside réellement dans l’utilisation du Web : les sites Web que ces personnes visitent ne Web : les sites Web que ces personnes visitent ne sont pas toujours adaptés aux dispositifs d'assistance sont pas toujours adaptés aux dispositifs d'assistance qu'elles utilisent ou n'incluent aucune caractéristique qu'elles utilisent ou n'incluent aucune caractéristique d'accessibilité, même élémentaire.d'accessibilité, même élémentaire.
Le Web et l’accessibilitéLe Web et l’accessibilitéL'accessibilité du Web est souvent perçue comme le L'accessibilité du Web est souvent perçue comme le fait de donner accès aux contenus numériques pour les fait de donner accès aux contenus numériques pour les personnes handicapéespersonnes handicapéesPourtant, rendre un site accessible présente d'autres Pourtant, rendre un site accessible présente d'autres avantages dépassant largement le simple champ du avantages dépassant largement le simple champ du handicap et va bien au-delà de la compatibilité des handicap et va bien au-delà de la compatibilité des aides techniques aides techniques des personnes handicapées avec les des personnes handicapées avec les sites Websites WebCeci est loin de se limiter aux personnes handicapéesCeci est loin de se limiter aux personnes handicapéesLorsque l'information Web est conçue et réalisée pour être Lorsque l'information Web est conçue et réalisée pour être accessible aux personnes handicapéesaccessible aux personnes handicapées
Les sites résultants s’en trouvent généralement construits de 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 manière plus logique et mettent l'accent sur le contenu plutôt que sur la fourniture d'informationque sur la fourniture d'informationLes frais de maintenance s’en trouvent d’autant réduits.Les frais de maintenance s’en trouvent d’autant réduits.Les sites accessibles deviennent utilisables à partir d'ordinateurs Les sites accessibles deviennent utilisables à partir d'ordinateurs d’entrée de gamme disposant de connexions Internet plus d’entrée de gamme disposant de connexions Internet plus lentes, etc.lentes, etc.
Ceci permet également d’améliorer la portabilité des sites sur Ceci permet également d’améliorer la portabilité des sites sur l’ensemble des supports d’affichage tels qu’un téléphone l’ensemble des supports d’affichage tels qu’un téléphone mobile avec accès Internet ou un assistant numérique mobile avec accès Internet ou un assistant numérique personnelpersonnel
Constat important quand on comptabilise 810 millions de Constat important quand on comptabilise 810 millions de terminaux mobiles vendus en 2005terminaux mobiles vendus en 2005
Le Web 2.0Le Web 2.0Web 2.0 Web 2.0 est un terme souvent utilisé pour est un terme souvent utilisé pour désigner ce qui est perçu comme une transition désigner ce qui est perçu comme une transition importante du Web, passant d'une collection de importante du Web, passant d'une collection de sites Web à une plate-forme informatique à part sites Web à une plate-forme informatique à part entière, fournissant des applications Web aux entière, fournissant des applications Web aux utilisateursutilisateurs
Ainsi, dans sa conception originale, le Web Ainsi, dans sa conception originale, le Web (nommé dans ce contexte le « Web 1.0 ») (nommé dans ce contexte le « Web 1.0 ») comprenait des pages Web statiques qui étaient comprenait des pages Web statiques qui étaient rarement mises à jour, voire jamais rarement mises à jour, voire jamais
Le succès du Web se fondait essentiellement sur un Web Le succès du Web se fondait essentiellement sur un Web dynamique, où des systèmes de gestion de contenu servaient dynamique, où des systèmes de gestion de contenu servaient des pages Web dynamiques, créées à la volée à partir d’une des pages Web dynamiques, créées à la volée à partir d’une base de données en constant changementbase de données en constant changement
Le Web était considéré principalement comme un outil de Le Web était considéré principalement comme un outil de diffusion et de visualisation de données, où des aspects comme 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 le nombre de pages vues et l’esthétique revêtaient une très grande importancegrande importance
Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 88
Le Web 2.0Le Web 2.0Le Web 2.0, quant à lui, voit l’arrivée Le Web 2.0, quant à lui, voit l’arrivée d’un Web de plus en plus orienté vers d’un Web de plus en plus orienté vers l’interaction entre les utilisateurs et la l’interaction entre les utilisateurs et la création de réseaux sociaux création de réseaux sociaux rudimentaires, pouvant servir du rudimentaires, pouvant servir du contenu exploitant les effets de contenu exploitant les effets de réseau, avec ou sans réel rendu réseau, avec ou sans réel rendu visuel et interactif de pages Web. visuel et interactif de pages Web.
En ce sens, les sites « Web 2.0 » En ce sens, les sites « Web 2.0 » agissent plus comme des points de agissent plus comme des points de présence, ou des portails Web présence, ou des portails Web centrés sur l’utilisateur plutôt que sur centrés sur l’utilisateur plutôt que sur les sites web traditionnelsles sites web traditionnels
Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 99
Le Web 2.0Le Web 2.0L’infrastructure du Web 2.0 est complexe et L’infrastructure du Web 2.0 est complexe et changeante, mais on peut considérer, en première changeante, mais on peut considérer, en première approche, qu’elle inclut les logiciels de serveur, la approche, qu’elle inclut les logiciels de serveur, la syndication de contenu, les protocoles de syndication de contenu, les protocoles de messagerie, des standards de navigation, et des messagerie, des standards de navigation, et des applications clientes diverses. applications clientes diverses.
Un site peut ainsi être appelé comme utilisant une Un site peut ainsi être appelé comme utilisant une approche Web 2.0 s’il utilise un certain nombre des approche Web 2.0 s’il utilise un certain nombre des techniques suivantes :techniques suivantes :
l’utilisation de CSS, d’un balisage XHTML sémantiquement l’utilisation de CSS, d’un balisage XHTML sémantiquement valide et des micro-formats ; valide et des micro-formats ;
les techniques d’applications riches telles qu’AJAX ; les techniques d’applications riches telles qu’AJAX ;
la syndication et l’agrégation de contenu RSS/Atom ; la syndication et l’agrégation de contenu RSS/Atom ;
la catégorisation par étiquetage ; l’utilisation appropriée la catégorisation par étiquetage ; l’utilisation appropriée des URL ; des URL ;
une architecture REST ou des services Web XML.une architecture REST ou des services Web XML.1010
Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0 Source Wikipedia : http://fr.wikipedia.org/wiki/Web_2.0
Le Web 2.0 et Le Web 2.0 et l’accessibilitél’accessibilitéDans ce cadre, l’injection asynchrone de Dans ce cadre, l’injection asynchrone de
contenu (que l’on appelle fréquemment contenu (que l’on appelle fréquemment « Javascript And Xml » [AJAX]) présente « Javascript And Xml » [AJAX]) présente quelques problèmes spécifiques en matière quelques problèmes spécifiques en matière d’accessibilité, notamment celui de d’accessibilité, notamment celui de permettre aux lecteurs d’écran de savoir permettre aux lecteurs d’écran de savoir que le contenu a été mis à jour sur la page. que le contenu a été mis à jour sur la page.
En effet, les lecteurs d’écran fonctionnent en En effet, les lecteurs d’écran fonctionnent en prenant un « instantané » de la page après prenant un « instantané » de la page après l’avoir chargé en permettant ensuite à l’avoir chargé en permettant ensuite à l’utilisateur de se déplacer au sein de cet l’utilisateur de se déplacer au sein de cet instantané ; il est donc nécessaire que le instantané ; il est donc nécessaire que le lecteur d’écran reçoive un évènement de type lecteur d’écran reçoive un évènement de type « navigation » pour lui permettre de mettre à « navigation » pour lui permettre de mettre à jour cet instantané car, sinon, il n’est pas jour cet instantané car, sinon, il n’est pas prévenu (voir plus loin)prévenu (voir plus loin)
1111
La pyramide de La pyramide de l’accessibilité Webl’accessibilité Web
1313
La pyramide de La pyramide de l’accessibilité Webl’accessibilité Web
1414
La pyramide de La pyramide de l’accessibilité Webl’accessibilité Web
1616
La pyramide de La pyramide de l’accessibilité Webl’accessibilité Web
1717
La pyramide de La pyramide de l’accessibilité Webl’accessibilité Web
1919
La pyramide de La pyramide de l’accessibilité Webl’accessibilité Web
2020
La problématique AJAXLa problématique AJAXL’injection de contenu asynchrone appelée L’injection de contenu asynchrone appelée Javascript And Xml [AJAX] présente une Javascript And Xml [AJAX] présente une problématique spécifique pour l’accessibilité : problématique spécifique pour l’accessibilité : il il faut faire savoir aux lecteurs d’écran quand le faut faire savoir aux lecteurs d’écran quand le contenu a été mis à jour sur la pagecontenu a été mis à jour sur la page
Ceci constitue un problème dans la mesure où les Ceci constitue un problème dans la mesure où les lecteurs d’écrans fonctionnent en prenant un lecteurs d’écrans fonctionnent en prenant un « instantané » de la page après l’avoir chargé et « instantané » de la page après l’avoir chargé et en permettant alors à l’utilisateur de se déplacer en permettant alors à l’utilisateur de se déplacer au sein de cet instantané au sein de cet instantané
Il faut donc que le lecteur d’écran reçoive un Il faut donc que le lecteur d’écran reçoive un événement événement navigatenavigate afin de mettre à jour afin de mettre à jour l’instantané l’instantané
Le navigateur génère un événement Le navigateur génère un événement navigatenavigate en en réponse à un événement réponse à un événement onclickonclick sur un lien sur un lien <href><href>2121
La problématique AJAXLa problématique AJAXAJAX fonctionne en ne mettant à jour AJAX fonctionne en ne mettant à jour que les éléments qui ont changé sur que les éléments qui ont changé sur la pagela page
Ainsi donc, l’instantané n’est pas mis Ainsi donc, l’instantané n’est pas mis à jour quand un appel AJAX met à jour quand un appel AJAX met ensuite à jour un seul élément sur la ensuite à jour un seul élément sur la pagepage
Par exemple ce qui se passe quand un Par exemple ce qui se passe quand un utilisateur ajoute une action à une utilisateur ajoute une action à une application qui gère les cours de bourse application qui gère les cours de bourse ou une ville à une application qui permet ou une ville à une application qui permet d’avoir accès aux prévisions météod’avoir accès aux prévisions météo
En fait le navigateur ne génère pas En fait le navigateur ne génère pas d’événement et l’instantané géré par le d’événement et l’instantané géré par le périphérique d’assistance n’est pas mis périphérique d’assistance n’est pas mis à jourà jour
2222
La problématique AJAXLa problématique AJAXIl faut donc trouver un moyen pour Il faut donc trouver un moyen pour faire en sorte que l’injection faire en sorte que l’injection asynchrone de contenu (AJAX) soit asynchrone de contenu (AJAX) soit accessible aux lecteurs d’écran et accessible aux lecteurs d’écran et aux autres technologies d’assistanceaux autres technologies d’assistance
2323
La solution de cette La solution de cette problématiqueproblématique
Les lecteurs d’écran (comme on vient de Les lecteurs d’écran (comme on vient de l’indiquer) prennent un instantané du contenu l’indiquer) prennent un instantané du contenu Web et le stockent dans un buffer en permettant Web et le stockent dans un buffer en permettant aux utilisateurs d’interagir avec cet instantané.aux utilisateurs d’interagir avec cet instantané.
Quand un utilisateur navigue vers une nouvelle page un Quand un utilisateur navigue vers une nouvelle page un événement événement navigatenavigate est envoyé au système est envoyé au système d’exploitation, le lecteur d’écran intercepte cet d’exploitation, le lecteur d’écran intercepte cet événement et met à jour son buffer. Ceci survient aussi événement et met à jour son buffer. Ceci survient aussi quand un script se déclenche à partir d’un événement quand un script se déclenche à partir d’un événement onclickonclick sur un lien ou un bouton sur un lien ou un bouton
Avec les mises à jour asynchrones, le contenu est Avec les mises à jour asynchrones, le contenu est retourné et ajouté au DOM après que l’événement retourné et ajouté au DOM après que l’événement navigatenavigate ait été traité ait été traité
Malheureusement, ajouter un événement Malheureusement, ajouter un événement asynchrone au DOM ne génère aucun événement asynchrone au DOM ne génère aucun événement que le lecteur d’écran puisse intercepter et il n’est que le lecteur d’écran puisse intercepter et il n’est pas possible de générer un événement pas possible de générer un événement navigatenavigate directement depuis un scriptdirectement depuis un script
2424
La solution de cette La solution de cette problématiqueproblématique
Toutefois, un événement Toutefois, un événement navigate navigate est est généré pour toute navigation, y compris généré pour toute navigation, y compris une navigation au sein d’une une navigation au sein d’une <frame><frame> ou ou d’une d’une <iframe><iframe>
Il suffit donc de créer une Il suffit donc de créer une <iframe> <iframe> cachée, dans un script, et d’y naviguer à la cachée, dans un script, et d’y naviguer à la fin de la fonction qui récupère le contenu fin de la fonction qui récupère le contenu depuis l’appel asynchronedepuis l’appel asynchrone
On navigue vers l’On navigue vers l’<iframe> <iframe> grâce à un grâce à un URL unique, créé à partir de la date et de URL unique, créé à partir de la date et de l’heure courante afin d’éviter de toucher le l’heure courante afin d’éviter de toucher le cache et de s’assurer que l’événement est cache et de s’assurer que l’événement est bien généré et en utilisant bien généré et en utilisant location.replacelocation.replace afin d’éviter afin d’éviter d’encombrer l’historique du navigateurd’encombrer l’historique du navigateur
2525
L’exemple du Blog et du L’exemple du Blog et du lecteur d’écranlecteur d’écran
Les utilisateurs de lecteur d’écran peuvent Les utilisateurs de lecteur d’écran peuvent affronter plusieurs obstacles lorsqu’ils affronter plusieurs obstacles lorsqu’ils consultent des blogsconsultent des blogs
Les nouveaux lecteurs d’écran savent Les nouveaux lecteurs d’écran savent interpréter le JavaScript : les développeurs ne interpréter le JavaScript : les développeurs ne peuvent s’appuyer sur des alternatives peuvent s’appuyer sur des alternatives NOSCRIPTNOSCRIPTSi les formulaires ne sont pas accessibles, les Si les formulaires ne sont pas accessibles, les utilisateurs peuvent ne pas être capables de utilisateurs peuvent ne pas être capables de créer du contenu ou de poster des créer du contenu ou de poster des commentairescommentairesLe contenu peut avoir été ajouté par le Le contenu peut avoir été ajouté par le propriétaire du blog dans un format non propriétaire du blog dans un format non accessibleaccessibleIl y a aussi le problème général que nous Il y a aussi le problème général que nous venons de voir en environnement AJA X : le fait venons de voir en environnement AJA X : le fait que les utilisateurs de lecteur d’écran puisse ne que les utilisateurs de lecteur d’écran puisse ne pas savoir que la page a été mise à jourpas savoir que la page a été mise à jour
Blogs : créer un contenu Blogs : créer un contenu accessibleaccessible
L’éditeur HTML doit permettre la L’éditeur HTML doit permettre la création de documents sémantiquescréation de documents sémantiques
Blogs : créer un contenu Blogs : créer un contenu accessibleaccessible
L’éditeur HTML doit fortement L’éditeur HTML doit fortement encourager les utilisateurs à inclure encourager les utilisateurs à inclure un texte alternatif pour chaque imageun texte alternatif pour chaque image
Blogs : créer un contenu Blogs : créer un contenu accessibleaccessible
Les applications Web accessibles doivent Les applications Web accessibles doivent permettre d’éviter la création de contenu permettre d’éviter la création de contenu non accessible quand c’est possiblenon accessible quand c’est possible
Inclure des textes alternatifsInclure des textes alternatifsNe pas permettre de pop-up sans message Ne pas permettre de pop-up sans message d’alerted’alerteEviter les navigationsEviter les navigationsFormulaire accessiblesFormulaire accessibles
Les applications Web accessibles doivent Les applications Web accessibles doivent encourager la création d’un contenu encourager la création d’un contenu accessible à chaque fois que c’est possibleaccessible à chaque fois que c’est possible
Options d’accessibilité par défautOptions d’accessibilité par défautContrôleur de contraste des couleursContrôleur de contraste des couleursEncouragement au balisage sémantiqueEncouragement au balisage sémantiqueAide claireAide claireInclusion en standard d’outils de test Inclusion en standard d’outils de test automatiqueautomatique
L’acccessibilité et le Web L’acccessibilité et le Web 2.02.0
Créer un environnement Créer un environnement Web 2.0 accessible c’est Web 2.0 accessible c’est
possible !possible !Ceci nécessite cependant certaines Ceci nécessite cependant certaines précautions techniques et précautions techniques et méthodologiquesméthodologiques
Suivre guides et procéduresSuivre guides et procédures
Mais plus important encore : tester Mais plus important encore : tester avec l’aide d’utilisateurs handicapés !avec l’aide d’utilisateurs handicapés !
Les « vrais » utilisateurs peuvent trouver Les « vrais » utilisateurs peuvent trouver des problèmes que les guides et les des problèmes que les guides et les procédures ne peuvent anticiperprocédures ne peuvent anticiper
Recommandations de Recommandations de mise en œuvremise en œuvre
Microsoft a le plaisir d’annoncer la disponibilité de Microsoft a le plaisir d’annoncer la disponibilité de la version 2 de son livre blanc « la version 2 de son livre blanc « Guide de Guide de conception et de réalisation de sites conception et de réalisation de sites accessibles avec les solutions Microsoftaccessibles avec les solutions Microsoft » à » à l’occasion de cette conférence l’occasion de cette conférence
Ce livre blanc constitue un guide de référence Ce livre blanc constitue un guide de référence vous permettant de produire des sites Web vous permettant de produire des sites Web accessibles basés sur la nouvelle version accessibles basés sur la nouvelle version Microsoft Office SharePoint Server 2007Microsoft Office SharePoint Server 2007
Il définit dans quelle mesure ces technologies Il définit dans quelle mesure ces technologies offrent le meilleur respect possible des critères offrent le meilleur respect possible des critères AccessiWeb au moins de niveau BronzeAccessiWeb au moins de niveau Bronze
Mise en place d’un Mise en place d’un nouveau site Web sur nouveau site Web sur l’accessibilitél’accessibilitéNous avons également le plaisir de Nous avons également le plaisir de
vous annoncer l’ouverture d’un vous annoncer l’ouverture d’un nouveau site Web dédié à nouveau site Web dédié à l’accessibilitél’accessibilité
http://www.microsoft.com/france/accessibilite http://www.microsoft.com/france/accessibilite
©© 2006 Microsoft Corporation. All rights reserved.2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only.This presentation is for informational purposes only.
MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.SUMMARY.