SlideShare ist ein Scribd-Unternehmen logo
1 von 14
L’accessibilité du Web, c’est « le Web pour tous » !
             Le 9 octobre 2012 au Cégep de Sainte-Foy




L’accessibilité pas à pas



Aurélien Levy
CEO - Temesis
Qualité et accessibilité web depuis 2000
11 personnes en télétravail (France, Québec, Belgique)
                                       Membre du W3C


                        Moi ?
                        •   Expert Accessiweb en 2004
                        •   Rédacteur du Référentiel Général d’Accessibilité pour
                            les Administrations (RGAA)
                        •   Co-créateur liste de discussion Accesstech




                                                                            1
Les problématiques

1. Où sont les consignes de développement claires ?

2. Comment motiver les équipes
   et rendre visible le chemin accompli ?

3. Quelle priorité choisir ?

4. Comment monter en compétences
   avec peu de temps et d’argent ?



                                                      2
La solution de l’amélioration continue

1. Commencer petit pour devenir grand

2. Indicateurs et tableau de bord

3. Répartir et prioriser les tâches correctives par profils

4. Evaluation formative




                                                              3
Commencer petit pour devenir grand

« Pas à pas vers les WCAG2 » des listes de consignes pour
les intégrateurs :

1. http://checklists.opquast.com/fr/accessibilityfirststep
   Les erreurs à ne pas commettre et les choses à faire
   (totalement automatiques)

2. http://checklists.opquast.com/fr/accessibilitysecondste
   p
   Les risques à anticiper (semi automatiques)


                                                         4
Exemple

• tout contenu non-textuel présenté à l'utilisateur a-t-il
  un équivalent textuel qui remplit une fonction
  équivalente ?



• Utiliser un attribut alt pour l’élément img
• Ne pas utiliser d'attribut alt vide si l'élément est le seul
  enfant d'un élément a ou button




                                                             5
Exemple

• la fonction de chaque lien est-elle déterminée par le
  texte du lien seul ou par le texte du lien associé à un
  contexte du lien déterminé par un programme
  informatique, sauf si la fonction du lien est ambiguë
  pour tout utilisateur ?



• Utiliser avec précaution l'attribut target avec la valeur
  _blank pour l'élément a



                                                              6
Indicateurs et tableau de bord

• Rendre visible la démarche et les efforts

• Susciter la concurrence

• Fixer des objectifs restreints en continu

• Collégialité de la démarche




                                              7
Exemple

• Baromètre qualité web ministères (France)
http://temesis-etudes.opquast.net/barometers/qualite-
ministeres

À venir accessibilité des Ministères
et organismes publics du Québec (novembre)




                                                        8
Répartir et prioriser les tâches

• Déterminer les tâches correctives

• Répartir et estimer pour chaque profil

• Prioriser et mutualiser




                                           9
Exemple

• Liste tâches correctives

• Répartition des responsabilités BOEW
http://wet-boew.github.com/wet-boew/demos/arb-
rra/arb-rra-fra.html




                                                 1
                                                 0
L’évaluation formative

• Mettre à disposition des outils de test simples

• Intégrer les outils le plus en amont possible

• Fournir le matériel pédagogique au moment opportun
  et en quantité limité

• Parler dans le langage de la cible



                                                       1
                                                       1
Exemple

• Opquast Desktop (extension Firefox open source)
  https://addons.mozilla.org/fr/firefox/addon/opquast-
  desktop/

• Evaluation à 4 mains




                                                         1
                                                         2
Questions ?




              18, rue Lucien Granet -
              33150 Cenon - France
              Tél. : +33 (0)5 56 401 402
              www.temesis.com
              aurelien.levy@temesis.com




                                           1
                                           3

Weitere ähnliche Inhalte

Andere mochten auch

Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessidayVous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessidaylevy aurélien
 
opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31levy aurélien
 
atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007levy aurélien
 
Nouveaux usages des archives audiovisuelles numériques
Nouveaux usages des archives audiovisuelles numériquesNouveaux usages des archives audiovisuelles numériques
Nouveaux usages des archives audiovisuelles numériquesAtelier des Arkéonautes
 
HTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossibleHTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossiblelevy aurélien
 

Andere mochten auch (8)

Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessidayVous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
 
opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31
 
atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007
 
Mobile confoo 2013
Mobile confoo 2013Mobile confoo 2013
Mobile confoo 2013
 
Nouveaux usages des archives audiovisuelles numériques
Nouveaux usages des archives audiovisuelles numériquesNouveaux usages des archives audiovisuelles numériques
Nouveaux usages des archives audiovisuelles numériques
 
Le studio SAPHIR pour segmenter et décrire des documents audiovisuels, visuel...
Le studio SAPHIR pour segmenter et décrire des documents audiovisuels, visuel...Le studio SAPHIR pour segmenter et décrire des documents audiovisuels, visuel...
Le studio SAPHIR pour segmenter et décrire des documents audiovisuels, visuel...
 
HTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossibleHTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossible
 
Steps to WCAG 2.0
Steps to WCAG 2.0Steps to WCAG 2.0
Steps to WCAG 2.0
 

Ähnlich wie A11y pas à pas

Sp Parisweb 17112007
Sp Parisweb 17112007Sp Parisweb 17112007
Sp Parisweb 17112007slidingian
 
Iwebyou - plaquette produit - e-learning
Iwebyou - plaquette produit - e-learningIwebyou - plaquette produit - e-learning
Iwebyou - plaquette produit - e-learningAlexandre Bouvard
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphonyTonySARR1
 
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013Jean-Luc Peuvrier
 
Accessibilité numérique et Industrialisation @Orange
Accessibilité numérique et Industrialisation @Orange Accessibilité numérique et Industrialisation @Orange
Accessibilité numérique et Industrialisation @Orange vincent aniort
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfghiz-
 
La professionnalisation des étudiants en informatique par les projets libres,...
La professionnalisation des étudiants en informatique par les projets libres,...La professionnalisation des étudiants en informatique par les projets libres,...
La professionnalisation des étudiants en informatique par les projets libres,...Morgan Magnin
 
La trilogie stratégique des MOOCs
La trilogie stratégique des MOOCsLa trilogie stratégique des MOOCs
La trilogie stratégique des MOOCsRémi Bachelet
 
Bonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GEDBonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GEDNuxeo
 
Pasdecalais.fr, histoire d'une démarche d'accessibilité
Pasdecalais.fr, histoire d'une démarche d'accessibilitéPasdecalais.fr, histoire d'une démarche d'accessibilité
Pasdecalais.fr, histoire d'une démarche d'accessibilitéБертран Бинуа
 
The mooc agency - Web-conférence du FFFOD du 10/12/13
The mooc agency - Web-conférence du FFFOD du 10/12/13The mooc agency - Web-conférence du FFFOD du 10/12/13
The mooc agency - Web-conférence du FFFOD du 10/12/13FFFOD
 
20130523 04 - Grille d'évaluation - Gestion du patrimoine de test
20130523 04 - Grille d'évaluation - Gestion du patrimoine de test20130523 04 - Grille d'évaluation - Gestion du patrimoine de test
20130523 04 - Grille d'évaluation - Gestion du patrimoine de testLeClubQualiteLogicielle
 
Pascal Morenton PLM March 2009
Pascal Morenton PLM March 2009Pascal Morenton PLM March 2009
Pascal Morenton PLM March 2009guest24d837
 
MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)Cégep à distance
 
Plateforme d’e learning
Plateforme d’e learningPlateforme d’e learning
Plateforme d’e learningEl Aber Haythem
 
Presentation Action Ti 2009 04 21
Presentation Action Ti 2009 04 21Presentation Action Ti 2009 04 21
Presentation Action Ti 2009 04 21canadadri
 
Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)vincent aniort
 
La professionnalisation des étudiants en informatique par les projets libres.
La professionnalisation des étudiants en informatique par les projets libres.La professionnalisation des étudiants en informatique par les projets libres.
La professionnalisation des étudiants en informatique par les projets libres.here_and_there
 

Ähnlich wie A11y pas à pas (20)

Sp Parisweb 17112007
Sp Parisweb 17112007Sp Parisweb 17112007
Sp Parisweb 17112007
 
Iwebyou - plaquette produit - e-learning
Iwebyou - plaquette produit - e-learningIwebyou - plaquette produit - e-learning
Iwebyou - plaquette produit - e-learning
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphony
 
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
 
Accessibilité numérique et Industrialisation @Orange
Accessibilité numérique et Industrialisation @Orange Accessibilité numérique et Industrialisation @Orange
Accessibilité numérique et Industrialisation @Orange
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdf
 
La professionnalisation des étudiants en informatique par les projets libres,...
La professionnalisation des étudiants en informatique par les projets libres,...La professionnalisation des étudiants en informatique par les projets libres,...
La professionnalisation des étudiants en informatique par les projets libres,...
 
La trilogie stratégique des MOOCs
La trilogie stratégique des MOOCsLa trilogie stratégique des MOOCs
La trilogie stratégique des MOOCs
 
Bonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GEDBonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GED
 
Pasdecalais.fr, histoire d'une démarche d'accessibilité
Pasdecalais.fr, histoire d'une démarche d'accessibilitéPasdecalais.fr, histoire d'une démarche d'accessibilité
Pasdecalais.fr, histoire d'une démarche d'accessibilité
 
