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ériquesdelorme@atalan.fr

Twitter : @sebcbien