AcceDe Web : les notices accessibilité adaptées aux besoins des équipes Web

Transcription

1 AcceDe Web : les notices accessibilité adaptées aux besoins des équipes Web Johan Ramon et Sylvie Goldfain Atalan Catherine Berenblit et Guillaume Wurier - EDF

2 Programme de la réunion 14h40 15h10 Les notices AcceDe Web La génèse du projet Les outils à disposition : notices et Wiki Intérêt des notices en phase projet 15h10 15h45 Retours d expérience SPIE Société Générale EDF 15h45 16h00 Discussion

3 L expertise d Atalan couvre les différents domaines de l accessibilité numérique 1 Assistance à maîtrise d ouvrage (MOA) et à maîtrise d œuvre (MOE) Domaines d expertises : Web Vidéos Word et PDF I-Phone Méthodologie de projet pour création et existant 2 3 Savoir faire en formation et transfert de compétences Savoir faire en organisation et conduite de changement Formations à l accessibilité Déploiement Référentiels et normes Groupe Sensibilisation et communication Gouvernance et animation

4 En 2009, Atalan lançait un premier projet collaboratif Objectif du projet : Publier les premiers manuels méthodologiques pour apprendre à rendre les documents PDF accessibles Projet collaboratif impliquant des entreprises, des soutiens institutionnels, des professionnels 1 2 Relecture des documents par un comité de relecture étendu Plus de 50 entreprises et professionnels reconnus 3 Diffusion pour tous sur le principe du Libre Soutiens institutionnels : Licence Creative Commons Téléchargement depuis

5 En 2011, Atalan lance un nouveau projet collaboratif

6 Pourquoi AcceDe Web? Car l accessibilité numérique est devenue incontournable Les outils existent pour évaluer l accessibilité d un site mais il y a un manque d outils méthodologiques pour faciliter la mise en œuvre en phase Projet Comment prendre en compte l accessibilité en phase de conception? Respecte-il les WCAG? Méthodes de vérification de conformité Conception d un site web Le site est-il accessible? Tests de conformité RGAA Tests de conformité AccessiWeb

7 Conception d un site web Le site est-il accessible? Tests de conformité RGAA Tests de conformité AccessiWeb Graphiste, intégrateur html, développeur, contributeur, chef de projet Que doit faire chaque intervenant? Quelles règles appliquer à chacune des étapes de conception?

8 AcceDe Web a réuni plus de 50 acteurs du numérique, 10 entreprises françaises engagées et de nombreux soutiens institutionnels Les soutiens institutionnels : Agence Entreprises & Handicap, Anysurfer, Association des Paralysés de France (APF), CIGREF, ESSEC, Handirect, Hanploi, Sciences Po, Télécom ParisTech

9 Comment ces notices ont-elles été conçues? Objectif 1 Objectif 1 Méthode Proposer des documents spécifiques et dédiés aux différents intervenants d un projet Web A partir des référentiels, ventilation des tests de conformité suivant les différents intervenants Graphistes Intégrateurs html/css, développeurs Contributeurs éditoriaux Exemple 1 : Structuration de l information Critère 9.1 [Bronze] Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres? Critère 9.1 [Bronze] Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres? Critère 9.1 [Bronze] Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres? Exemple 2 : les formulaires Critère 11.1 [Bronze] Chaque champ de formulaire a-t-il une étiquette? Critère 11.1 [Bronze] Chaque champ de formulaire a-t-il une étiquette? Critère 11.1 [Bronze] Chaque champ de formulaire a-t-il une étiquette?

10 Comment ces notices ont-elles été conçues? Objectif 2 Objectif 2 Permettre une compréhension des notices par chaque intervenant métier sans formation préalable - sous forme de spécifications (et non de tests) - vocabulaire et exemples adaptés à chaque intervenant Méthode Formulations testées et validées auprès d intervenants métiers qui n avaient aucune connaissance en accessibilité Exemple : les formulaires Critère 11.1 [Bronze] Chaque champ de formulaire a-t-il une étiquette? Pour les graphistes Pour les intégrateurs html/css, développeurs «Prévoir un intitulé explicite pour chaque champ de formulaire» + illustration «à faire» / «à ne pas faire» «Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés» + exemple de code