The mooc agency - Web-conférence du FFFOD du 10/12/13
The mooc agency - Web-conférence du FFFOD du 10/12/13The mooc agency - Web-conférence du FFFOD du 10/12/13
The mooc agency - Web-conférence du FFFOD du 10/12/13
 
20130523 04 - Grille d'évaluation - Gestion du patrimoine de test
20130523 04 - Grille d'évaluation - Gestion du patrimoine de test20130523 04 - Grille d'évaluation - Gestion du patrimoine de test
20130523 04 - Grille d'évaluation - Gestion du patrimoine de test
 
Solutions Linux 2010
Solutions Linux 2010Solutions Linux 2010
Solutions Linux 2010
 
Pascal Morenton PLM March 2009
Pascal Morenton PLM March 2009Pascal Morenton PLM March 2009
Pascal Morenton PLM March 2009
 
MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)
 
Plateforme d’e learning
Plateforme d’e learningPlateforme d’e learning
Plateforme d’e learning
 
Presentation Action Ti 2009 04 21
Presentation Action Ti 2009 04 21Presentation Action Ti 2009 04 21
Presentation Action Ti 2009 04 21
 
Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)
 
La professionnalisation des étudiants en informatique par les projets libres.
La professionnalisation des étudiants en informatique par les projets libres.La professionnalisation des étudiants en informatique par les projets libres.
La professionnalisation des étudiants en informatique par les projets libres.
 
Leslnfiltrés
LeslnfiltrésLeslnfiltrés
Leslnfiltrés
 

A11y pas à pas

  • 1. L’accessibilité du Web, c’est « le Web pour tous » ! Le 9 octobre 2012 au Cégep de Sainte-Foy L’accessibilité pas à pas Aurélien Levy CEO - Temesis
  • 2. Qualité et accessibilité web depuis 2000 11 personnes en télétravail (France, Québec, Belgique) Membre du W3C Moi ? • Expert Accessiweb en 2004 • Rédacteur du Référentiel Général d’Accessibilité pour les Administrations (RGAA) • Co-créateur liste de discussion Accesstech 1
  • 3. Les problématiques 1. Où sont les consignes de développement claires ? 2. Comment motiver les équipes et rendre visible le chemin accompli ? 3. Quelle priorité choisir ? 4. Comment monter en compétences avec peu de temps et d’argent ? 2
  • 4. La solution de l’amélioration continue 1. Commencer petit pour devenir grand 2. Indicateurs et tableau de bord 3. Répartir et prioriser les tâches correctives par profils 4. Evaluation formative 3
  • 5. Commencer petit pour devenir grand « Pas à pas vers les WCAG2 » des listes de consignes pour les intégrateurs : 1. http://checklists.opquast.com/fr/accessibilityfirststep Les erreurs à ne pas commettre et les choses à faire (totalement automatiques) 2. http://checklists.opquast.com/fr/accessibilitysecondste p Les risques à anticiper (semi automatiques) 4
  • 6. Exemple • tout contenu non-textuel présenté à l'utilisateur a-t-il un équivalent textuel qui remplit une fonction équivalente ? • Utiliser un attribut alt pour l’élément img • Ne pas utiliser d'attribut alt vide si l'élément est le seul enfant d'un élément a ou button 5
  • 7. Exemple • la fonction de chaque lien est-elle déterminée par le texte du lien seul ou par le texte du lien associé à un contexte du lien déterminé par un programme informatique, sauf si la fonction du lien est ambiguë pour tout utilisateur ? • Utiliser avec précaution l'attribut target avec la valeur _blank pour l'élément a 6
  • 8. Indicateurs et tableau de bord • Rendre visible la démarche et les efforts • Susciter la concurrence • Fixer des objectifs restreints en continu • Collégialité de la démarche 7
  • 9. Exemple • Baromètre qualité web ministères (France) http://temesis-etudes.opquast.net/barometers/qualite- ministeres À venir accessibilité des Ministères et organismes publics du Québec (novembre) 8
  • 10. Répartir et prioriser les tâches • Déterminer les tâches correctives • Répartir et estimer pour chaque profil • Prioriser et mutualiser 9
  • 11. Exemple • Liste tâches correctives • Répartition des responsabilités BOEW http://wet-boew.github.com/wet-boew/demos/arb- rra/arb-rra-fra.html 1 0
  • 12. L’évaluation formative • Mettre à disposition des outils de test simples • Intégrer les outils le plus en amont possible • Fournir le matériel pédagogique au moment opportun et en quantité limité • Parler dans le langage de la cible 1 1
  • 13. Exemple • Opquast Desktop (extension Firefox open source) https://addons.mozilla.org/fr/firefox/addon/opquast- desktop/ • Evaluation à 4 mains 1 2
  • 14. Questions ? 18, rue Lucien Granet - 33150 Cenon - France Tél. : +33 (0)5 56 401 402 www.temesis.com aurelien.levy@temesis.com 1 3