Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent...

48
1 FLUPA 2016 Télécharger en attendantté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 !

Transcript of Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent...

Page 1: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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 !

Page 2: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

@sanvin

@molidav

Page 3: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 4: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 5: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

5 FLUPA 2016

§ Introduction : 10mn

§ Évaluations automatiques : 10mn

§ Évaluations manuelles : 40mn

§ Tests Utilisateur : 30mn

TIMMING

Page 6: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

Introduction

Page 7: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

7 FLUPA 2016

L’accessibilité numérique en quelques mots

c’est la capacité d’un service à être q  utilisable par tous

§  personnes en situation de handicap

ü  permanent, ou temporaire

§  séniors

§  personnes valides

q  et dans tous les contextes

§  tous types de matériel

§  contexte dégradé

§  outils spécifiques de compensation du handicap

q  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 ?

Page 8: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 9: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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)

Page 10: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

10 FLUPA 2016

bénéfices

respect des lois

avantages business q  accessibles à tous

q  référencement amélioré

diminution des couts de maintenance

q  code de meilleure qualité

q  usages multi-supports

image de marque q  interne : satisfaction et fierté

des salariés

q  externe : perçu comme une entreprise responsable et socialement engagé

efficacité opérationnelle q  productivité et motivation

accrues

Page 11: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

11 FLUPA 2016

référentiel des critères d'accessibilité web

q  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

q  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

Page 12: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 13: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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é

Page 14: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

14 FLUPA 2016

1.  Evaluation automatique

2.  Evaluation manuelle

3.  Test utilisateur

Évaluations d’accessibilité

Page 15: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

Evaluation auto

Page 16: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 17: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

17 FLUPA 2016

Convaincre, diffuser l’accessibilité et nécessaire pour bien partir :

q  identifier et corriger certaines erreurs d'accessibilité

q  rendre le projet autonome (intégration dans une chaine de

tests)

q  assurer les basiques de l'accessibilité de manière indolore

q  donc le projet fait un pas dans la mise en place de

l'accessibilité

Évaluations automatiques

Page 18: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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_accessibility_checker.html

Évaluations automatiques mobile

Page 19: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 20: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

20 FLUPA 2016

démo / TP

former des groupes (hétérogènes)

Évaluations automatiques

Page 21: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

Evaluation manuelle

Page 22: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 23: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 24: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 25: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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 !

Page 26: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 27: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 28: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 29: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 30: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 31: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 32: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 33: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 34: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 35: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 36: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

Test Utilisateur

Page 37: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 38: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 39: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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.

Page 40: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 41: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 42: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 43: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 44: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

44 FLUPA 2016

§  NVDA navigation web

Synthèse vocale NVDA : principaux raccourcis

Page 45: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 46: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 47: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

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

Page 48: Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pour tous !" par Vincent Aniort et David Molina

Merci