1. L'accessibilité des applications web mobiles
ou la véritable histoire d’un projet web mobile
(très) grand public vu par ses utilisateurs
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. Il était une fois
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. Un bouton image
<button>
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>

15. Un bouton image
<button>
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>
WCAG

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

17. Un lien

18. Un lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>

19. Un lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
WCAG

20. Un tableau

21. Un tableau
<table>
<tr>
<td></td>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>

22. Un tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<td></td>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>

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

24. Un tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<td></td>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
caption {
position: absolute;
left: -99999px;
}
WCAG

25. On passe au niveau supérieur ?

26. Un champ « autocomplété »

27. Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""

28. Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
<div role="status" aria-live="polite">
<p>4 résultats suggérés, utilisez les flèches
haut et bas pour naviguer.</p>
</div>

29. Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
<div role="status" aria-live="polite">
4 résultats suggérés, utilisez les flèches haut
et bas pour naviguer.
</div>

30. Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
<div role="status" aria-live="polite">
4 résultats suggérés.
</div>
WCAG

31. On audite ?

32. WCAG

33. RGAA

34. Accessi
Web

35. On fait tester ?

36. On fait tester ?
« 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 »

41. Penchons-nous sur les retours

42. Cas n°1
« 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. »

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

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. Cas n°2
« 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. »

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
<button>
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>
WCAG

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

53. Le bouton image
<button title="Géolocaliser l’aéroport le plus proche">
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>
WCAG

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

55. Le lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
WCAG

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

57. Le lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
WCAG
Petit courrier, lien, image.
De : Caen, lien.
À : Quand, lien.

58. Le lien
<a>
<img alt="Petit courrier" />
<span>De : Caen</span>
<span>À : Quand</span>
</a>
WCAG
Petit courrier
De : Caen
À : Quand, lien.

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

60. Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<td></td>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
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 »

63. Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
WCAG

64. Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
WCAG
« Terminal
Paris
C »

65. « Tout plante quand je lis un tableau ! »

66. Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
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
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
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