La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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ésentations similaires


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: px; }

24 Un tableau Heures et terminaux des prochains départs Terminal Heure […] caption { position: absolute; left: px; } 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: px; } 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: px; } 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 Twitter


Télécharger ppt "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ésentations similaires


Annonces Google