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