L'accessibilité des applications web mobiles, ou la véritable histoire d’un projet web...

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