Embed Size (px)
Citation preview
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 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" /></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
