l'accessibilité des applications web mobiles, ou la véritable histoire d’un projet web...
Post on 05-Dec-2014
567 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
« 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 »
à 14h40
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
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 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 »
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 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". »
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 directement le contenu de cette page. »
« 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 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</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
« Terminal Paris C »
« 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 Delorme Responsable accessibilité numérique
sdelorme@atalan.fr
Twitter : @sebcbien
top related