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
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
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…
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</th> <th scope="col">Heure</th> </tr> […]</table>
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</th> <th scope="col">Heure</th> </tr> […]</table>
caption { position: absolute; left: -99999px;}
WCAG
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érés, utilisez les flèches haut et bas pour naviguer.</p></div>
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>
Un champ « autocomplété »
aria-autocomplete=""autocomplete=""
<div role="status" aria-live="polite"> 4 résultats suggérés.</div>
WCAG
On audite ?
WCAG
RGAA
AccessiWeb
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 comprends pas, je n’arrive pas naviguer dans l’application »
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 »
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 »
Penchons-nous sur les retours
« 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
« Le lien suivant renvoie vers le message d’erreur "Désolé, la page
demandée n’existe pas". »
Cas n°1
1/3 des retours ne concerne pas l’accessibilité…
Cas n°1
…d’où l’importance de cadrer les tests utilisateurs.
Cas n°1
« 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
« 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 techniquesou
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" /></button>
WCAG
« 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 : Caen, lien.À : Quand, lien.
Le lien
<a> <img alt="Petit courrier" /> <span>De : Caen</span> <span>À : Quand</span></a>
WCAG
Petit courrier De : Caen
À : Quand, lien.
« 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</th> <th scope="col">Heure</th> </tr> […]</table>
caption { position: absolute; left: -99999px;}
WCAG
VoiceOver décale la lecturedes entêtes en présence d’une cellule
vide dans la ligne ou colonne d’entêtes.
Le tableau
WCAG
« TerminalVienneC »
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
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 »
« 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</th> <th scope="col">Heure</th> </tr> […]</table>
caption { position: absolute; left: -99999px;}
WCAG
« Tableau, heure et terminaux des
prochains départs. »
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</th> <th scope="col">Heure</th> </tr> […]</table>
caption { position: absolute; opacity:0;}
WCAG
« Tableau, heures et terminaux des
prochains départs. »
À 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 être rendue accessible.
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 leur demander de changer de téléphone ?
Les normes et référentiels
Ils sont importants, mais clairement
insuffisants, notamment sur des technologies ou des usages récents, comme le mobile.
Testez et/ou faites tester
Tous les cas montrés peuvent être facilement identifiés, sans
nécessairement être un utilisateur averti.
Générique de fin & questions
Sébastien DelormeResponsable accessibilité numé[email protected]
Twitter : @sebcbien