L'accessibilité des applications web mobiles
ou la véritable histoire d’un projet web mobile
(très) grand public vu par se...
Casting
Critiques
« Une histoire accessible et intrigante
inspirée de faits réels. »
Critiques
« Une conférence d’auteur,
accessible aux avertis. »
Critiques
« Ce mercredi, en salle, une énième
conférence sur les utilisateurs. »
Il était une fois
Il était une fois
VoiceOver ?
Il était une fois
TalkBack ?
Sans transition…
Késako ?
aria-expanded
Késako ?
« Retirer les attributs
aria-expanded
des systèmes
d’accordéons »
À nvous de jouer
Un bouton image
Un bouton image
<button>
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>
Un bouton image
<button>
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>
WCAG
En passant…
Sur l’intégration des icônes-liens,
je vous recommande la séance
« Techniques d’intégration d’icônes-liens »
à...
Un lien
Un lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
Un lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
WCAG
Un tableau
Un tableau
<table>
<tr>
<td></td>
<th scope="col">Terminal</th>
<th scope="col">Heure</th>
</tr>
[…]
</table>
Un tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<td></td>
<th scope="col">Terminal</t...
Un tableau
caption {
position: absolute;
left: -99999px;
}
Un tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<td></td>
<th scope="col">Terminal</t...
On passe au niveau supérieur ?
Un champ « autocomplété »
Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
<div role="status" aria-live="polite">
<p>4 résultats suggé...
Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
<div role="status" aria-live="polite">
4 résultats suggérés...
Un champ « autocomplété »
aria-autocomplete=""
autocomplete=""
<div role="status" aria-live="polite">
4 résultats suggérés...
On audite ?
WCAG
RGAA
Accessi
Web
On fait tester ?
On fait tester ?
« Impossible de
consulter mes
réservations »
On fait tester ?
« Impossible de
consulter mes
réservations »
« Cette
application n’est
pas du tout
accessible ! »
On fait tester ?
« Impossible de
consulter mes
réservations »
« Cette
application n’est
pas du tout
accessible ! »
« Je ne...
On fait tester ?
« Impossible de
consulter mes
réservations »
« Cette
application n’est
pas du tout
accessible ! »
« Je ne...
Penchons-nous sur les retours
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 ...
Cas n°1
« Le lien suivant renvoie vers le message d’erreur
"Désolé, la page demandée n’existe pas". »
1/3 des retours
ne concerne pas l’accessibilité…
Cas n°1
…d’où l’importance de
cadrer les tests utilisateurs.
Cas n°1
Cas n°2
« Lorsque j’affiche une nouvelle page, VoiceOver
redémarre la lecture tout en haut, alors qu’il faudrait
lire dire...
« Dans chaque élément de la liste, il n’est pas utile
que VoiceOver lise "puce"
à chaque puce rencontrée. »
Cas n°2
La limite des aides techniques
ou
Le manque de connaissance
dans l’utilisation des aides techniques
Cas n°2
Et puis…
« Le bouton de géolocalisation est lu
"bouton" par VoiceOver,
sans aucune autre information. »
Le bouton image
<button>
<img alt="Géolocaliser l’aéroport le plus proche" />
</button>
WCAG
VoiceOver, sur iOS6,
ne restitue pas l’alternative d’une image
dans un bouton
Le bouton image
<button title="Géolocaliser l’aéroport le plus proche">
<img alt="Géolocaliser l’aéroport le plus proche" ...
« La lecture est trop hachée avec VoiceOver,
trop de fois le mot "lien" entendu. »
Le lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
WCAG
VoiceOver découpe la lecture d’un lien en fonction
des conteneurs de type block qu’il contient.
Le lien
<a>
<img alt="Petit courrier" />
<p>De : Caen</p>
<p>À : Quand</p>
</a>
WCAG
Petit courrier, lien, image.
De : Cae...
Le lien
<a>
<img alt="Petit courrier" />
<span>De : Caen</span>
<span>À : Quand</span>
</a>
WCAG
Petit courrier
De : Caen
...
« Les tableaux ne sont pas du tout accessibles ! »
Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<td></td>
<th scope="col">Terminal</t...
VoiceOver décale la lecture
des entêtes en présence d’une cellule vide
dans la ligne ou colonne d’entêtes.
Le tableau
WCAG
« Terminal
Vienne
C »
Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</t...
Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</t...
« Tout plante quand je lis un tableau ! »
Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</t...
Lorsque VoiceOver lit des contenus cachés,
le navigateur cherche à les afficher…
Le tableau
<table>
<caption>Heures et terminaux des prochains
départs</caption>
<tr>
<th></th>
<th scope="col">Terminal</t...
À votre avis, pourquoi ?
« Retirer les attributs
aria-expanded
des systèmes
d’accordéons »
« Je n’arrive pas à accéder aux suggestions proposées
dans les champs de saisie. »
Le champ « autocomplété »
WCAG
« 4 résultats
suggérés. »
En l’état, compte-tenu du fonctionnement
des lecteurs d’écran sur les équipements tactiles,
l‘autocomplétion ne peut pas ê...
Le champ « autocomplété »
WCAG
C’est le problème d’Apple ?
Tous les utilisateurs (clients) testeurs
étaient équipés d’un iPhone (iOS 6 ou 7)…
Doit-on leu...
Les normes et référentiels
Ils sont importants, mais clairement
insuffisants, notamment sur des technologies
ou des usages...
Testez et/ou faites tester
Tous les cas montrés peuvent être facilement
identifiés, sans nécessairement être un
utilisateu...
Générique de fin & questions
Sébastien Delorme
Responsable accessibilité numérique
sdelorme@atalan.fr
Twitter : @sebcbien
L'accessibilité des applications web mobiles, ou la véritable histoire d’un projet web mobile (très) grand public vu par s...
Upcoming SlideShare
Loading in …5
×

L'accessibilité des applications web mobiles, ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs

1,051 views
945 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,051
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

L'accessibilité des applications web mobiles, ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs

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

×