SlideShare une entreprise Scribd logo
1
FLUPA 2016
Télécharger
en attendant… téléchargez les outils suivants :
 Axe (extension Firefox) 
https://addons.mozilla.org/fr/firefox/addon/axe-devtools/
 Opquast desktop (extension Firefox)  https://desktop.opquast.com/fr/
 Colour Contrast Analyser 2.3 (appliquette) 
https://www.paciellogroup.com/resources/contrastanalyser/
 Wave (bookmarklet pas de page !)  http://wave.webaim.org/help
 NVDA (application Windows)  http://www.nvda-fr.org/download.php
 traitment de texte et/ou papier crayon !
@sanvin
@molidav
3
FLUPA 2016
à l’issue de cet atelier, vous saurez :
 en quoi consiste les évaluations d’accessibilité
 comment les réaliser
 et pourquoi le point de vue utilisateur est indispensable
Objectif
4
FLUPA 2016
vous n’allez pas devenir des
experts ou des auditeurs en
accessibilité…
mais vous aurez les bases et
connaitrez les outils pour effectuer
une évaluation rapide,
ce qui vous permettra de jauger le
niveau d’accessibilité d’un site ou
une application et détecter les
principaux points bloquants pour
l’utilisateur
Objectif
5
FLUPA 2016
 Introduction : 10mn
 Évaluations automatiques : 10mn
 Évaluations manuelles : 40mn
 Tests Utilisateur : 30mn
TIMMING
Introductio
n
7
FLUPA 2016
L’accessibilité numérique en quelques mots
c’est la capacité d’un service à être
 utilisable par tous
 personnes en situation de handicap
 permanent, ou temporaire
 séniors
 personnes valides
 et dans tous les contextes
 tous types de matériel
 contexte dégradé
 outils spécifiques de compensation du handicap
 l'accessibilité, un avantage pour tous, une necessité pour certains !
la télécommande a été crée pour les handicapés moteur
vous imaginez changer les chaines TV sans télécommande ?
8
FLUPA 2016
web accessibility is …
The power of the Web is in
its universality.
Access by everyone
regardless of disability is an
essential aspect.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
9
FLUPA 2016
permettre à des millions de personnes de mener une vie
aussi normale que possible
15% utilisateurs du web
directement impactés par l'accessibilité
(source Microsoft)
(enquête INSEE HID 2002)
10
FLUPA 2016
bénéfices
respect
des lois
avantages business
 accessibles à tous
 référencement amélioré
diminution des couts
de maintenance
 code de meilleure qualité
 usages multi-supports
image de marque
 interne : satisfaction et fierté
des salariés
 externe : perçu comme une
entreprise responsable et
socialement engagé
efficacité
opérationnelle
 productivité et motivation
accrues
11
FLUPA 2016
référentiel des critères d'accessibilité web
 recommandations internationales édictés par le W3C/WAI
 WAI (Web Accessibility Initiative) groupe de travail du W3C
 WCAG (Web Content Accessibility Guidelines)
 WCAG 2 (2008), devenu une norme ISO/IEC 40500:2012
 3 niveaux d'accessibilité :
niveau A : environ 1/3 des critères
niveau AA : environ 2/3 des critères
niveau AAA : TOUS les critères
12
FLUPA 2016
objectif accessibilité du Groupe Orange
respecter 70% du niveau AA
des préconisations internationales
WCAG 2.0 ( ISO/IEC 40500 )
sans aucun point bloquant
du point de vue utilisateur
13
FLUPA 2016
Évaluer rapidement l'accessibilité d'un site est important :
 En phase initiale, par exemple pour déterminer la meilleure stratégie
pour aborder l'accessibilité
 En phase d'accompagnement pour pouvoir agir sur les développements
en cours.
 En phase de production pour évaluer ou valider les livrables en
interne/externe
 En phase de qualification de produits par des prestataires extérieurs
 Pour améliorer l’accessibilité tout au long de la vie du projet
Test early, test often!
Évaluations d’accessibilité
14
FLUPA 2016
1. Evaluation automatique
2. Evaluation manuelle
3. Test utilisateur
Évaluations d’accessibilité
Evaluation
auto
16
FLUPA 2016
 le plus tôt possible par n’importe qui
 utiles mais limités :
– Uniquement la présence
– 20-30% des tests mais bien 50% des erreurs
– Beaucoup de faux-positifs
Les outils de tests automatiques ne peuvent
rien nous dire sur l'accessibilité réelle d'un
contenu.
Évaluations automatiques
17
FLUPA 2016
Convaincre, diffuser l’accessibilité et nécessaire pour bien partir :
 identifier et corriger certaines erreurs d'accessibilité
 rendre le projet autonome (intégration dans une chaine de
tests)
 assurer les basiques de l'accessibilité de manière indolore
 donc le projet fait un pas dans la mise en place de
l'accessibilité
Évaluations automatiques
18
FLUPA 2016
 Android
• Accessibility tests framework for Android
https://github.com/google/Accessibility-Test-Framework-for-Android
• Accessibility scanner appli basée sur Accessibility
tests framework for Android
 iOS
• IBM Accessibility checker
http://www-
03.ibm.com/able/accessibility_research_projects/mobile_accessibilit
y_checker.html
Évaluations automatiques mobile
19
FLUPA 2016
1. Axe, Firefox
https://addons.mozilla.org/fr/firefox/addon/axe-devtools/
• complet
• pédagogique
2. Opquast Desktop, Firefox
https://addons.mozilla.org/fr/firefox/addon/opquast-desktop/
• édition de rapport
• plus que de l’accessibilité
Évaluations automatiques web
20
FLUPA 2016
démo / TP
former des groupes (hétérogènes)
Évaluations automatiques
Evaluation
manuelle
22
FLUPA 2016
 pré requis : tests auto passés
 valeur ajoutée de l’expert accessibilité
 exhaustifs mais sur un échantillon si le périmètre est trop grand
 génération d’un rapport
 à faire le plus tôt possible après les tests automatiques pour valider des
