Ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs...
-
Upload
marcelon-bresson -
Category
Documents
-
view
102 -
download
0
Transcript of Ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs...
![Page 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/1.jpg)
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
![Page 2: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/2.jpg)
Casting
![Page 3: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/3.jpg)
Critiques
« Une histoire accessible et intrigante
inspirée de faits réels. »
![Page 4: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/4.jpg)
Critiques
« Une conférence d’auteur, accessible aux avertis. »
![Page 5: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/5.jpg)
Critiques
« Ce mercredi, en salle, une énième conférence sur les
utilisateurs. »
![Page 6: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/6.jpg)
Il était une fois
![Page 7: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/7.jpg)
Il était une fois
VoiceOver ?
![Page 8: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/8.jpg)
Il était une fois
TalkBack ?
![Page 9: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/9.jpg)
Sans transition…
![Page 10: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/10.jpg)
Késako ?
aria-expanded
![Page 11: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/11.jpg)
Késako ?
« Retirer les attributs aria-
expanded des systèmes
d’accordéons »
![Page 12: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/12.jpg)
À nvous de jouer
![Page 13: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/13.jpg)
Un bouton image
![Page 14: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/14.jpg)
Un bouton image
<button> <img alt="Géolocaliser l’aéroport le plus proche" /></button>
![Page 15: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/15.jpg)
Un bouton image
<button> <img alt="Géolocaliser l’aéroport le plus proche" /></button>
WCAG
![Page 16: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/16.jpg)
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…
![Page 17: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/17.jpg)
Un lien
![Page 18: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/18.jpg)
Un lien
<a> <img alt="Petit courrier" /> <p>De : Caen</p> <p>À : Quand</p></a>
![Page 19: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/19.jpg)
Un lien
<a> <img alt="Petit courrier" /> <p>De : Caen</p> <p>À : Quand</p></a>
WCAG
![Page 20: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/20.jpg)
Un tableau
![Page 21: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/21.jpg)
Un tableau
<table> <tr> <td></td> <th scope="col">Terminal</th> <th scope="col">Heure</th> </tr> […]</table>
![Page 22: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/22.jpg)
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>
![Page 23: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/23.jpg)
Un tableau
caption { position: absolute; left: -99999px;}
![Page 24: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/24.jpg)
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
![Page 25: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/25.jpg)
On passe au niveau supérieur ?
![Page 26: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/26.jpg)
Un champ « autocomplété »
![Page 27: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/27.jpg)
Un champ « autocomplété »
aria-autocomplete=""autocomplete=""
![Page 28: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/28.jpg)
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>
![Page 29: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/29.jpg)
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>
![Page 30: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/30.jpg)
Un champ « autocomplété »
aria-autocomplete=""autocomplete=""
<div role="status" aria-live="polite"> 4 résultats suggérés.</div>
WCAG
![Page 31: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/31.jpg)
On audite ?
![Page 32: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/32.jpg)
WCAG
![Page 33: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/33.jpg)
RGAA
![Page 34: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/34.jpg)
AccessiWeb
![Page 35: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/35.jpg)
On fait tester ?
![Page 36: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/36.jpg)
On fait tester ?
« Impossible de consulter
mes réservations
»
![Page 37: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/37.jpg)
On fait tester ?
« Impossible de consulter
mes réservations
»
« Cette application n’est pas du
tout accessible ! »
![Page 38: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/38.jpg)
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 »
![Page 39: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/39.jpg)
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 »
![Page 40: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/40.jpg)
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 »
![Page 41: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/41.jpg)
Penchons-nous sur les retours
![Page 42: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/42.jpg)
« 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
![Page 43: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/43.jpg)
« Le lien suivant renvoie vers le message d’erreur "Désolé, la page
demandée n’existe pas". »
Cas n°1
![Page 44: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/44.jpg)
1/3 des retours ne concerne pas l’accessibilité…
Cas n°1
![Page 45: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/45.jpg)
…d’où l’importance de cadrer les tests utilisateurs.
Cas n°1
![Page 46: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/46.jpg)
« 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
![Page 47: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/47.jpg)
« Dans chaque élément de la liste, il n’est pas utile que VoiceOver lise "puce"
à chaque puce rencontrée. »
Cas n°2
![Page 48: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/48.jpg)
La limite des aides techniques
ou
Le manque de connaissance dans l’utilisation des aides
techniques
Cas n°2
![Page 49: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/49.jpg)
Et puis…
![Page 50: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/50.jpg)
« Le bouton de géolocalisation est lu "bouton" par VoiceOver,
sans aucune autre information. »
![Page 51: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/51.jpg)
Le bouton image
<button> <img alt="Géolocaliser l’aéroport le plus proche" /></button>
WCAG
![Page 52: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/52.jpg)
VoiceOver, sur iOS6,ne restitue pas l’alternative d’une image
dans un bouton
![Page 53: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/53.jpg)
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
![Page 54: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/54.jpg)
« La lecture est trop hachée avec VoiceOver,
trop de fois le mot "lien" entendu. »
![Page 55: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/55.jpg)
Le lien
<a> <img alt="Petit courrier" /> <p>De : Caen</p> <p>À : Quand</p></a>
WCAG
![Page 56: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/56.jpg)
VoiceOver découpe la lecture d’un lien en fonction des conteneurs de type
block qu’il contient.
![Page 57: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/57.jpg)
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.
![Page 58: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/58.jpg)
Le lien
<a> <img alt="Petit courrier" /> <span>De : Caen</span> <span>À : Quand</span></a>
WCAG
Petit courrier De : Caen
À : Quand, lien.
![Page 59: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/59.jpg)
« Les tableaux ne sont pas du tout accessibles ! »
![Page 60: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/60.jpg)
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
![Page 61: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/61.jpg)
VoiceOver décale la lecturedes entêtes en présence d’une cellule
vide dans la ligne ou colonne d’entêtes.
![Page 62: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/62.jpg)
Le tableau
WCAG
« TerminalVienneC »
![Page 63: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/63.jpg)
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
![Page 64: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/64.jpg)
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
« TerminalParisC »
![Page 65: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/65.jpg)
« Tout plante quand je lis un tableau ! »
![Page 66: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/66.jpg)
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. »
![Page 67: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/67.jpg)
Lorsque VoiceOver lit des contenus cachés,
le navigateur cherche à les afficher…
![Page 68: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/68.jpg)
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. »
![Page 69: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/69.jpg)
À votre avis, pourquoi ?
« Retirer les attributs aria-
expanded des systèmes
d’accordéons »
![Page 70: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/70.jpg)
« Je n’arrive pas à accéder aux suggestions proposées dans les champs
de saisie. »
![Page 71: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/71.jpg)
Le champ « autocomplété »
WCAG
« 4 résultats suggérés. »
![Page 72: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/72.jpg)
En l’état, compte-tenu du fonctionnement
des lecteurs d’écran sur les équipements tactiles,
l‘autocomplétion ne peut pas être rendue accessible.
![Page 73: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/73.jpg)
Le champ « autocomplété »
WCAG
![Page 74: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/74.jpg)
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 ?
![Page 75: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/75.jpg)
Les normes et référentiels
Ils sont importants, mais clairement
insuffisants, notamment sur des technologies ou des usages récents, comme le mobile.
![Page 76: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/76.jpg)
Testez et/ou faites tester
Tous les cas montrés peuvent être facilement identifiés, sans
nécessairement être un utilisateur averti.
![Page 77: 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.](https://reader036.fdocument.pub/reader036/viewer/2022070310/551d9dd7497959293b8e6867/html5/thumbnails/77.jpg)
Générique de fin & questions
Sébastien DelormeResponsable accessibilité numé[email protected]
Twitter : @sebcbien