11 Comment ces notices ont-elles été conçues? Objectif 2 Objectif 2 Permettre une compréhension des notices par chaque intervenant métier sans formation préalable - sous forme de spécifications (et non de tests) - vocabulaire et exemples adaptés à chaque intervenant Méthode Formulations testées et validées auprès d intervenants métiers qui n avaient aucune connaissance en accessibilité Exemple : Structuration de l information Critère 9.1 [Bronze] Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres? Pour les intégrateurs html/css, développeurs Pour les contributeurs éditoriaux «Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>» + exemple de code «Utiliser correctement la hiérarchie des titres» + exemples d utilisation des titres dans un CMS

12 Comment ces notices ont-elles été conçues? Objectif 3 Objectif 3 Proposer des notices permettant d obtenir un très bon niveau d accessibilité tout en étant perçues comme «simples» à mettre en oeuvre Méthode Identifier avec les équipes métiers les critères de niveau Argent et Or simples à mettre en œuvre et les intégrer aux notices Supprimer des notices les critères dont l application est rare ou moins prioritaire Exemples de critères niveau AAA intégrés aux notices AcceDe Web : Exemples de critères niveau A retirés des notices AcceDe Web : 1. Prévoir un fil d'ariane 2. Différencier visuellement la position courante dans les menus 3. Prévoir une page d'aide 4. Ne pas justifier le texte 5. Veiller à ce que les polices puissent être intégrées sous forme de texte 6. Indiquer clairement le nombre total d étapes ainsi que l étape en cours (dans les formulaires complexes) 1. Veiller à Baliser les citations en ligne avec <q>. 2. Résumer le contenu et la structure de chaque tableau de données avec l'attribut summary. 3. Renseigner l'attribut title sur chaque <frame>. 4. Indiquer la langue de chaque document en téléchargement rédigé dans une langue étrangère. 5. Doubler les images dotées d'un attribut ismap avec des liens alternatifs. 6. Renseigner le sens de lecture principal de la page avec l'attribut dir="ltr" (gauche à droite) ou dir="rtl" (droite à gauche) sur la balise <html>. 7. Utiliser l'attribut dir pour signaler les changements de sens de lecture dans le corps de la page.