développements
mais vous pouvez faire déjà une partie du travail,
sans être un expert, ça vous permettra de trouver les
principaux problèmes d’accessibilité
Évaluations manuelles
23
FLUPA 2016
 il faut un accès aux sources et c’est pas toujours facile
 pas de norme comme dans le web mais de bonnes pratiques (RGAA,
BBC…)
 la solution sans les sources : les tests utilisateurs
 Exemples d’applications accessibles : mon réseau, orange et moi
Évaluations manuelles sur mobile
24
FLUPA 2016
Contraste de couleur
Deux niveaux dans les WCAG: AA et AAA
Niveau AA utilisé pour le web
Contraste de 4.5 minimum pour les textes standards
Contraste de 3 minimum pour les textes de grande taille*
Niveau AAA utilisé pour les mobiles
Contraste de 7 minimum pour les textes standards
Contraste de 4.5 minimum pour les textes de grande taille
25
FLUPA 2016
Contraste de couleur
• Critère d’accessibilité
Assurer un contraste suffisant entre texte et fond
Outil : Color Contrast Analyser CCA
http://www.paciellogroup.com/resources/contrastanalyser/
Nota bene : peut être utilisé pour du mobile mais il faut utiliser des impressions
d’écran du device, sinon Accessiiblity scanner le fait !
26
FLUPA 2016
Wave, Chrome
• rapide, visuel, directement dans la page
https://chrome.google.com/webstore/detail/wave-evaluation-
tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Nota bene : il existe un bookmarklet pour tout navigateur
javascript:void(window.open('http://wave.webaim.org/report?url='+escape(
window.location)))
The Wave, Chrome
Évaluations manuelles
27
FLUPA 2016
 Donner un titre aux pages
 Donner des titres aux rubriques
 Définir des équivalents textuel
 Formulaires
 Agrandissement de la taille du texte
 Libellé des liens
 Boites de dialogues et ouverture de nouvelles fenêtres
 Ne pas utiliser la couleur ou l'information sensorielle comme seule
source d'information
 Navigation au clavier et Visibilité du focus
