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.

Présentation au sujet: "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."— Transcription de la présentation:

1 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

2 Casting

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

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

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

6 Il était une fois

7 VoiceOver ?

8 Il était une fois TalkBack ?

9 Sans transition…

10 Késako ? aria-expanded

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

12 À nvous de jouer

13 Un bouton image

14

15 Un bouton image WCAG

16 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…

17 Un lien

18 De : Caen À : Quand

19 Un lien De : Caen À : Quand WCAG

20 Un tableau

21 Terminal Heure […]

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

23 Un tableau caption { position: absolute; left: -99999px; }

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

25 On passe au niveau supérieur ?

26 Un champ « autocomplété »

27 aria-autocomplete="" autocomplete=""

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

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

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

31 On audite ?

32 WCAG

33 RGAA

34 Accessi Web

35 On fait tester ?

36 « Impossible de consulter mes réservations »

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

38 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 »

39 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 »

40 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 »

41 Penchons-nous sur les retours

42 « 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

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

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

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

46 « 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

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

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

49 Et puis…

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

51 Le bouton image WCAG

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

53 Le bouton image WCAG

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

55 Le lien De : Caen À : Quand WCAG

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

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

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

59 « Les tableaux ne sont pas du tout accessibles ! »

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

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

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

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

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

65 « Tout plante quand je lis un tableau ! »

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

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

68 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. »

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

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

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

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

73 Le champ « autocomplété » WCAG

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

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

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

77 Générique de fin & questions Sébastien Delorme Responsable accessibilité numérique sdelorme@atalan.fr Twitter : @sebcbien