13 Collaboration via réunions de travail + appel à commentaires Agences et SSII (9) : Smile, Ekino, Key Consulting, Capgemini, Atos, Ekino, ORC, WS Interactive, Frank Galey «Complet, exemples graphiques, pas de terme trop technique. Je n'avais jamais vu une telle notice jusqu'à présent. Ce manque est en partie comblé par cette notice. Nous l utiliserons dans nos projets (en l agrémentant probablement d'une vue "métier" adaptée à chaque client).» Smile «Ces fiches seront très utiles.» Provaltis «Les explications sont déjà très précises et bien claires, mais les nombreux exemples visuels sont vraiment un grand plus! J ai déjà enregistré le PDF dans mes dossiers! Je l utiliserai et le recommanderai.» ORC Entreprises (11) : Air Liquide, Alcatel Lucent, BNP Paribas, EDF, Generali, La Poste, Sanofi, SFR, SNCF, Société Générale, SPIE «Document assez générale sur les bonnes pratiques sans tomber dans les explications techniques indigestes.» La Poste «Rédaction claire, langage plus simple que les référentiels, public ciblé». Sanofi «Explicite et simple, bien plus adapté que les référentiels.» SFR «Claire, thèmes très bien découpés, utilisable comme un référentiel de bonne pratique.» Société Générale Autres dont spécialistes de l accessibilité (6) Benjamin Ach (expert accessibilité) Claire Bizingre (consultante accessibilité) Victor Brito (consultant accessibilité) Sylvie Duchateau (BrailleNet) Nicolas Fortin (Ministère de la Culture et de la Communication) Sophie Schuermans (Anysufer) Ecoles et associations (6) APF, Université de Grenoble, Université d Orléans, Sciences Po, Fédération des aveugles de France, ESSEC «Catégorisation, explication simple et compréhensible. On a l essentiel. Bien plus adapté que les référentiels» APF

14 Comment ces notices ont-elles été conçues? Objectif 4 Objectif 4 Assurer l équivalence des notices avec les référentiels et niveaux d accessibilité existants Méthode Grilles de correspondances WCAG / AccessiWeb / RGAA Voir sur le wiki AcceDe Web :

15 Les notices AcceDe Web sont librement téléchargeables depuis le 15 octobre 2012 sur

16 Le Wiki AcceDe Web

17 Diffusion des notices AcceDe Web sous licence CC BY Vous êtes libres : 1. de reproduire, distribuer et communiquer cette création au public, 2. de modifier cette création, Selon les conditions suivantes : 1. Mention de la paternité dès lors que le document est modifié 2. Vous devez mentionner clairement la mention et les logos Atalan et AcceDe Web, indiquer qu il s agit d une version modifiée, et ajouter un lien vers la page où trouver l œuvre originale :

18 Comment utiliser les notices AcceDe Web? En phase de consultation Aux différentes étapes de conception Pour la mise à jour éditoriale Pour la maintenance

19 Programme de la réunion 14h40 15h10 Les notices AcceDe Web La génèse du projet Les outils à disposition : notices et Wiki Intérêt des notices en phase projet 15h10 15h45 Retours d expérience SPIE Société Générale EDF 15h45 16h00 Discussion

20 Démarche AcceDe Web suivie lors de la refonte de l intranet Notices type AcceDe Web utilisées dès la phase de consultation Résultat : Respect de tous les critères des notices AcceDe Web Pas de ligne budgétaire accessibilité Pas de délais dans les livraisons Utilisation des notices AcceDe Web : Document de référence dès la phase de consultation pour tous les nouveaux projets (refonte du.com, renouvellement du label AccessiWeb pour SPIE Job

21 . Avril 2010 : lancement du projet Accessibilité Numérique avec conception de standards internes accessibilité suivant la démarche AcceDe Web 2011 : participation au projet AcceDe Web pour : Mise à jour des standards existants Ajout de la notice Interfaces riches et JS

22 Engagement fort sur l accessibilité depuis 2004 Avec recherche de la meilleure façon de le spécifier dans la méthodologie interne Utilisation des notices AcceDe Web -> dans la méthodologie projet -> lors de la refonte de l intranet VEOL contribution éditoriale + phase projet (méthode AGILE)

23 Intégration des notices AcceDe Web dans la méthodologie Un centre de Compétences Web et Expertise (CCWEX) au sein de la Direction des Services Partagés En charge de mettre en place des outils et méthodes Groupe Dont l ergonomie, et depuis peu l accessibilité Intégration des notices aux processus de conduite de projet Evolution du cahier des charges Chapitre Exigences techniques générales Chapitre Mise en Production Chapitre Résultats attendus Evolution de la check-list exigences CdC & CCTP Offre d appui aux projets Appui CCWEX à la conception Appui au choix et test de logiciel ou progiciel Projet pilote CRM7 de SAP Bilan

24 Accessibilité et Développer OUTILLAGE Notice «Charte graphique» pour la prise en compte de l accessibilité. Document AccedeWeb interentreprise. Disponible depuis juin 2012 OUTILLAGE Notices «HTML/CSS» et «Interfaces riches et Javascript» à l attention des développeurs Documents AccedeWeb interentreprise. Disponibilité : octobre Faire émerger 2 Préparer 3 Concevoir 4 Réaliser 5 Expérimenter 6 Déployer 7 Faire le bilan LIVRABLE Exigences d accessibilité, intégrées dans le CdC et CCTP LIVRABLE Tests d accessibilité avec Rapport d accessibilité. A effectuer au moment de la recette. «Plan de test» à définir, notamment les pages échantillon à tester. Pour les sites avec contribution LIVRABLE Plan de formation et manuel utilisateur : adapter et intégrer les notices «Charte éditoriale» (disponibilité :juin 2012) «Word accessible» et «PDF accessible» (disponibles). LIVRABLE Formation des contributeurs intégrant: Notice «Charte éditoriale» (disponible depuis juin 2012) Notice «Word accessible» (disponible) Notice «PDF accessible» (disponible).

25 Personnalisation de la notice éditoriale AcceDe Web Contexte : refonte de l intranet VEOL Sur Liferay suivant méthode AGILE avec forte dimension réseaux sociaux Au niveau éditorial : 350 animateurs de communautés qui doivent à leur tour sensibiliser les rédacteurs et contributeurs au sein de leurs propres communautés Personnalisation du modèle de notice éditoriale Temps de personnalisation : ½ journée (3-4 jours estimés sans le modèle au minimum pour webmasteur EAE) Diffusion Bilan

26 Merci de votre attention. Des questions? Johan Ramon et Sylvie Goldfain Atalan Catherine Berenblit et Guillaume Wurier - EDF