Principales évaluations manuelles
28
FLUPA 2016
Pour qui : tout le monde et en particulier les personnes déficientes visuelles.
Quand : dès la conception et pendant le développement.
Description :
• Donner à chaque page un titre qui lui est spécifique et qui reflète son contenu ou sa
fonction (balise <title>).
• Le titre de la page est le premier élément lu par la synthèse vocale, il doit permettre
d'identifier formellement la page sur laquelle on se trouve.
Précisions :
• Bien qu'il n'y ait pas de règle, en général, on va de l'information la plus spécifique vers la
moins spécifique (ex: nom de la page courante - nom du site).
• Lorsque le contenu de la page est modifié dynamiquement (affichage du résultat d'une
recherche, erreurs dans un formulaire, action utilisateur ajoutant du contenu...), le titre de
la page doit refléter cette modification du contenu.
Donner un titre aux pages
29
FLUPA 2016
Pour qui : tout le monde et en particulier les personnes déficientes visuelles.
Quand : dès la conception, à la rédaction du contenu et pendant le dév.
Description :
• Identifier les balises de titres à utiliser (balises HTML h1 jusqu'à h6) pour structurer le
contenu des pages.
• Les personnes malvoyantes naviguant à l'aide d'un lecteur d'écran peuvent accéder à la
liste des titres de la page pour naviguer rapidement. Tout comme dans un fichier Word il
est possible d'utiliser la table des matières si des titres ont correctement été positionnés à
l'intérieur du document.
Précisions :
• Les titres doivent être pertinents.
• Il ne doit pas exister de saut dans la hiérarchie des titres (on ne passe pas directement
d'un titre h2 à un titre h4).
• On peut mettre plusieurs h1 par page (mais =< 2).
Donner un titre aux rubriques
30
FLUPA 2016
Pour qui : les personnes déficientes visuelles, les personnes malentendantes.
Quand : dès la conception et pendant le développement.
Description :
• Mettre en place des alternatives textuelles à tous les éléments informatifs non textuels
(alternatives aux images, icones).
• De même prévoir des transcripts ou des sous-titres pour les contenus audio ou vidéo.
Définir des équivalents textuels
31
FLUPA 2016
Pour qui : tout le monde et en particulier les personnes déficientes visuelles.
Quand : lors de la conception et lors du développement.
Description :
• Chaque champ de formulaire doit être accompagné d'un libellé permettant d'identifier le
rôle du champ, le type de donnée et le format attendu.
• Ce libellé doit être proche visuellement du champ afin qu'on fasse facilement le lien entre
eux (notamment pour les utilisateur de zoom ou de loupe logicielle, voire sur mobile).
• Les champs en erreur doivent pouvoir être identifiés, si besoin, suggérer une correction.
• Ceci s'applique aux champs de saisie, mais également aux autres types de champs (liste
déroulante, bouton radio, case à cocher ...).
• Au niveau du développement, ce libellé sera associé au champ de formulaire pour faciliter
la navigation à l'aide d'un lecteur d'écran (l’attribut for de la balise label pointant sur l’ID du
champ concerné).
Formulaires
32
FLUPA 2016
Pour qui : les personnes malvoyantes et les seniors.
Quand : lors de la conception graphique et principalement lors du développement.
Description :
• La taille du texte doit pouvoir être multipliée par 2 (zoom du texte à 200% depuis les
réglages du navigateur).
• A ce niveau de zoom, la présentation de la page peut être altérée, mais l'information doit
rester lisible (pas de texte tronqué ni superposé).
• Bien que ceci doit être pris en compte pendant la phase de développement, on peut
identifier les zones de l'écran qui doivent ou non s'agrandir en même temps que la taille du
texte dès la phase de conception graphique.
• Par ailleurs, certains choix de design peuvent ou non faciliter la mise en place de ce critère
lors du développement, il est donc important d'y réfléchir dès le départ.
Agrandissement de la taille du texte
33
FLUPA 2016
Pour qui : les seniors, les personnes malvoyantes.
Quand : lors de la conception et lors du développement.
Description :
• Eviter autant que possible les actions qui ouvrent une nouvelle fenêtre (ou un nouvel
onglet) du navigateur.
• Si un lien déclenche l'ouverture d'une nouvelle fenêtre, il faudra lors du développement
faire de prévenir l’utilisateur. Ceci afin que les personnes malvoyantes sachent qu'une
nouvelle fenêtre s'ouvre.
• De même, éviter le recours systématique aux boites de dialogues pour présenter des
informations dans les pages (présentation du service ...). Celles-ci posent souvent des
problèmes d'accessibilité pour les personnes qui naviguent au clavier ou au lecteur
d'écran qui nécessiteront une attention particulière lors de la phase de développement.
Boites de dialogues et ouverture de nouvelles fenêtres
34
FLUPA 2016
Pour qui : tout le monde, en particulier les daltoniens et plus généralement les personnes
malvoyantes et les seniors.
Quand : dès la phase de conception et lors du développement.
Description :
• Ne pas utiliser la couleur ou une information sensorielle (forme, taille, son...) comme seule
façon de véhiculer de l'information, d'indiquer une action, de solliciter une réponse ou de
distinguer un élément.
Ne pas utiliser la couleur ou l'information sensorielle comme
seule source d'information
35
FLUPA 2016
Navigation au clavier et Visibilité du focus
Pour qui : tout le monde et en particulier les personnes déficientes visuelles, motrices,
cognitives et en mobilité.
Quand : lors de la conception et du développement .
Description :
• Les éléments (liens, boutons, éléments de formulaire) doivent recevoir le focus dans un
ordre logique, sans que celui-ci ne reste piégé ou bloqué, même pour du contenu généré
dynamiquement apparaissant ou disparaissant (modification du DOM, Ajax,...).
• Toutes les fonctionnalités doivent être utilisables au clavier, donc mettre en place des
gestionnaires d'événements qui ne s'appuient pas uniquement sur des événements souris.
Précisions :
• Pour valider cette exigence, la position du focus doit être visible à tous moments (propriété
outline et :focus en CSS).
• Toutes les actions importantes effectuées à la souris peuvent aussi l'être qu'avec le clavier,
quitte à proposer une alternative spécifique pour les interactions complexes (drag'ndrop,
gestes à plusieurs doigts sur mobile ...).
Test
Utilisateur
37
FLUPA 2016
 Pré requis : tests auto passés et une évaluation manuelle « encourageante »
 Les tests utilisateurs accessibilité ont une vraie valeur ajoutée :
– l’accessibilité, ce n’est pas qu’un problème technique mais humain, (ergo
de l’A11y)
– prendre en compte des contextes d’utilisation et des besoins différents
d’utilisabilité,
– prioriser les actions de correction,
– éviter les régressions,
– en un mot, anticiper les points de blocage !
Pour être avocat de l’utilisateur, rien ne vaut un test utilisateur
Évaluations utilisateurs
38
FLUPA 2016
Pré-requis 1
– Audit rapide technique pour s’assurer du niveau de prise en
compte de l’accessibilité
Pré-requis 2
– Des scénarios ou parcours utilisateurs (user story, use case)
Pré-requis 3
– Identification de la cible navigateurs/AT et les typologies
d’utilisateurs
Jauger du niveau d’accessibilité ressenti, adapter les implémentations aux différents
couples navigateur/aide technique, prendre en compte les habitudes des utilisateurs
(confort et contexte d’utilisation)
Évaluations utilisateurs
39
FLUPA 2016
Test Utilisateurs
 différent des tests utilisaters d’ergonomie ou d’utilisabilité
 Trouver des « vrais » utilisateurs de l’application en situation de handicap (déficient moteur, visuel,
auditif, mental…) utilisant différentes AT (loupe logicielle, lecteur d’écran au minimum)
 Constituer des binômes expert/utilisateur :
– Le guide : un expert accessibilité, explique, pilote et filtre les retours
– Le testeur : un utilisateur exécute les parcours utilisateurs
 Changer le testeur régulièrement au cours des tests (quantité/qualité retours)
 Résultats :
– points bloquants
– contenus inaccessibles y
– priorisation (incidence, gravité)
– propositions de corrections techniques
Mais si on est pas riche …
 On peut ne faire que des mini-tests utilisateur :
– quelques utilisateurs de lecteurs d’écran, voire former des membres de l’équipe
– test proximité distinction et navigation clavier par quelqu’un formé à l’accessiiblité
– effectuer des test rapides mais fréquents sur les parcours utilisateur
Effectuez des tests utilisateurs, même au rabais, on en tire toujours de grands
enseignements.
40
FLUPA 2016
 Un parcours utilisateur est :
