Embed Size (px)
DESCRIPTION
Les technologies liés au « Web 2.0 » introduisent de nombreuses fonctionnalités qui aideront les développeurs à mettre à disposition plus facilement des contenus accessibles MAIS également non accessibles. HTML 5, la nouvelle version d’HTML, n’échappe pas à ce constat. Parfois, cela peut signifier un choix ou peu de travail supplémentaire pour rendre une fonctionnalité utile et utilisable de tous. Que faut-il en retenir ? Dans ce contexte, cette session s’intéresse à l’usage des rôles et propriétés WAI-ARIA dans ce contexte : s’agit-il d’une redondance dans HTML ? Qu’en est-il par ailleurs en termes de support dans IE 9 et d’exposition aux technologies d’assistance ? La session s’intéresse à ces dimensions ainsi qu’à l’outillage disponible pour tester la compatibilité de ces technologies avec les API d'accessibilité.
Citation preview
palais des congrès Paris
7, 8 et 9 février 2012
Accessibilité du Web 2.0 avec HTML5
Aurélien LEVYTemesis
Thibault LANSSADEFullSIX
Code Session : ACC301
2 sessions pour faire un point ensemble Session ACC301 "Accessibilité du Web 2.0 avec HTML5"
Cette session !!
Session ACC201 "Adaptation du poste de travail Windows"
A revivre prochainement en webcast
Le parcours "Accessibilité Numérique" dans le cadre des Microsoft TechDays 2012
Partager une même compréhension de l’accessibilitéS’interroger sur les apports d’HTML5 dans ce contextePréciser le rôle d’ARIA, un autre standardIllustrer la réflexion avec des applications Web et mobile accessibles
Partager les retours d’expérience d’une "Web Agency" sur la mise en place de l’accessibilité
Objectifs de la session
Accessibilité, HTML5 et ARIA
1Que faut-il en comprendre et en retenir ?
Directeur général et expert accessibilitéPrésident du WaSP-ILG FranceCorédacteur du RGAA (Référentiel Général d’Accessibilité pour les Administrations)
Aurélien LEVY
Temesis
P.O.U.R vous, dès demain !30% de la population de +65 ans en 2020
Accessibilité pour qui ?
P.O.U.R tous les handicapsPerceptible, Operable, Understandable, Robuste
Accessibilité pour qui ?
P.O.U.R des raisonsmorales, économiques, juridiques, concurrences
Accessibilité pourquoi ?
Attention à l'effet nouveauté !
HTML5 néfaste ou bénéfique pour l'accessibilité ?
Attention au support !
HTML5 néfaste ou bénéfique pour l'accessibilité ?
Attention aux nouveaux usages !
HTML5 néfaste ou bénéfique pour l'accessibilité ?
+ de sens<nav>, <article>, <aside>, <header>, <footer>, etc.
+ de contenus<video>, <audio>, <canvas>, etc.
+ d'informationsdate, tel, email, required, etc.
HTML5 néfaste ou bénéfique pour l'accessibilité ?
Support navigateur et application mobileAndroid, iOS, Windows Phone
HTML5 néfaste ou bénéfique pour l'accessibilité ?
HTML5 Compatible avec ARIA ?ARIA : Accessible Rich Internet Application rôle, état, propriété pour les aides techniques :
ARIA
<ul role="tablist"><li role="presentation"><a id="tab1" href="#demo" aria-controls="demo" role="tab" aria-
selected="true" tabindex="0">Dogs</a></li>…
<div id="demo" role="tabpanel" aria-hidden="false" aria-expanded="true" aria-labelledby="tab1">
<h2>Dogs</h2>…
Le double effet "Kiss Cool" !
ARIA
HTML5required
draggable
a, img, button
h1, h2, h3
ARIAaria-required
aria-grabbed
link, img, button
aria-level
DEMO
Chat ideance
Mise en place de l’accessibilité dans les projets
2Partageons à présent deux expériences
Une première expérience : un simple formulaire
Contexte Client institutionnel Version accessible d’un
module Flash Pas de réelle
compétence en interne Temps estimé : 2 jours
Développement Méconnaissance des
critères Problème de structure
des formulaires Gestion des erreurs
ignorées Beaucoup
d’approximation Beaucoup de fausses
bonnes idées
Le bilan Objectif atteint : un formulaire « correctement accessible »Un peu d’expérience acquise ! :)
5 jours de travail dépassement budget/planningBeaucoup d’aller-retour avec l’expertUn code pas très propre…
Une première expérience : un simple formulaire
L’accessibilité, ça ne s’improvise PAS ! Plus de 130 critères dans 13 catégories Difficulté de compréhension de certains critères
L’accessibilité, ça n’est PAS une surcouche
Coté CMS : changement du modèle de données (ajout de champs) Coté Front : un js mal pensé est à refaire Le changement de structure lourd à impacter sur tous les templates
Une prise de conscience…
L’accessibilité, ça demande de l’habitude !
Utilisation des aides techniques Intégration des notions de contexte
Une prise de conscience…
Formations AccessiWeb pour 3 développeurs 3500€/pers + 7-8 j
Evangélisation / vulgarisation en interneIntégration des critères de présence comme base de développementEcriture des scripts avec orientation accessible (non intrusif, sémantique)
Séparation stricte fond / forme / comportement Pas d’action forte, ajustement au fur et à mesure
…ET des actions
Une seconde expérience : la refonte complète (front +back)
Contexte : Client non soumis au RGAA Site complet (1000 pages,
+10 templates) Graphisme avancé,
animation, interaction Labellisation Argent
demandée Beaucoup plus
ambitieux
Développement : Meilleure anticipation
des contraintes (présence + js)
Adaptation graphique (problème de cohérence, de contraste)
Quelques erreurs (image texte, structure, changement de langue, css désactivée…)
Le bilan Délai / budget tenuImplication forte de toute la chaîne de productionQualité de développement finale
Problème avec les critères de pertinencePDF existant à refaireLourdeur de gestion des vidéos (sous-titre + transcript)Erreurs dans la gestion des événements clavier.
Une seconde expérience : la refonte complète (front +back)
L’accessibilité, ça ne s’improvise PAS !
Surtout pour les catégories de critères Médias
Vidéo Fichier joint dans un format accessible
Scripts Gestion du clavier et du focus Fonctionnement sans script
Que faut-il en retenir ?
L’accessibilité est globale au projet Responsabilisation des graphistes, développeurs, manager et
contributeurs
L’accessibilité dès le début Plus simple à mettre en œuvre lors de la conception initiale En partie prêt pour une labellisation future
La labellisation est jusqu’au-boutiste La perfection est attendue, mais ça va s’améliorer (MIPAW)
Mais l’accessibilité reste un bon guide pour le projet
Qualité finale, implication des équipes
Que faut-il en retenir ?
Les critères de présence sont faciles à intégrer Donc pourquoi ne pas le faire systématiquement ?
Les critères de pertinence nécessite une formation des contributeurs
Ils seront garant de la pertinence des textes, et à ce titre doivent être formé/guidé
Pas d’improvisation mais pas de défis irréalisables !
Que faut-il en retenir ?
Une première expérience : un simple formulaire
Prise de conscience et actions Formation Evangélisation / explication / vulgarisation Modifications des processus
Une seconde expérience : la refonte complète Difficultés rencontrées Difficultés anticipées !
Mis en place de l’accessibilité
ANNONCE
Accessibility First StepDiscussion autour des consignes de bases à suivre obligatoirement avant de commencer à travailler réellement sur l'accessibilité pour un intégrateur web
https://checklists.opquast.com/firststepv1/workshop/
ANNONCE
6ième Forum européen de l'accessibilité numériquePlacer l’accessibilité numérique au cœur des systèmes d’information
http://inova.snv.jussieu.fr/evenements/colloques/colloques/76_index_fr.html#contenu
Innovez avec HTML5
mais innovez accessible ! :)
En guise de conclusion
Chaque semaine, les DevCampsALM, Azure, Windows Phone, HTML5, OpenData
http://msdn.microsoft.com/fr-fr/devcamp
Téléchargement, ressources et toolkits : RdV sur MSDN
http://msdn.microsoft.com/fr-fr/
Les offres à connaître 90 jours d’essai gratuit de Windows Azure
www.windowsazure.fr
Jusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN www.visualstudio.fr
Pour aller plus loin
10 février 2012
Live Meeting
Open Data - Développer des applications riches avec le protocole Open Data
16 février 2012
Live Meeting
Azure series - Développer des applications sociales sur la plateforme Windows Azure
17 février 2012
Live Meeting Comprendre le canvas avec Galactic et la librairie three.js
21 février 2012
Live Meeting La production automatisée de code avec CodeFluent Entities
2 mars 2012
Live Meeting
Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android
6 mars 2012
Live Meeting Nuget et ALM
9 mars 2012
Live Meeting Kinect - Bien gérer la vie de son capteur
13 mars 2012
Live Meeting Sharepoint series - Automatisation des tests
14 mars 2012
Live Meeting
TFS Health Check - vérifier la bonne santé de votre plateforme de développement
15 mars 2012
Live Meeting
Azure series - Développer pour les téléphones, les tablettes et le cloud avec Visual Studio 2010
16 mars 2012
Live Meeting
Applications METRO design - Désossage en règle d'un template METRO javascript
20 mars 2012
Live Meeting
Retour d'expérience LightSwitch, Optimisation de l'accès aux données, Intégration Silverlight
23 mars 2012
Live Meeting
OAuth - la clé de l'utilisation des réseaux sociaux dans votre application
Prochaines sessions des Dev Camps
"Etre meilleur ensemble"Centre de développement Accessibilité MSDN France
conseils, des outils, des méthodes afin de faire enfin de l’accessibilité numérique une réalité du quotidien, que ce soit dans la conception de sites Web, de documents ou d’applications
http://msdn.microsoft.com/fr-fr/dd759316.aspx Son équivalent MSDN US
http://msdn.microsoft.com/en-us/windows/bb735024.aspx
Pour aller plus loin
Tester l’accessibilité de ses contenus et la compatibilité avec les technologies d'assistance
Suppose un outillage d’inspection pour les propriétés d’accessibilité
Weblog Microsoft Windows Automation Cf. billet Windows Automation API SDK Tools
Ex. AccChecker, un outil de détection de problèmes d’accessibilité avec MSAA
Ex. UI Verify, un outil de test de fournisseurs UIA Mais aussi Inspect32 et UI Spy
Pour aller plus loin
Site de l’institut de l’accessibilité numérique
http://accessibilite-numerique.org
Site Web AccessiWeb http://www.accessiweb.org
Site Web Microsoft France Accessibilité pour tous http://www.microsoft.com/france/accessibilite/ Son équivalent US
http://www.microsoft.com/enable/
Pour aller plus loin
L’IAN a pour vocation de rassembler les initiatives et les compétences reconnues dans le domaine de l’accessibilité numérique
Site J’en crois pas mes yeux
http://www.jencroispasmesyeux.com/site/
Pour aller plus loin
On peut rire de tout mais pas avec n’importe qui
Pierre Desproges
Microsoft France39, quai du président Roosevelt
92130 Issy-Les-Moulineaux
www.microsoft.com/france
