Vous trouverez ci-dessous la présentation que j’ai réalisé lors du petit déjeuner FLUPA, su 13 mars 2012 sur le thème de l’accessibilité appliqué aux tablettes et aux smartphones.
La présentation
[slideshare id=12001889&doc=flupadesignforall-120314051402-phpapp01]
Le détail de la présentation avec les notes.
Le but de cette présentation est de faire le point en matière de conception sur les smartphones et les tablettes, notamment sur l’aspect accessibilité.
Dans un premier temps nous reviendrons brièvement sur la notion de Design for all. Puis nous ferons un point sur les plateformes et le matériel, puis nous verons un peu de techniques, avant de conclure sur des outils et des liens.
- Utilisation égalitaire : utile et commercialisable auprès de personnes ayant différentes capacités.
- Flexibilité d’utilisation : conciliation à une vaste gamme de préférences et de capacités individuelles.
- Utilisation simple et intuitive : compréhension facile de l’utilisation, indépendamment de l’expérience, des connaissances, des compétences linguistiques de l’utilisateur ou de son niveau de concentration au moment de l’utilisation.
- Information perceptible : communication efficace de l’information néces- saire vers l’utilisateur, quelles que soient les conditions ambiantes ou les capacités sensorielles de la personne.
- Tolérance pour l’erreur : réduction au minimum des dangers et des conséquences adverses des accidents ou des actions involontaires.
- Effort physique minimal : utilisation efficace et confortable, générant une fatigue minimale.
- Dimensions et espace libre pour l’approche et l’utilisation : une taille et un espace adéquats pour s’approcher, saisir, manipuler et utiliser le bien, quelles que soient la taille, la posture ou la mobilité de l’utilisateur.
Sur un iPad, une fois la synthèse vocale activéee, accéder au site FLUPA dans Safari.
On part de l’accueil de l’ipad pour ouvrir Safari
Saisie de l’URL dans la barre d’adresse.
Le design for all peut aussi être détourné par exemple pour lire un livre
Etat de l’accessibilité sur les différentes plateformes
- Web : Un contenu affiché dans un navigateur
- Web apps : Des applications avec une interface Web construites en HTML, CSS, Javascript
- Applications: Des applications natives téléchargeables utilisant pleinement les capacités de la tablette ou du smartphone.
- Applications hybrides : Des applications téléchargeables avec un contenu en HTML, CSS, Javascript et utilisant les capacités de la tablette ou du smartphone.
iOs présente nombreuses options d’accessibilité : Zoom, taille des polices, contraste,etc.. C’est l’OS le plus complet et le plus à jour.
Présentation d’ « Assistive touch » qui permet d’associer des gestes à des raccourcis
Sur Android, seul la dernière version commence a être au niveau avec la prise en compte du multitouch. Dans les versions précédentes, l’accessibilité passe par l’installation de logiciels tiers proposés par Google, par exemple : « Tallback ». Avec parfois des incompatibilités entre version d’Android, smartphone et applications.
Il est aussi intéressant de regarder l’usage en matière de mobile. Les chiffres dates de 2010, mais on observe encore une forte présence de Nokia. Android est clairement en retrait.
En 2013, aux USA, une loi impose que tout les smartphones soient accessibles gratuitement aussi bien au niveau du navigateur que l’interface en générale. 21st Century communications and vidéo accessibilité Act, USA.
Un peu de technique maintenant, mais pas trop !
Il faut bien comprendre que la taille des smartphones et des tablettes varie peu. Pour les smartphones, la taille est conditionnée par la taille de la main et la distance bouche oreille. Pour les tablettes, on reprend la taille d’un livre, d’un cahier qui peut être tenu d’une main et utilisé de l’autre.
Mais la résolution des écrans augmentent régulièrement.
Jusqu’à la semaine dernière, il y avait encore une certaine cohérence entre la taille des écrans et la résolution, permettant de distinguer les tablettes, moins de 768 pixels de large en portrait ou 1024 en paysage, et les ordinateurs avec des écrans plus grands. Aujourd’hui, ce n’est plus le cas ! Merci Apple, pour cette tablette 9 pouces qui affiche une meilleure résolution que bien des ordinateurs en 23 pouces.
Une question qui revient souvent c’est la dimension à respecter pour les boutons. Pour faciliter la désignation, les cibles (boutons, champs, etc…) doivent avoir une taille minimum de 0,74 cm, et pour être confortable une taille de 0,9 cm. Cela correspond aux normes que l’on trouve sur les calculettes et les télécommandes pour les boutons plats.
Je donne des tailles absolues car une taille en pixels par exemple serait inadapté et non pérennes.
Pour les applications, il est nécessaire de se référer au SDK (environnement de développement) de la plateforme et des règles spécifiques de chaque environnement.
Pour les contenus web et assimilés…
Pour s’en sortir, il est nécessaire de respecter les normes d’accessibilités et techniques du W3C. Bien séparer le contenu de la forme. Le contenu va être dans le HTML, la forme dans la CSS. Le contenu est structuré sémantiquement avec des titres, des en-têtes, des menus,… La forme est dans la CSS et donc en arrive au responsive Design.
Ce n’est pas nouveau comme technique, il a toujours été possible d’appeler des feuilles de styles suivant le média, pour imprimer par exemple. Il existe même des feuilles styles audio. Il faut bien sur en profiter
Dans la CSS, il est indispensable d’utiliser des valeurs relatives (coder en « em ») notamment pour la taille des textes et des objets associés : bouton, champ de formulaires. Pensez à tester le résultat ! L’em est un multiple de la résolution de l’écran, c’est donc en fonction de la résolution de l’écran du terminal que la taille de la police va s’afficher.
La saisie d’information est largement facilitées sur smartphones ou tablettes, mais ce n’est pas encore aussi facile que cela. Un moyen de compenser ces difficultés dans les formulaires est d’utiliser les «types» et les attributs. Les types permettent de déterminer l’usage des champs dans les formulaires. C’est encore diversement supporté par les navigateurs, mais un des avantages c’est que le clavier est adapté au type de champs.
Les attributs permettent de guider l’utilisateur et d’éviter les erreurs. Exemple : champs obligatoires, indication, champ focussé. Dans l’exemple, une indication est donnée dans le champs, elle s’efface lors de la saisie
Mot de passe avec la saisie partiellement cachée.
Plus spectaculaire, avec un champ téléphone «tel», le clavier présente uniquement les chiffres.
Un menu déroulant, le choix est repris dans une interface suffisamment grande et parfaitement utilisable.
De même pour la saisie des dates et de l’heure.
Resources for mobile accessibility guidelines
Mobile Web Best Practices (MWBP)
Un outil de validation automatique proposé par le W3C.
Un site a afficher sur tablette ou mobile et permet de voir les différents comportements.
Un dernier outil encore en bêta, proposé par Adobe, permet de synchroniser entre différentes tablettes (iOS et Android).
Pour ceux qui sont du coté de Genève, je signale une conférence le 26 avril 2012 sur le même sujet.