– un ensemble d’instructions utilisateur,
– permettant d’effectuer une tâche précise dans l’IHM,
– cette tâche doit être une fonctionnalité principale, cruciale de
l’application
 Qui les écrit ?
– Une personne qui connait l’application et son contexte d’utilisation, soit
:
– MOA, métier, Chef de projet (MOA,MOE, fonctionnel…), Utilisateur
 Ils doivent être… clairs, précis, complets et en nombre suffisant
Parcours utilisateur, User stories
41
FLUPA 2016
Les fonctionnalités ou tâches essentielles d’une application sont celles qui
justifient son utilité pour un utilisateur, ce à quoi elle est destinée.
Par exemple :
 Pour un site de vente :
– remplir son panier,
– entrer ses coordonnées,
– procéder au paiement…
 Pour un site de prise de rendez-vous client :
– identifier le client,
– valider ses coordonnées,
– poser un rendez-vous et y laisser mettre un commentaire.
Fonctionnalité essentielle
42
FLUPA 2016
 Points bloquants
– Barrières au niveau de l’accessibilité, empêchant d’effectuer une
action
– Type de blocage, impact utilisateur, priorisation des corrections
 Exemples sur un site de vente :
– payer ses achats, somme à payer calcul JS inaccessible, priorité 1
– système de correction des erreurs inaccessible, priorité 2
– pas d’accès aux caractéristiques techniques des produits, la priorité
dépend du type de produits
 L’expert va, au final, pouvoir rédiger un rapport de évaluation afin de lister
les points bloquants ou les améliorations envisageables, les prioriser et
proposer des pistes de corrections.
Points bloquants
43
FLUPA 2016
1.Navigation clavier (handicap moteur)
2.groupement / distinction :
proximité et appartenance, straw test (malvoyant)
3.puis ensuite lecteur d’écran (aveugle)
Télécharger NVDA  http://www.nvda-fr.org/download.php
Évaluations utilisateurs
44
FLUPA 2016
 NVDA navigation web
Synthèse vocale NVDA : principaux raccourcis
45
FLUPA 2016
Synthèse vocale Talkback : principaux raccourcis
Se déplacer avec un doigt sur l’écran. Explorer l’écran et
entendre la vocalisation de l’élément qui est touché
Double-cliquer n’importe où sur l’écran. Ouvre ou active
l’élément qui a été touché (vocalisé) en dernier.
Slider vers le haut ou le bas en utilisant deux doigts. Se
déplacer verticalement sur une liste ou sur une page.
Slider vers la gauche ou le droite en utilisant deux
doigts. Changer de pages ou d’écran quand c’est possible.
Slider vers la droite ou le bas en utilisant un doigt.
Déplacer le focus TalkBack sur le prochain élément.
Slider vers la gauche ou le haut en utilisant un doigt.
Déplacer le focus TalkBack sur l’élément précédent.
Pour l’activer :
 paramètres
 accessibilité
 Talkback
46
FLUPA 2016
1. se connecter à http://www.gouvernement.fr
2. aller sur « les services du premier ministre »
3. puis « comité interministériel sur le handicap »
4. puis dans « documents »
5. et « lettre de mission »
6. lire la lettre
TP NVDA / Talkback
47
FLUPA 2016
1. se connecter « http://stop-discrimination.gouv.fr »
2. aller sur « j’agis/se faire accompagner »
3. puis « Victime de discrimination ? Contactez la structure la plus
proche de chez vous »
4. et « Bureau d'aide aux victimes du tribunal de grande instance de
Paris »
5. je veux « téléphoner au « 08 victimes » car je ne veux/peux pas
aller au tribunal et que j’ai besoin tout de même d’aide
TP NVDA / Talkback
Merci

Contenu connexe

Similaire à Flupa test a11y_16_05_2016s0f2

Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Flupa
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
wyggio
 
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
TribuAndCo
 
Un projet d’accessibilité réussi avec SNCF Réseau
Un projet d’accessibilité réussi avec SNCF RéseauUn projet d’accessibilité réussi avec SNCF Réseau
Un projet d’accessibilité réussi avec SNCF Réseau
AgoraCMS
 
R I S O M Pour Bib Op 6 Avril 2009
R I S O M Pour  Bib  Op 6 Avril 2009R I S O M Pour  Bib  Op 6 Avril 2009
R I S O M Pour Bib Op 6 Avril 2009Renaud AIOUTZ
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
Microsoft Technet France
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
Utiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformeUtiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateforme
pprem
 
Cours Html
Cours HtmlCours Html
Cours Htmladamizo
 
Paris Web
Paris WebParis Web
Paris Web
cyrildoussin
 
Un backlog public - Agile France 2012
Un backlog public - Agile France 2012 Un backlog public - Agile France 2012
Un backlog public - Agile France 2012
François Wauquier
 
Présentation QSOS aux RMLL 2007
Présentation QSOS aux RMLL 2007Présentation QSOS aux RMLL 2007
Présentation QSOS aux RMLL 2007
Raphaël Semeteys
 
2009-09-15 Squale au Paris JUG
2009-09-15 Squale au Paris JUG2009-09-15 Squale au Paris JUG
2009-09-15 Squale au Paris JUG
Fabrice Bellingard
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
atelier111
 
Presentation platform flash
Presentation platform flashPresentation platform flash
Presentation platform flash
Cynapsys It Hotspot
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
Nicolas Morin
 
