1 / 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. 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. Casting. Critiques. « Une histoire accessible et intrigante inspirée de faits réels. ». Critiques.

margie
Télécharger la présentation

ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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-expandeddes systèmes d’accordéons »

  12. À nvous de jouer

  13. Un bouton image

  14. Un bouton image <button> <imgalt="Géolocaliser l’aéroport le plus proche" /> </button>

  15. Un bouton image <button> <imgalt="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> <imgalt="Petit courrier" /> <p>De : Caen</p> <p>À : Quand</p> </a>

  19. Un lien <a> <imgalt="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. AccessiWeb

  35. On fait tester ?

  36. « Impossible de consulter mes réservations » On fait tester ?

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

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

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

  40. « Impossible de consulter mes réservations » « Je ne comprends pas, je n’arrive pas naviguer dans l’application » On fait tester ? « Cette application n’est pas du tout accessible ! » « 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. Cas n°1 1/3 des retours ne concerne pas l’accessibilité…

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

  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. Cas n°2 « Dans chaque élément de la liste, il n’est pas utile que VoiceOver lise "puce" à chaque puce rencontrée. »

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

  49. Et puis…

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

More Related