Interfaces accessibles Non-Voyants Analyse Conception Évaluation

Accessibilité et conception d’interfaces adaptées Interfaces multimodales pour l’accès aux interfaces graphiques par les handicapés visuels haptiques, audicones, synthèse et braille Ajustement des paramètres haptiques Comparaison de l’utilisabilité des différentes modalités Transposition de la représentation visuelle dans d’autres modalités

Acces aux interfaces graphiques de Windows 3.1 Utilisation du Pantograph ou d’une tablette avec souris Modélisation de l’interface du bureau de Windows Modéliser les menus et les actions du bureau Modéliser les objets Évaluation de 3 bases sonores Expérimentation de la dimension haptique et auditive en laboratoire et en contexte réel. Multimodal User Interface System for blind and "visually occupied" users: Ergonomic evaluation of the Haptic and Auditive Dimensions. Aude Dufresne*, Odile Martial** and Christophe Ramstein**

Résultats Paramètres étudiés Utilisabilité, satisfaction, performance (% tâches complétées, temps moyen d’exécution Non-voyants récents ou de naissance – pas de différence Voyants > non-voyants effet de l’âge et de l’Expérience bimodal > haptique > auditif satisfaction modalités et difficulté des tâches

Résultats Influence sur la performance

Influence on Performance, Time per exercise and Satisfaction of age, experience with GUI, sight and modality. Influence of age Perform. Time Satisfaction Modality (A) 0.0006** 0.1191 0.1772 Sight (B) 0.4108 0.5596 0.2248 AB 0.9702 0.4493 0.535 Age (C) 0.0178* 0.0003** 0.7728 AC 0.8365 0.7453 0.4722 BC 0.3737 0.0379* ABC 0.6771 0.5536 0.345 Influence of experience   0.0004 0.3541 0.2983 GUI Experience (B) 0.1474 0.0076 0.0941 0.2064 0.3521 0.8703 GUI only p = .1873 p = .0081 p = .0907

Distribution des rangs où une interface est jugée meilleure NB ranked as best Rank from the best to the worst ? c2 Bimodal Haptic Audio Totals Q1 The interface is easy to use. p=.0001 23 1 24 Q2 I would use it for daily tasks. Q3 It is pleasant to use. Q4 It takes less concentration. 21 2 Q5 It causes less mental fatigue. 22 Q6 It causes less physical fatigue. 20

Réussite des tâches par modalités Mean Audio Haptic Bimodal Q10 Resize the window 40% 29% 42% 50% Q7 Close the window 56% 33% 58% 75% Q13 83% Q14 57% 54% 67% Q11 Select the other window 61% Q6 Select the last menu item 64% 79% Q12 Move window to the left 63% Q19 Select the second item 68% 88% Q4 74% 71% Q5 Select the first menu 78%

Réussite des tâches par modalités Mean Audio Haptic Bimodal Q9 Open the icon 79% 71% 88% Q17 81% 63% 96% 83% Q1 Select the lower icon Q18 Choose the third menu from the left Q8 Select the higher icon 85% 92% Q2 Move icon down 86% 67% Q15 89% Q3 Select the window 90% 100% Q16 Move it to the left Totals 73% 64% 74%

La classification et l'enrichissement textuel des images sur Internet pour favoriser la navigation et l'accessibilité aux mal-voyants. AccesWebPlus Assia Aouat Département d’Informatique et de recherche Opérationnelle Sous la direction de Peter Kropf et de Aude Dufresne

Objectifs Les personnes malvoyantes constituent 20% de la population des internautes Améliorer pour les mal-voyants l’accessibilité aux images sur Internet Population cible : personnes malvoyantes (tenir compte des non-voyants) Malgré les recommandations du W3C sur l’accessibilité WAI "Web Accessibility Initiative" les sites web restent peu accessibles. Il n’y a pas de textes associés aux images Les logiciels de revue d’écran ne permettent pas de ‘surfer’ sur les images. Les logiciels comme Bobby permettent de diagnostiquer. D’autres (A-Prompt) permettent de corriger mais pas de façon extérieure. Le Web comporte beaucoup d’images qui ne sont pas toutes aussi importantes: Contenu VS Décoration, Publicité, Navigation, mise en page, logo… Développer des fonctions de reconnaissance des images importantes et ajout de texte alternatif.

Besoins Développer un outil intégré au navigateur Reconnaître les images importantes - les images de contenus Enrichir et modifier la description des images Correction automatique Correction manuelle Permettre de surfer - présenter les images au début

Correction automatique de l’accessibilité des images Extraction des Images Décodage HTML Classification Page Web résultat Page Web initiale Ajout du Texte alternatif Images Requête http Réponse http

Correction manuelle de l’accessibilité des images Extraction des Images Décodage HTML Classification Page Web résultat Page Web initiale Ajout du Texte alternatif Images Correction Requête http Réponse http

Réutilisation de la page corrigée pour l’accessibilité Web résultat Page Web initiale Plug in Requête http Réponse http

Comment classifier et enrichir les images ? Caractéristiques visuelles Taille de l’image Nombre de couleurs Pourcentage des couleurs Histogramme des couleurs Caractéristiques reliées au texte Nom de l’image Texte alternatif URL Caractéristiques de contexte Texte alentour Extension de l’image Source : locale ou distante Comparaison des modèles de classification Arbre de decision :rapide et peu sensible au bruit kNN :execution moins rapide et sensible au bruit SVM: exécution moins rapide et donne de meilleurs résultats.

Architecture - Classification Web Règles Classification des Images On-line Apprentissage des Règles Off-line Images d’entraînement Extraction des Images Off-line

Application de AccesWebPlus automatique Avant / après

Correction manuelle (1/2)

Démonstration (2/2)

Conclusion Résultats de classification encourageants Taux d’erreur de l’ordre de 5% D’autres applications peuvent en bénéficier tels que : les moteurs de recherche d’images, nettoyage des images non importantes des pages Web, enrichissement du Web.

Autre recherche Transposition tactile des images FQRNT Concevoir un système de transposition des images scolaires en stimuli tactiles pour l’accès par les non-voyants Assurer la communication du contenu pédagogique Analyser les processus d’interaction pour mesurer la facilité d’utilisation du dispositif Ajuster les paramètres de transposition

Le Tactograph : première version

STreSS Perception tactile par étirement latéral Vibrations Ondulations Points

Le TactoGraph Permet d’explorer des images de manière tactile et sonore. Produit différentes textures comme des vibrations et des ondulations. Retour sonore faisant office de légende en synthèse vocale qui lit le texte.

Design et développement Définir le modèle d’adaptation Éliminer les détails Éviter la fatigue, utiliser les vibrations pour les contours. Ajouter du retour audio pour le contenu Créer des niveaux de navigation Programmer un environnement pour la description des images WYSWYG - WYSIWIS

Évaluation du dispositif 10 voyants aux yeux bandés non-voyants 10 adultes et 10 jeunes Présentation, exploration de 3 images, questions. Résultats: Facile, cool.. 80% des questions de contenus Pas de différences entre voyants, non-voyants Non-voyants un peu plus de temps d’exploration. Ondulations dans les formes pas concluant Bruit de la mer trop fort, veulent contrôler Petits objets manqués Contrôle du niveau de détails, manque de repères Nécessité de zoom Préciser le modèle pour différents types graphes Voir après période d’habituation

TactoWeb – Grégory Petit Analyse et adaptation Intérêt relatif des images. Relier des stimuli aux liens, au CSS, aux boutons, aux barres de défilement, etc. Extraire les images, les textes des images, extraire les contours, les formes et associer des textures, des descriptions aux parties d’image Définir des niveaux de lecture, des préférences. Gérer les interférences entre stimuli sons trop fréquents textures proches trop semblables, etc. Tenir compte de la vitesse de déplacement

Regard sur les études d’accessibilité Design Avec les usagers Définir les contraintes de la transposition -intégration aux activités réelles et changeantes intégration aux outils existants Modéliser un espace de représentation Objets, interactions, répartir les modalités Évaluation Fonctionne en contexte réel (Image web) Définir des tâches Utilisabilité, utilité …prétester davantage les versions du dispositif

VoiceOver pour MacOS Permet l’exploration spatiale : but what’s great is voiceover is spatial exploration. you can use graphics tablet or trackpad = absolute exploration --> screen projected to the surface actually, the trackpad is far too small for this kind of spacial exploration it is also uncomfortable because the hand is elevated and does not rest on a support like a mouse mouse: more comfortable but it is a relative exploration, so you don’t have any reference point and you can easily loose yourself this kind of spatial exploration is still difficult to control spatial exploration because there is no tactile feedback, it is difficult to have all picture idea of the web page or of the size of the different element

Transformer le web pour les non voyants Subvention Ministère des Services Gouvernementaux Le Web sans souris et sans vision n’est pas facile Analyser le contenu des pages web Transposer les dimensions visuelles et spatiales par des stimuli Tactiles et audio Développer un modèle de transposition et l’évaluer auprès des usagers non-voyants Permettre une exploration spatiale plutôt qu’une exploration séquentielle

Le Tactograph - Deuxième version

TactoWeb Accès au Web pour les personnes non-voyantes Supprimer la frustration provoquée par les lecteurs d’écran frustration liée à la linéarisation de la information linéarisation de l’information due à une seule modalité de sortie Donc utiliser une navigation spatiale plutôt qu’une navigation séquentielle  Comme pour les graphismes tactiles alors?

TactoWeb Exploration multimodale du Web via le Tactograph Création d’un fureteur tactile et sonore Prendre en compte les différents éléments Web: en-têtes liens paragraphes menus listes numérotées et à puce Formulaires  Associer les bons retours tactiles et sonores aux éléments Web

Représenter la structure de la page Web

En utilisant le code des CSS.. Pour repérer les sections.. Navigation du tactograph Lecture en synthèse vocale des textes Indices tactiles et sonores des éléments

Page Web existing Web page fan Web page for the Final Fantasy video game series detailed version no texture and audio feedback for now because we need to identify which one to use a specifics Web element Working now: Images Headers, Links, Paragraphs, Lists, Float elements

Accès aux formulaires Définir les modalités pour les composantes de pages web. Utilisation des boutons sur le tactograph pour zoom, clic, niveau de détail. Affichage dynamique qui change le niveau de détail selon la vitesse de déplacement. Offrir une solution sans Tactograph avec une souris tactile Ifeel qui profite des fonctions de synthèse vocale et de sons.