20140410 - Choisir et implanter un outil de test
20140410 - Choisir et implanter un outil de test20140410 - Choisir et implanter un outil de test
20140410 - Choisir et implanter un outil de test
LeClubQualiteLogicielle
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
Benjamin LUPU
 

Similaire à Flupa test a11y_16_05_2016s0f2 (20)

Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
 
Un projet d’accessibilité réussi avec SNCF Réseau
Un projet d’accessibilité réussi avec SNCF RéseauUn projet d’accessibilité réussi avec SNCF Réseau
Un projet d’accessibilité réussi avec SNCF Réseau
 
R I S O M Pour Bib Op 6 Avril 2009
R I S O M Pour  Bib  Op 6 Avril 2009R I S O M Pour  Bib  Op 6 Avril 2009
R I S O M Pour Bib Op 6 Avril 2009
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Utiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformeUtiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateforme
 
Cours Html
Cours HtmlCours Html
Cours Html
 
Paris Web
Paris WebParis Web
Paris Web
 
Un backlog public - Agile France 2012
Un backlog public - Agile France 2012 Un backlog public - Agile France 2012
Un backlog public - Agile France 2012
 
Présentation QSOS aux RMLL 2007
Présentation QSOS aux RMLL 2007Présentation QSOS aux RMLL 2007
Présentation QSOS aux RMLL 2007
 
2009-09-15 Squale au Paris JUG
2009-09-15 Squale au Paris JUG2009-09-15 Squale au Paris JUG
2009-09-15 Squale au Paris JUG
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
 
Presentation platform flash
Presentation platform flashPresentation platform flash
Presentation platform flash
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
20140410 - Choisir et implanter un outil de test
20140410 - Choisir et implanter un outil de test20140410 - Choisir et implanter un outil de test
20140410 - Choisir et implanter un outil de test
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
titre
titretitre
titre
 

