ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs L'accessibilité des applications web mobiles Contée par Sébastien Delorme, Atalan

Casting

Critiques « Une histoire accessible et intrigante inspirée de faits réels. »

Critiques « Une conférence d’auteur, accessible aux avertis. »

Critiques « Ce mercredi, en salle, une énième conférence sur les utilisateurs. »

Il était une fois

VoiceOver ?

Il était une fois TalkBack ?

Sans transition…

Késako ? aria-expanded

Késako ? « Retirer les attributs aria-expanded des systèmes d’accordéons »

À nvous de jouer

Un bouton image

Un bouton image WCAG

Sur l’intégration des icônes-liens, je vous recommande la séance « Techniques d’intégration d’icônes-liens » à 14h40 En passant…

Un lien

De : Caen À : Quand

Un lien De : Caen À : Quand WCAG

Un tableau

Terminal Heure […]

Un tableau Heures et terminaux des prochains départs Terminal Heure […]

Un tableau caption { position: absolute; left: px; }

Un tableau Heures et terminaux des prochains départs Terminal Heure […] caption { position: absolute; left: px; } WCAG

On passe au niveau supérieur ?

Un champ « autocomplété »

aria-autocomplete="" autocomplete=""

Un champ « autocomplété » aria-autocomplete="" autocomplete="" 4 résultats suggérés, utilisez les flèches haut et bas pour naviguer.

Un champ « autocomplété » aria-autocomplete="" autocomplete="" 4 résultats suggérés, utilisez les flèches haut et bas pour naviguer.

Un champ « autocomplété » aria-autocomplete="" autocomplete="" 4 résultats suggérés. WCAG

On audite ?

WCAG

RGAA

Accessi Web

On fait tester ?

« Impossible de consulter mes réservations »

On fait tester ? « Impossible de consulter mes réservations » « Cette application n’est pas du tout accessible ! »

On fait tester ? « Impossible de consulter mes réservations » « Cette application n’est pas du tout accessible ! » « Je ne comprends pas, je n’arrive pas naviguer dans l’application »

On fait tester ? « Impossible de consulter mes réservations » « Cette application n’est pas du tout accessible ! » « Je ne comprends pas, je n’arrive pas naviguer dans l’application » « Ce site n’est pas du tout compatible avec VoiceOver »

On fait tester ? « Impossible de consulter mes réservations » « Cette application n’est pas du tout accessible ! » « Je ne comprends pas, je n’arrive pas naviguer dans l’application » « Ce site n’est pas du tout compatible avec VoiceOver »

Penchons-nous sur les retours

« Dans la rubrique prochains départs, pour la plupart des vols, on n’a pas accès au terminal. Par exemple, le vol de Troyes à Sète. Ce problème est également présent sur votre site internet. » Cas n°1

« Le lien suivant renvoie vers le message d’erreur "Désolé, la page demandée n’existe pas". » Cas n°1

1/3 des retours ne concerne pas l’accessibilité… Cas n°1

…d’où l’importance de cadrer les tests utilisateurs. Cas n°1

« Lorsque j’affiche une nouvelle page, VoiceOver redémarre la lecture tout en haut, alors qu’il faudrait lire directement le contenu de cette page. » Cas n°2

« Dans chaque élément de la liste, il n’est pas utile que VoiceOver lise "puce" à chaque puce rencontrée. » Cas n°2

La limite des aides techniques ou Le manque de connaissance dans l’utilisation des aides techniques Cas n°2

Et puis…

« Le bouton de géolocalisation est lu "bouton" par VoiceOver, sans aucune autre information. »

Le bouton image WCAG

VoiceOver, sur iOS6, ne restitue pas l’alternative d’une image dans un bouton

Le bouton image WCAG

« La lecture est trop hachée avec VoiceOver, trop de fois le mot "lien" entendu. »

Le lien De : Caen À : Quand WCAG

VoiceOver découpe la lecture d’un lien en fonction des conteneurs de type block qu’il contient.

Le lien De : Caen À : Quand WCAG Petit courrier, lien, image. De : Caen, lien. À : Quand, lien. Petit courrier, lien, image. De : Caen, lien. À : Quand, lien.

Le lien De : Caen À : Quand WCAG Petit courrier De : Caen À : Quand, lien. Petit courrier De : Caen À : Quand, lien.

« Les tableaux ne sont pas du tout accessibles ! »

Le tableau Heures et terminaux des prochains départs Terminal Heure […] caption { position: absolute; left: px; } WCAG

VoiceOver décale la lecture des entêtes en présence d’une cellule vide dans la ligne ou colonne d’entêtes.

Le tableau WCAG « Terminal Vienne C » « Terminal Vienne C »

Le tableau Heures et terminaux des prochains départs Terminal Heure […] WCAG

Le tableau Heures et terminaux des prochains départs Terminal Heure […] WCAG « Terminal Paris C » « Terminal Paris C »

« Tout plante quand je lis un tableau ! »

Le tableau Heures et terminaux des prochains départs Terminal Heure […] caption { position: absolute; left: px; } WCAG « Tableau, heure et terminaux des prochains départs. »

Lorsque VoiceOver lit des contenus cachés, le navigateur cherche à les afficher…

Le tableau Heures et terminaux des prochains départs Terminal Heure […] caption { position: absolute; opacity:0; } WCAG « Tableau, heures et terminaux des prochains départs. »

À votre avis, pourquoi ? « Retirer les attributs aria-expanded des systèmes d’accordéons »

« Je n’arrive pas à accéder aux suggestions proposées dans les champs de saisie. »

Le champ « autocomplété » WCAG « 4 résultats suggérés. »

En l’état, compte-tenu du fonctionnement des lecteurs d’écran sur les équipements tactiles, l‘autocomplétion ne peut pas être rendue accessible.

Le champ « autocomplété » WCAG

C’est le problème d’Apple ? Tous les utilisateurs (clients) testeurs étaient équipés d’un iPhone (iOS 6 ou 7)… Doit-on leur demander de changer de téléphone ?

Les normes et référentiels Ils sont importants, mais clairement insuffisants, notamment sur des technologies ou des usages récents, comme le mobile.

Testez et/ou faites tester Tous les cas montrés peuvent être facilement identifiés, sans nécessairement être un utilisateur averti.

Générique de fin & questions Sébastien Delorme Responsable accessibilité numérique Twitter