Gros, rigide, trapu ? gagnez en souplesse !
Par Joe Clark
La recherche l'a prouvé, ceux de vos visiteurs qui ont une mauvaise vue ont besoin d'un design web radicalement différent. Les feuilles de style vous permettent de répondre à leur besoin.
Les lecteurs d'A List Apart sont déjà familiers des utilisateurs de lecteurs d'écran, le plus important groupe d'utilisateurs handicapés à bénéficier de la conformité aux standards. Dans un article précédent, par exemple, j'ai étudié l'efficacité des techniques de remplacement d'images pour un lecteur d'écran (et ce n'est pas brillant).
Mais (ô surprise) la plupart des utilisateurs souffrant d'un défaut de vision peuvent tout de même voir quelque chose, et une bonne partie d'entre eux (bien que non quantifiée) voit encore suffisamment bien pour utiliser un ordinateur avec un affichage magnifié ou zoomé. Notre travail envers ces publics laisse à désirer. Grâce aux feuilles de styles, pourtant, c'est facile, comme nous allons le voir. D'autant plus qu'en utilisant les CSS pour faire des mises en pages zoomées, nous allons pouvoir croiser notre pratique avec celle des développeurs de navigateurs de PDA et de téléphones portables, qui s'efforcent de restituer sur un petit écran de larges mises en page sur plusieurs colonnes.
Mais avant tout, comprenons bien le problème.
Une autre façon de voir le web
Les sites web sont avant tout composés de texte. Une personne dont la vue est déficiente pourra sans doute lire le texte d'une page web s'il est assez gros et présenté dans un style de couleurs particulier.
Mais quand vous augmentez énormément les polices d'une page web, votre écran finit par devenir trop petit. Même si ce n'est pas le cas (mettons que vous disposiez d'un écran plasma de 50 pouces, ou de deux écrans Cinema Display de 30 pouces !), vous, l'utilisateur déficient visuel, vous êtes assis à une certaine distance de votre écran ; vous ne disposez donc que d'un champ visuel confortable limité. De plus votre déficience peut très bien affecter aussi votre champ visuel ; peut-être que vous voyez moins de choses que quelqu'un qui a une vue normale, voire que quelqu'un qui a un autre défaut visuel.
Chaque site, suffisamment agrandi, finira donc par dépasser les capacités de son conteneur. Que le conteneur soit une cellule de tableau, une div, un moniteur, ou le champ visuel de l'utilisateur, ou une combinaison quelconque de ces différents facteurs. Vous pouvez utiliser les CSS pour vous assurer que votre site ne dépasse pas le périmètre défini par la vision de l'utilisateur.
La recherche
Il existe quelques rapports publiés, précisant les besoins des utilisateurs pour qui l'affichage doit être agrandi. Récemment, celui publié par Ginny Redish et Mary Theofanos a soulevé beaucoup d'intérêt (voir les références).
Il montre que même si de nombreux sujets de l'étude avaient des difficultés de lecture quand les couleurs disparaissaient de la page (certains logiciels de zoom d'écran passent en noir et blanc quand on leur demande un fort contraste), leur plus gros problème reste la lecture de colonnes multiples. Certains utilisateurs n'ont même jamais vu certaines colonnes. Certains éléments, même s'ils étaient dans une seule colonne que les utilisateurs, en théorie, pouvaient voir et utiliser, avaient glissé vers la droite, hors de l'écran, et étaient ignorés.
Voici quelques-uns des points importants qui ressortent de cette étude :
- Ces utilisateurs, cependant, ne veulent pas d'un site « différent ». Ils ne veulent pas d'une « version zoomée », ou d'une « version texte », si cela signifie qu'on va leur présenter un site différent de la version principale du site. Ils pensent que les deux sites ne seront pas équivalents. Ils pensent que le site « spécial » ne sera pas aussi à jour. Le problème est donc de trouver comment fournir une « égalité de traitement » et un accès universellement utilisable à tous les utilisateurs déficients visuels.
- [Un utilisateur a déclaré que] « les titrages et le gras sont très pratiques ».
- [Des utilisateurs] nous ont dit qu'ils copient/collent souvent du texte dans Word, qui permet d'augmenter la police et de la rendre plus grasse, pour augmenter la lisibilité. Deux autres utilisateurs ont pris une décision mûrement réfléchie de « stratégie d'affichage » pour régler le problème posé par le besoin de maximiser tant la quantité de contenu affichée que la facilité de lecture. [Une personne] règle le facteur de zoom à 2, en nous expliquant que c'est plus petit que ce dont il a besoin : il préfère sacrifier son confort de lecture pour voir plus de texte en une fois sur son écran.
- La plupart des participants n'utilisent pas les touches de contrôle du curseur alors qu'elles pourraient leur rendre service. Ils parcourent l'écran très rapidement avec la souris, et, ce faisant, perdent toute idée de l'endroit où ils sont dans la page web.
- Les utilisateurs qui ne se servent pas de la barre de défilement peuvent très bien ne jamais aller voir du côté droit de l'écran.
- Les utilisateurs peuvent manquer des éléments, même s'ils sont contigus, quand l'écran est magnifié.
Détruisez votre propre design !
Les aficionados des standards ont passé des années à accoucher de mises en pages en colonnes qui se présentent bien, qui s'affichent plus ou moins de la même manière dans tous les navigateurs conformes, et (pour les développeurs les plus pointus) qui sont aussi utilisables par des lecteurs d'écran. Partant d'un modèle assez médiocre (des mises en pages en colonnes fondées sur des tableaux imbriquées), nous avons fait un peu de ménage (des mises en pages en colonnes à base de HTML valide et de CSS).
Ces mêmes aficionados ont été capables d'assumer l'idée qu'un aveugle ignorerait purement et simplement l'apparence de leur site puisque, à l'évidence, il est aveugle. Ça ne posait pas de souci ; rien ne change dans votre design visuel si vous prenez en compte les aveugles.
Mais pour prendre en compte les personnes atteintes de déficiences visuelles, vous devez réarranger totalement votre site en colonnes. Vous devez en toute connaissance de cause détruire votre charte graphique originale. Mais devons-nous jeter le bébé avec l'eau du bain ? Non. Vous pouvez vous appuyer sur les CSS pour personnaliser toutes les versions de votre site.
- Votre page, par défaut, peut comporter la présentation que vous voulez.
- Grâce à une page gérant les préférences du visiteur, ou à un simple contrôle permettant de choisir sa feuille de style, l'utilisateur peut se voir présenter la même information en une seule colonne assortie de grandes polices. Vous pouvez décider de modifier les éléments de navigation de votre page, ainsi que leur présentation, partant du principe que vous devrez afficher moins d'informations de navigation.
- Nous ne sommes pas en train de faire une page de texte seul qu'on finirait par négliger, nous fournissons simplement une autre présentation de la page initiale : ainsi les utilisateurs déficients visuels n'auront pas la crainte d'être mis de côté dans un coin du site.
Les bases du design
Votre maquette pour déficients visuels doit comporter les éléments suivants :
- Une grande police
- Vous pouvez laisser l'utilisateur saisir lui-même la taille de fonte souhaitée, ou vous pouvez lui fournir un choix d'options prédéterminées. À moins que vous n'utilisiez une fonte vraiment bizarre (Que ceux qui utilisent Zapf Chancery lèvent la main !), ne vous inquiétez pas de la police à utiliser. Gardez les hauteurs de lignes proportionnelles.
- Inversion des contrastes
- De nombreux visiteurs voudront du texte clair sur un fond sombre plutôt que le texte sombre sur fond clair auquel nous sommes habitués depuis l'apparition du premier Macintosh.
- Modification des couleurs
- Pour autant, un blanc éclatant sur un noir terne n'est pas la combinaison idéale : c'est trop lumineux. Vous pouvez fournir quelques options, dont la plupart évoqueront des réminiscences des terminaux des années 80 (par exemple, vert, jaune ou bleu sur du noir ou du marron sombre, ou les couleurs par défaut de WordPerfect 5.1, un texte blanc sur un fond bleu).
- Réorganisation du contenu
- C'est le point le plus important : vous devez judicieusement simplifier votre site multi-colonnes pour qu'il tienne en une seule colonne...
Si vous voulez vraiment faire les choses avec un peu de classe, vous pouvez rendre chacune de ces options réglable individuellement. Vous pourriez utiliser une page de préférences qui laisse aux visiteurs le choix particulier de chaque option. (Ladite page comporterait en substance tous les éléments que je viens de mentionner, afin d'être accessible avant même que l'utilisateur ne précise ses choix). Mais si vous débutez juste, combiner toutes ces options en une seule à travers un seul fichier CSS peut suffire.
Encore une chose : ne faites rien de spécial eu égard aux images. Surtout, ne pensez pas qu'une personne déficiente visuelle ne sera pas intéressée par vos photos ou vos illustrations. On sait déjà que les adolescents malvoyants adorent les appareils photos numériques et adorent prendre des photos, parce qu'elles peuvent être démesurément agrandies et modifiées sur un écran d'ordinateur. Si votre site comporte des miniatures ou des galeries d'images qui tiennent sur une grande largeur, vous devrez sans doute repenser votre mise en page. Mais pour la plupart des sites, n'essayez pas de cacher, de diminuer ou d'agrandir vos images.
Navigation
On sait d'expérience que quand les éléments de navigation sont trop nombreux sur la page, son ergonomie est déplorable pour un utilisateur de synthèse vocale. Pour quelle autre raison aurions-nous inventé (et débattons-nous sans fin de la meilleure façon de mettre en place) le lien qui permet de sauter la navigation ?
Considérons maintenant le visiteur équipé d'un logiciel de zoom. Si votre navigation (que ce soit une liste non ordonnée ou un quelconque autre moyen) est posée dans une colonne à gauche de l'écran, soit cette colonne va occuper la plus grande portion de l'écran magnifié, soit le visiteur aura fait défiler horizontalement la page vers la droite pour l'éliminer. Une grosse colonne sur la gauche est donc un élément bloquant.
La véritable solution est de simplifier la navigation, pour pouvoir la sauter si besoin, ou la lire en séquence avec le moins de complications ou de confusions possibles. Je dois bien admettre que Jeffrey Zeldman a raison : si vous pensez que votre site a besoin de menus déroulants, vous devez repenser votre architecture.
Pour améliorer la navigation pour les visiteurs qui utilisent un zoom :
- Dans la plupart des cas, on limitera à une ou deux lignes maximum le texte de la barre de navigation, qu'on présentera à l'horizontale en haut de l'écran.
- Si votre navigation est déjà simple, vous n'aurez presque pas de modifications à apporter à votre CSS.
- Si vous devez néanmoins conserver un gros bloc de navigation, extrayez-en les éléments les plus importants pour le haut de page, le reste pouvant être inclus dans un pied de page, par exemple.
Nous n'avons pas encore de méthodes très abouties et largement testées ; tout cela est encore assez nouveau. Pour compliquer les choses, le HTML ne nous vient pas forcément en aide. Parmi les options à notre disposition, on peut retenir que :
- Si votre barre de navigation est écrite comme une liste non ordonnée, il peut être nécessaire d'assigner des classes aux items que vous voulez montrer ou cacher dans un design agrandi (j'imagine qu'on donnera une classe au plus petit des deux groupes).
- Une autre possibilité peut être d'utiliser deux listes, bien que ceci suppose que l'ordre précis des items le permette (autrement dit, que tous les éléments que vous voulez montrer dans un design zoomé soient dans la même liste).
- Si vous n'avez que quelques items, marqués comme de simples éléments
<a></a>encadrés par un caractère séparateur, votre navigation est sans doute assez simple pour ne pas être modifiée. Sinon, vous pouvez écrire une deuxième barre de navigation dans votre code et afficher l'une ou l'autre des barres de navigation selon la feuille de style choisie.
Exemples
Mes estimés collègues, Cameron Adams et Sergio Villareal, ont écrit de nouvelles CSS de présentation zoomée pour leurs sites, et leur consultation vous donnera un exemple approximatif de cette approche assez nouvelle.
- Cameron Adams
- The Man in Blue
- Normal
- Design zoomé (« design contrasté » sur le site)
- Sergio Villareal
- Overcaffeinated
- Normal
- Design zoomé (« design à fort contraste » sur le site)
- Mise en page en une colonne
La moisson n'est pas énorme, mais c'est tout ce que j'ai pu tirer des nombreux développeurs que j'ai sondés sur une période de cinq mois.
Il nous faut plus d'exemples de designs zoomés pour consolider cette notion dans l'esprit des designers visuels. Si vous tentez l'expérience sur votre site, faites-le nous savoir dans les commentaires de cet article (article original, NdT), ainsi que, de préférence, sur la page ZoomLayouts du wiki de CSS-Discuss.
Pour l'instant, certains sites utilisent aussi une page de préférences pour spécifier les polices et les couleurs :
- K.S. Pope
- Confort de lecture (un projet rélié à Handicapzéro)
- Sjoerd Visscher
Types de médias
Je n'ai pas réussi jusqu'ici à provoquer de consensus parmi les leaders du Groupe de Travail CSS pour créer un nouveau type de média, zoom, qui serait utilisé par les utilisateurs de logiciels de magnification. (À l'inverse, il a été reconnu, bien discrètement, qu'une nouvelle propriété reader est nécessaire. Cette proposition n'a débouché sur rien, mais tout est encore possible).
Étant donné la multitude de propriétés d'affichage à manipuler dans une présentation agrandie, où l'on affichera et masquera des parties spécifiques de la page, il peut après tout être nécessaire de réfléchir à un type de média zoom. Je laisse à d'autres le soin de s'en faire les avocats.
Similarités avec l'affichage sur de petits écrans
Quand on y pense, ce que vous faites en concevant une mise en page zoomée en CSS se rapproche de ce qu'un navigateur de poche doit faire quand il se retrouve face à une large page composée de multiples colonnes. Il doit lui aussi réorganiser et masquer sélectivement des composants pour que le contenu soit rendu sur une seule colonne. La différence est qu'il n'y a pas besoin de redéfinir radicalement les styles de polices pour les rendre lisibles ; même la présentation des polices par défaut sur la plupart des navigateurs de poche est considérée comme lisible et n'a pas besoin d'être modifiée.
Nous pouvons comparer les formats d'affichage de cette manière :
| Conventionnel | Zoomé | De poche |
|---|---|---|
| Public multiple | Public à vision réduite (pas le choix) | Possède un assistant personnel (c'est un choix) |
| Une ou plusieurs colonnes | Une colonne | |
| Pas de limites à la navigation | Navigation simple de préférence | Navigation éliminée, réécrite par un serveur de proxy, ou repoussée en bas de page |
| Toutes couleurs | De préférence clair sur foncé | De préférence couleurs par défaut du navigateur (habituellement sombre sur clair) |
| Toutes tailles de polices | Grandes polices nécessaires | De préférence les tailles par défaut du navigateur |
Les plates-formes d'affichage sur petit écran (SSR, Small Screen Rendering) les plus modernes tentent de déterminer intelligemment quels éléments posés côte à côte, quelles images, quels en-tête, pied de page et séparateurs de toutes sortes sont véritablement pertinents. Comme peu de sites comportent un code HTML valide, que les sites mis en page en CSS sont encore moins nombreux, et qu'aucun consensus n'existe sur la façon de nommer les composants de la page, les navigateurs SSR représentent un défi sérieux pour la recherche en intelligence artificielle (voir références ci-dessous).
Cependant, en tant que designer ou développeur, vous connaissez votre propre site et les conventions qu'il utilise. Il se peut que vous tâtonniez un peu dans l'écriture de vos CSS avant de produire une mise en page zoomée simple, assez grosse et lisible, mais vous savez d'avance que c'est possible. Et en fait, vous pouvez réutiliser la compétence acquise en écrivant un design zoomé pour rendre votre site compatible avec un navigateur de poche. Partez de votre style zoomable, et effectuez les changements suivants :
- Conservez une mise en page en une seule colonne.
- Ne spécifiez ni police, ni taille, ni couleur (sauf si vous avez vraiment une bonne connaissance des navigateurs utilisés par vos visiteurs).
- Envisagez de cacher, ou au moins de déplacer, toute votre navigation. Mettez le contenu de la page en premier.
- Persévérez à ne rien faire de spécial à vos images. Elles constituent un problème connu pour les navigateurs de PDA, et vous devriez laisser ces agents utilisateur se débrouiller eux-mêmes avec vos images.
Conclusion
On peut espérer que cet article servira de point de départ pour que les designers attentifs aux standards trouvent une nouvelle application des principes de montage fondés sur les CSS. Il semble que, plus le temps passe, plus on trouve de moyens d'utiliser des technologies qui paraissent en surface figées dans le temps (en l'occurrence, les spécifications HTML et CSS). De même, chaque année qui passe nous voit apprendre davantage sur les moyens d'améliorer l'expérience des visiteurs handicapés sans pénaliser les qualités graphiques ni aucun autre aspect désirable de nos sites.
La balle est maintenant dans votre camp. J'aimerais voir plus de tentatives de montages zoomables, et, le moment venu, un consensus général selon lequel un site accessible, au design professionnel, conforme aux normes, n'est pas complet sans un design zoomé.
Références
Utilisateurs déficients visuels
- Aider les déficients visuels et d'autres utilisateurs en fournissant des sites qui répondent à leurs besoins : un site pour tous est-il faisable ? (Redish et Theofanos)
- Bonne accessibilité, bon design
Affichage sur petit écran (Small-screen rendering)
- Mettre à plat et zoomer : voir des pages web sur des petits écrans en supprimant dynamiquement le contenu non-pertinent.
-
Les notions de sélection réactive étudiées dans ce rapport (où les utilisateurs de PDA tirent des lignes diagonales pour ouvrir et fermer des éléments de la page) pourraient être aisément appliquées aux navigateurs traditionnels, par exemple via une extension de Firefox ou Mozilla. (Elles pourraient aussi être partie intégrante du navigateur. Au passage, cela permettrait de faciliter, à défaut d'y obéir tout à fait, la Règle 5 des User Agent Accessibility Guidelines).
- Détection de la structure d'une page web pour un visionnage adapté sur des outils de rendu réduits
L'auteur préconise une méthode qui tente d'inférer la structure du HTML pour pouvoir réorganiser le contenu de la page. Évidemment, tout l'édifice s'écroule face à un code invalide : « dans l'étape d'analyse de la page, les erreurs de syntaxe du HTML laissées par l'auteur pourraient provoquer une mauvaise interprétation de l'arborescence DOM du HTML, ce qui pourrait parfois induire des résultats inattendus dans la détection de blocs de contenu au niveau le plus haut. Par exemple, une paire de tags
<form></form>mal placés dans une page web force notre interpréteur à repousser le pied de page sous un petit tableau en fin de document. »- SmartView : Visionneuse de documents avancée pour appareils mobiles
- PDF (que Google refuse d'indexer parce qu'il est sur un serveur FTP)
« Pour le moment, il existe bien trop peu de matériel publié sur le web utilisable sur des interfaces mobiles [ce qui n'est déjà pas souhaitable du point de vue de la portabilité des documents]... Dans quelques cas bien identifiés, le prototype SmartView ajuste la disposition d'une section en la déconstruisant entièrement avant de la linéariser pour l'adapter à la fenêtre... La disposition est modifiée en passant d'un arrangement côte à côte à une linéarisation verticale, cette dernière étant plus efficace sur un petit écran. »
- Le rendu pour petit écran d'Opera
Remerciements
Un bon nombre de méthodes décrites dans cet article sont inspirées d'une présentation d'Aries Arditi à la convention de l'Académie Américaine d'Optométrie, Dallas, 06/12/2003. L'auteur a pris contact avec M. Arditi pour pouvoir faire une référence à cette présentation, mais n'a reçu aucune réponse.
http://www.alistapart.com/articles/lowvision/