Flupa test a11y_16_05_2016s0f2

  • 1. 1 FLUPA 2016 Télécharger en attendant… téléchargez les outils suivants :  Axe (extension Firefox)  https://addons.mozilla.org/fr/firefox/addon/axe-devtools/  Opquast desktop (extension Firefox)  https://desktop.opquast.com/fr/  Colour Contrast Analyser 2.3 (appliquette)  https://www.paciellogroup.com/resources/contrastanalyser/  Wave (bookmarklet pas de page !)  http://wave.webaim.org/help  NVDA (application Windows)  http://www.nvda-fr.org/download.php  traitment de texte et/ou papier crayon !
  • 3. 3 FLUPA 2016 à l’issue de cet atelier, vous saurez :  en quoi consiste les évaluations d’accessibilité  comment les réaliser  et pourquoi le point de vue utilisateur est indispensable Objectif
  • 4. 4 FLUPA 2016 vous n’allez pas devenir des experts ou des auditeurs en accessibilité… mais vous aurez les bases et connaitrez les outils pour effectuer une évaluation rapide, ce qui vous permettra de jauger le niveau d’accessibilité d’un site ou une application et détecter les principaux points bloquants pour l’utilisateur Objectif
  • 5. 5 FLUPA 2016  Introduction : 10mn  Évaluations automatiques : 10mn  Évaluations manuelles : 40mn  Tests Utilisateur : 30mn TIMMING
  • 7. 7 FLUPA 2016 L’accessibilité numérique en quelques mots c’est la capacité d’un service à être  utilisable par tous  personnes en situation de handicap  permanent, ou temporaire  séniors  personnes valides  et dans tous les contextes  tous types de matériel  contexte dégradé  outils spécifiques de compensation du handicap  l'accessibilité, un avantage pour tous, une necessité pour certains ! la télécommande a été crée pour les handicapés moteur vous imaginez changer les chaines TV sans télécommande ?
  • 8. 8 FLUPA 2016 web accessibility is … The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  • 9. 9 FLUPA 2016 permettre à des millions de personnes de mener une vie aussi normale que possible 15% utilisateurs du web directement impactés par l'accessibilité (source Microsoft) (enquête INSEE HID 2002)
  • 10. 10 FLUPA 2016 bénéfices respect des lois avantages business  accessibles à tous  référencement amélioré diminution des couts de maintenance  code de meilleure qualité  usages multi-supports image de marque  interne : satisfaction et fierté des salariés  externe : perçu comme une entreprise responsable et socialement engagé efficacité opérationnelle  productivité et motivation accrues
  • 11. 11 FLUPA 2016 référentiel des critères d'accessibilité web  recommandations internationales édictés par le W3C/WAI  WAI (Web Accessibility Initiative) groupe de travail du W3C  WCAG (Web Content Accessibility Guidelines)  WCAG 2 (2008), devenu une norme ISO/IEC 40500:2012  3 niveaux d'accessibilité : niveau A : environ 1/3 des critères niveau AA : environ 2/3 des critères niveau AAA : TOUS les critères
  • 12. 12 FLUPA 2016 objectif accessibilité du Groupe Orange respecter 70% du niveau AA des préconisations internationales WCAG 2.0 ( ISO/IEC 40500 ) sans aucun point bloquant du point de vue utilisateur
  • 13. 13 FLUPA 2016 Évaluer rapidement l'accessibilité d'un site est important :  En phase initiale, par exemple pour déterminer la meilleure stratégie pour aborder l'accessibilité  En phase d'accompagnement pour pouvoir agir sur les développements en cours.  En phase de production pour évaluer ou valider les livrables en interne/externe  En phase de qualification de produits par des prestataires extérieurs  Pour améliorer l’accessibilité tout au long de la vie du projet Test early, test often! Évaluations d’accessibilité
  • 14. 14 FLUPA 2016 1. Evaluation automatique 2. Evaluation manuelle 3. Test utilisateur Évaluations d’accessibilité
  • 16. 16 FLUPA 2016  le plus tôt possible par n’importe qui  utiles mais limités : – Uniquement la présence – 20-30% des tests mais bien 50% des erreurs – Beaucoup de faux-positifs Les outils de tests automatiques ne peuvent rien nous dire sur l'accessibilité réelle d'un contenu. Évaluations automatiques
  • 17. 17 FLUPA 2016 Convaincre, diffuser l’accessibilité et nécessaire pour bien partir :  identifier et corriger certaines erreurs d'accessibilité  rendre le projet autonome (intégration dans une chaine de tests)  assurer les basiques de l'accessibilité de manière indolore  donc le projet fait un pas dans la mise en place de l'accessibilité Évaluations automatiques
  • 18. 18 FLUPA 2016  Android • Accessibility tests framework for Android https://github.com/google/Accessibility-Test-Framework-for-Android • Accessibility scanner appli basée sur Accessibility tests framework for Android  iOS • IBM Accessibility checker http://www- 03.ibm.com/able/accessibility_research_projects/mobile_accessibilit y_checker.html Évaluations automatiques mobile
  • 19. 19 FLUPA 2016 1. Axe, Firefox https://addons.mozilla.org/fr/firefox/addon/axe-devtools/ • complet • pédagogique 2. Opquast Desktop, Firefox https://addons.mozilla.org/fr/firefox/addon/opquast-desktop/ • édition de rapport • plus que de l’accessibilité Évaluations automatiques web
  • 20. 20 FLUPA 2016 démo / TP former des groupes (hétérogènes) Évaluations automatiques
  • 22. 22 FLUPA 2016  pré requis : tests auto passés  valeur ajoutée de l’expert accessibilité  exhaustifs mais sur un échantillon si le périmètre est trop grand  génération d’un rapport  à faire le plus tôt possible après les tests automatiques pour valider des développements mais vous pouvez faire déjà une partie du travail, sans être un expert, ça vous permettra de trouver les principaux problèmes d’accessibilité Évaluations manuelles
  • 23. 23 FLUPA 2016  il faut un accès aux sources et c’est pas toujours facile  pas de norme comme dans le web mais de bonnes pratiques (RGAA, BBC…)  la solution sans les sources : les tests utilisateurs  Exemples d’applications accessibles : mon réseau, orange et moi Évaluations manuelles sur mobile
  • 24. 24 FLUPA 2016 Contraste de couleur Deux niveaux dans les WCAG: AA et AAA Niveau AA utilisé pour le web Contraste de 4.5 minimum pour les textes standards Contraste de 3 minimum pour les textes de grande taille* Niveau AAA utilisé pour les mobiles Contraste de 7 minimum pour les textes standards Contraste de 4.5 minimum pour les textes de grande taille
  • 25. 25 FLUPA 2016 Contraste de couleur • Critère d’accessibilité Assurer un contraste suffisant entre texte et fond Outil : Color Contrast Analyser CCA http://www.paciellogroup.com/resources/contrastanalyser/ Nota bene : peut être utilisé pour du mobile mais il faut utiliser des impressions d’écran du device, sinon Accessiiblity scanner le fait !
  • 26. 26 FLUPA 2016 Wave, Chrome • rapide, visuel, directement dans la page https://chrome.google.com/webstore/detail/wave-evaluation- tool/jbbplnpkjmmeebjpijfedlgcdilocofh Nota bene : il existe un bookmarklet pour tout navigateur javascript:void(window.open('http://wave.webaim.org/report?url='+escape( window.location))) The Wave, Chrome Évaluations manuelles
  • 27. 27 FLUPA 2016  Donner un titre aux pages  Donner des titres aux rubriques  Définir des équivalents textuel  Formulaires  Agrandissement de la taille du texte  Libellé des liens  Boites de dialogues et ouverture de nouvelles fenêtres  Ne pas utiliser la couleur ou l'information sensorielle comme seule source d'information  Navigation au clavier et Visibilité du focus Principales évaluations manuelles
  • 28. 28 FLUPA 2016 Pour qui : tout le monde et en particulier les personnes déficientes visuelles. Quand : dès la conception et pendant le développement. Description : • Donner à chaque page un titre qui lui est spécifique et qui reflète son contenu ou sa fonction (balise <title>). • Le titre de la page est le premier élément lu par la synthèse vocale, il doit permettre d'identifier formellement la page sur laquelle on se trouve. Précisions : • Bien qu'il n'y ait pas de règle, en général, on va de l'information la plus spécifique vers la moins spécifique (ex: nom de la page courante - nom du site). • Lorsque le contenu de la page est modifié dynamiquement (affichage du résultat d'une recherche, erreurs dans un formulaire, action utilisateur ajoutant du contenu...), le titre de la page doit refléter cette modification du contenu. Donner un titre aux pages
  • 29. 29 FLUPA 2016 Pour qui : tout le monde et en particulier les personnes déficientes visuelles. Quand : dès la conception, à la rédaction du contenu et pendant le dév. Description : • Identifier les balises de titres à utiliser (balises HTML h1 jusqu'à h6) pour structurer le contenu des pages. • Les personnes malvoyantes naviguant à l'aide d'un lecteur d'écran peuvent accéder à la liste des titres de la page pour naviguer rapidement. Tout comme dans un fichier Word il est possible d'utiliser la table des matières si des titres ont correctement été positionnés à l'intérieur du document. Précisions : • Les titres doivent être pertinents. • Il ne doit pas exister de saut dans la hiérarchie des titres (on ne passe pas directement d'un titre h2 à un titre h4). • On peut mettre plusieurs h1 par page (mais =< 2). Donner un titre aux rubriques
  • 30. 30 FLUPA 2016 Pour qui : les personnes déficientes visuelles, les personnes malentendantes. Quand : dès la conception et pendant le développement. Description : • Mettre en place des alternatives textuelles à tous les éléments informatifs non textuels (alternatives aux images, icones). • De même prévoir des transcripts ou des sous-titres pour les contenus audio ou vidéo. Définir des équivalents textuels
  • 31. 31 FLUPA 2016 Pour qui : tout le monde et en particulier les personnes déficientes visuelles. Quand : lors de la conception et lors du développement. Description : • Chaque champ de formulaire doit être accompagné d'un libellé permettant d'identifier le rôle du champ, le type de donnée et le format attendu. • Ce libellé doit être proche visuellement du champ afin qu'on fasse facilement le lien entre eux (notamment pour les utilisateur de zoom ou de loupe logicielle, voire sur mobile). • Les champs en erreur doivent pouvoir être identifiés, si besoin, suggérer une correction. • Ceci s'applique aux champs de saisie, mais également aux autres types de champs (liste déroulante, bouton radio, case à cocher ...). • Au niveau du développement, ce libellé sera associé au champ de formulaire pour faciliter la navigation à l'aide d'un lecteur d'écran (l’attribut for de la balise label pointant sur l’ID du champ concerné). Formulaires
  • 32. 32 FLUPA 2016 Pour qui : les personnes malvoyantes et les seniors. Quand : lors de la conception graphique et principalement lors du développement. Description : • La taille du texte doit pouvoir être multipliée par 2 (zoom du texte à 200% depuis les réglages du navigateur). • A ce niveau de zoom, la présentation de la page peut être altérée, mais l'information doit rester lisible (pas de texte tronqué ni superposé). • Bien que ceci doit être pris en compte pendant la phase de développement, on peut identifier les zones de l'écran qui doivent ou non s'agrandir en même temps que la taille du texte dès la phase de conception graphique. • Par ailleurs, certains choix de design peuvent ou non faciliter la mise en place de ce critère lors du développement, il est donc important d'y réfléchir dès le départ. Agrandissement de la taille du texte
  • 33. 33 FLUPA 2016 Pour qui : les seniors, les personnes malvoyantes. Quand : lors de la conception et lors du développement. Description : • Eviter autant que possible les actions qui ouvrent une nouvelle fenêtre (ou un nouvel onglet) du navigateur. • Si un lien déclenche l'ouverture d'une nouvelle fenêtre, il faudra lors du développement faire de prévenir l’utilisateur. Ceci afin que les personnes malvoyantes sachent qu'une nouvelle fenêtre s'ouvre. • De même, éviter le recours systématique aux boites de dialogues pour présenter des informations dans les pages (présentation du service ...). Celles-ci posent souvent des problèmes d'accessibilité pour les personnes qui naviguent au clavier ou au lecteur d'écran qui nécessiteront une attention particulière lors de la phase de développement. Boites de dialogues et ouverture de nouvelles fenêtres
  • 34. 34 FLUPA 2016 Pour qui : tout le monde, en particulier les daltoniens et plus généralement les personnes malvoyantes et les seniors. Quand : dès la phase de conception et lors du développement. Description : • Ne pas utiliser la couleur ou une information sensorielle (forme, taille, son...) comme seule façon de véhiculer de l'information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément. Ne pas utiliser la couleur ou l'information sensorielle comme seule source d'information
  • 35. 35 FLUPA 2016 Navigation au clavier et Visibilité du focus Pour qui : tout le monde et en particulier les personnes déficientes visuelles, motrices, cognitives et en mobilité. Quand : lors de la conception et du développement . Description : • Les éléments (liens, boutons, éléments de formulaire) doivent recevoir le focus dans un ordre logique, sans que celui-ci ne reste piégé ou bloqué, même pour du contenu généré dynamiquement apparaissant ou disparaissant (modification du DOM, Ajax,...). • Toutes les fonctionnalités doivent être utilisables au clavier, donc mettre en place des gestionnaires d'événements qui ne s'appuient pas uniquement sur des événements souris. Précisions : • Pour valider cette exigence, la position du focus doit être visible à tous moments (propriété outline et :focus en CSS). • Toutes les actions importantes effectuées à la souris peuvent aussi l'être qu'avec le clavier, quitte à proposer une alternative spécifique pour les interactions complexes (drag'ndrop, gestes à plusieurs doigts sur mobile ...).
  • 37. 37 FLUPA 2016  Pré requis : tests auto passés et une évaluation manuelle « encourageante »  Les tests utilisateurs accessibilité ont une vraie valeur ajoutée : – l’accessibilité, ce n’est pas qu’un problème technique mais humain, (ergo de l’A11y) – prendre en compte des contextes d’utilisation et des besoins différents d’utilisabilité, – prioriser les actions de correction, – éviter les régressions, – en un mot, anticiper les points de blocage ! Pour être avocat de l’utilisateur, rien ne vaut un test utilisateur Évaluations utilisateurs
  • 38. 38 FLUPA 2016 Pré-requis 1 – Audit rapide technique pour s’assurer du niveau de prise en compte de l’accessibilité Pré-requis 2 – Des scénarios ou parcours utilisateurs (user story, use case) Pré-requis 3 – Identification de la cible navigateurs/AT et les typologies d’utilisateurs Jauger du niveau d’accessibilité ressenti, adapter les implémentations aux différents couples navigateur/aide technique, prendre en compte les habitudes des utilisateurs (confort et contexte d’utilisation) Évaluations utilisateurs
  • 39. 39 FLUPA 2016 Test Utilisateurs  différent des tests utilisaters d’ergonomie ou d’utilisabilité  Trouver des « vrais » utilisateurs de l’application en situation de handicap (déficient moteur, visuel, auditif, mental…) utilisant différentes AT (loupe logicielle, lecteur d’écran au minimum)  Constituer des binômes expert/utilisateur : – Le guide : un expert accessibilité, explique, pilote et filtre les retours – Le testeur : un utilisateur exécute les parcours utilisateurs  Changer le testeur régulièrement au cours des tests (quantité/qualité retours)  Résultats : – points bloquants – contenus inaccessibles y – priorisation (incidence, gravité) – propositions de corrections techniques Mais si on est pas riche …  On peut ne faire que des mini-tests utilisateur : – quelques utilisateurs de lecteurs d’écran, voire former des membres de l’équipe – test proximité distinction et navigation clavier par quelqu’un formé à l’accessiiblité – effectuer des test rapides mais fréquents sur les parcours utilisateur Effectuez des tests utilisateurs, même au rabais, on en tire toujours de grands enseignements.
  • 40. 40 FLUPA 2016  Un parcours utilisateur est : – un ensemble d’instructions utilisateur, – permettant d’effectuer une tâche précise dans l’IHM, – cette tâche doit être une fonctionnalité principale, cruciale de l’application  Qui les écrit ? – Une personne qui connait l’application et son contexte d’utilisation, soit : – MOA, métier, Chef de projet (MOA,MOE, fonctionnel…), Utilisateur  Ils doivent être… clairs, précis, complets et en nombre suffisant Parcours utilisateur, User stories
  • 41. 41 FLUPA 2016 Les fonctionnalités ou tâches essentielles d’une application sont celles qui justifient son utilité pour un utilisateur, ce à quoi elle est destinée. Par exemple :  Pour un site de vente : – remplir son panier, – entrer ses coordonnées, – procéder au paiement…  Pour un site de prise de rendez-vous client : – identifier le client, – valider ses coordonnées, – poser un rendez-vous et y laisser mettre un commentaire. Fonctionnalité essentielle
  • 42. 42 FLUPA 2016  Points bloquants – Barrières au niveau de l’accessibilité, empêchant d’effectuer une action – Type de blocage, impact utilisateur, priorisation des corrections  Exemples sur un site de vente : – payer ses achats, somme à payer calcul JS inaccessible, priorité 1 – système de correction des erreurs inaccessible, priorité 2 – pas d’accès aux caractéristiques techniques des produits, la priorité dépend du type de produits  L’expert va, au final, pouvoir rédiger un rapport de évaluation afin de lister les points bloquants ou les améliorations envisageables, les prioriser et proposer des pistes de corrections. Points bloquants
  • 43. 43 FLUPA 2016 1.Navigation clavier (handicap moteur) 2.groupement / distinction : proximité et appartenance, straw test (malvoyant) 3.puis ensuite lecteur d’écran (aveugle) Télécharger NVDA  http://www.nvda-fr.org/download.php Évaluations utilisateurs
  • 44. 44 FLUPA 2016  NVDA navigation web Synthèse vocale NVDA : principaux raccourcis
  • 45. 45 FLUPA 2016 Synthèse vocale Talkback : principaux raccourcis Se déplacer avec un doigt sur l’écran. Explorer l’écran et entendre la vocalisation de l’élément qui est touché Double-cliquer n’importe où sur l’écran. Ouvre ou active l’élément qui a été touché (vocalisé) en dernier. Slider vers le haut ou le bas en utilisant deux doigts. Se déplacer verticalement sur une liste ou sur une page. Slider vers la gauche ou le droite en utilisant deux doigts. Changer de pages ou d’écran quand c’est possible. Slider vers la droite ou le bas en utilisant un doigt. Déplacer le focus TalkBack sur le prochain élément. Slider vers la gauche ou le haut en utilisant un doigt. Déplacer le focus TalkBack sur l’élément précédent. Pour l’activer :  paramètres  accessibilité  Talkback
  • 46. 46 FLUPA 2016 1. se connecter à http://www.gouvernement.fr 2. aller sur « les services du premier ministre » 3. puis « comité interministériel sur le handicap » 4. puis dans « documents » 5. et « lettre de mission » 6. lire la lettre TP NVDA / Talkback
  • 47. 47 FLUPA 2016 1. se connecter « http://stop-discrimination.gouv.fr » 2. aller sur « j’agis/se faire accompagner » 3. puis « Victime de discrimination ? Contactez la structure la plus proche de chez vous » 4. et « Bureau d'aide aux victimes du tribunal de grande instance de Paris » 5. je veux « téléphoner au « 08 victimes » car je ne veux/peux pas aller au tribunal et que j’ai besoin tout de même d’aide TP NVDA / Talkback
  • 48. Merci

Notes de l'éditeur

  1. et dans tous les contextes avec tous types de matériel : PC, MAC, IE, FF, Opera, tél. mobiles dans un contexte dégradé mauvaise luminosité, Touchpad en mobilité avec l’aide si nécessaire d’outils spécifiques de compensation du handicap lecteurs d’écran, loupe logicielle…
  2. Ce souci d’universalité inclut également les personnes handicapés et les technologies d’assistance qu’elles utilisent, « 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. »
  3. 12
  4. Diagramme évaluation par étapes, par entrée et type de critères qu’on teste