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é.

1. palais des
congrès
Paris
7, 8 et 9
février 2012

2. Accessibilité du Web 2.0 avec HTML5
Code Session : ACC301
Aurélien LEVY Thibault LANSSADE
Temesis FullSIX

3. Le parcours "Accessibilité Numérique" dans
le cadre des Microsoft TechDays 2012
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

4. Objectifs de la session
Partager une même compréhension de l’accessibilité
S’interroger sur les apports d’HTML5 dans ce contexte
Préciser le rôle d’ARIA, un autre standard
Illustrer 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é

5. Accessibilité, HTML5 et ARIA
Que faut-il en comprendre et en retenir ?
1

6. Aurélien
LEVY
Temesis général et expert accessibilité
Directeur
Président du WaSP-ILG France
Corédacteur du RGAA (Référentiel
Général d’Accessibilité pour les
Administrations)

7. Accessibilité pour qui ?
P.O.U.R vous, dès demain !
30% de la population de +65 ans en 2020

8. Accessibilité pour qui ?
P.O.U.R tous les handicaps
Perceptible, Operable, Understandable, Robuste

9. Accessibilité pourquoi ?
P.O.U.R des raisons
morales, économiques, juridiques, concurrences

10. HTML5 néfaste ou bénéfique pour
l'accessibilité ?
Attention à l'effet nouveauté !

11. HTML5 néfaste ou bénéfique pour
l'accessibilité ?
Attention au support !

12. HTML5 néfaste ou bénéfique pour
l'accessibilité ?
Attention aux nouveaux usages !

13. 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'informations
date, tel, email, required, etc.

14. HTML5 néfaste ou bénéfique pour
l'accessibilité ?
Support navigateur et application mobile
Android, iOS, Windows Phone

15. ARIA
HTML5 Compatible avec ARIA ?
ARIA : Accessible Rich Internet Application
 rôle, état, propriété pour les aides techniques :
<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>…

16. ARIA
Le double effet "Kiss Cool" !
HTML5 ARIA
required aria-required
draggable aria-grabbed
a, img, button link, img, button
h1, h2, h3 aria-level

17. DEMO
mail dojo

18. DEMO
Landmarks WordPress

19. DEMO
Chat ideance

20. Mise en place de l’accessibilité dans les
projets
Partageons à présent deux
expériences
2

21. Une première expérience : un simple
formulaire
Contexte Développement
 Client institutionnel  Méconnaissance des
 Version accessible d’un critères
module Flash  Problème de structure des
 Pas de réelle compétence formulaires
en interne  Gestion des erreurs
 Temps estimé : 2 jours ignorées
 Beaucoup d’approximation
 Beaucoup de fausses
bonnes idées

22. Une première expérience : un simple
formulaire
Le bilan
Objectif atteint : un formulaire « correctement accessible »
Un peu d’expérience acquise ! :)
5 jours de travail  dépassement budget/planning
Beaucoup d’aller-retour avec l’expert
Un code pas très propre…

23. Une prise de conscience…
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

24. Une prise de conscience…
L’accessibilité, ça demande de
l’habitude !
 Utilisation des aides techniques
 Intégration des notions de contexte

25. …ET des actions
Formations AccessiWeb pour 3 développeurs
 3500€/pers + 7-8 j
Evangélisation / vulgarisation en interne
Intégration des critères de présence comme base de
développement
Ecriture des scripts avec orientation accessible (non
intrusif, sémantique)
 Séparation stricte fond / forme / comportement
 Pas d’action forte, ajustement au fur et à mesure

26. Une seconde expérience : la refonte
complète (front +back)
Contexte : Développement :
 Client non soumis au RGAA  Meilleure anticipation des
 Site complet (1000 pages, contraintes (présence + js)
+10 templates)
 Adaptation graphique
 Graphisme avancé, (problème de cohérence,
animation, interaction
de contraste)
 Labellisation Argent
demandée  Quelques erreurs (image
texte, structure,
 Beaucoup plus
ambitieux changement de langue, css
désactivée…)

27. Une seconde expérience : la refonte
complète (front +back)
Le bilan
Délai / budget tenu
Implication forte de toute la chaîne de production
Qualité de développement finale
Problème avec les critères de pertinence
PDF existant à refaire
Lourdeur de gestion des vidéos (sous-titre + transcript)
Erreurs dans la gestion des événements clavier.

28. Que faut-il en retenir ?
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

29. 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

30. 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 !

31. Mis en place de l’accessibilité
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 !

32. ANNONCE
Accessibility First Step
Discussion 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/

33. palais des
congrès
Paris
7, 8 et 9
février 2012

34. En guise de conclusion
Innovez avec HTML5
mais innovez accessible ! :)

35. Pour aller plus loin
Chaque semaine, les DevCamps Prochaines sessions des Dev
ALM, Azure, Windows Phone, HTML5, Camps
10 février
2012
Live Meeting
Open Data - Développer des applications riches avec le protocole Open
Data
OpenData 16 février
2012
Live Meeting
Azure series - Développer des applications sociales sur la plateforme
Windows Azure
 http://msdn.microsoft.com/fr- 17 février
2012
Live Meeting Comprendre le canvas avec Galactic et la librairie three.js
fr/devcamp 21 février
2012
Live Meeting La production automatisée de code avec CodeFluent Entities
2 mars Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7,
Live Meeting
2012 iOS et Android
6 mars
Live Meeting Nuget et ALM
Téléchargement, ressources et 2012
9 mars
Live Meeting Kinect - Bien gérer la vie de son capteur
toolkits : RdV sur MSDN 2012
13 mars
Live Meeting Sharepoint series - Automatisation des tests
2012
 http://msdn.microsoft.com/fr-fr/ 14 mars
2012
Live Meeting
TFS Health Check - vérifier la bonne santé de votre plateforme de
développement
15 mars Azure series - Développer pour les téléphones, les tablettes et le cloud
Live Meeting
2012 avec Visual Studio 2010
16 mars Applications METRO design - Désossage en règle d'un template METRO
Les offres à connaître 2012
20 mars
Live Meeting
javascript
Retour d'expérience LightSwitch, Optimisation de l'accès aux données,
Live Meeting
 90 jours d’essai gratuit de Windows 2012
23 mars
Intégration Silverlight
Live Meeting OAuth - la clé de l'utilisation des réseaux sociaux dans votre application
Azure www.windowsazure.fr 2012
Jusqu’à 35% de réduction sur Visual

36. Pour aller plus loin
"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

37. 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

38. 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/

39. Pour aller plus loin
Site J’en crois pas mes yeux
 http://www.jencroispasmesyeux.com/site/

40. Microsoft France
39, quai du président Roosevelt
92130 Issy-Les-Moulineaux
www.microsoft.com/france