Actualités

Pourquoi et comment soigner l’accessibilité d’un site web

Exemplaire. Suivre les recommandations WAI est tout bénéfice. D’une part, la vie des personnes handicapées s’en trouve facilitée, d’autre part le site lui-même est plus propre, plus rapide et plus lisible pour tous les internautes

Vous êtes au magasin en train de faire des achats. Vous hésitez entre deux produits, donc vous décidez de comparer leur composition. Tout naturellement vous retournez l’emballage et surprise… L’étiquette du prix est collée sur celle de la composition. Vous essayez de grattez, impossible. Votre sentiment? Un bon juron et vous prenez un autre emballage en espérant pouvoir lire la composition.

Mais lorsqu’une personne handicapée recherche une information sur le web et qu’arrivée à la page tant attendue, elle constate que l’accès est impossible, elle n’a pas d’alternative. C’est ce qu’en accessibilité on appelle une barrière.

L’accessibilité du web concerne prioritairement les personnes souffrant de handicaps – visuels dans la majorité des cas. Par ailleurs, les seniors sont eux aussi vite bloqués par les insiffisances de contraste et une structure incohérente en désespérera plus d’un.

Pourquoi des sites web sont-ils inaccessibles?

Parce que les techniques de développement sont réservées à une caste d’érudits protégeant jalousement son trésor. Je plaisante! Les normes d’accessibilité WAI (Web accessibility initiative) publiée par le W3C, sont disponibles publiquement depuis 1996.

Evidemment, à cette époque, Netscape et IE n’étaient pas encore très copains avec ces normes. On découvrait le web et chacun s’essayait à copier sur le net ses plus belles plaquettes papier. Chaque webmaster est alors devenu maître du découpage, cisaillant l’interface écran en micro-zones pour être sûr de bien caler les moindres détails de ces belles mises en page. Résultat des courses, le code contenant les informations de mise en page était (est) trois fois plus important que les informations utiles.

On hérite toujours de ces imbrications de tableaux, parce que, bien entendu, ce sont des codes valables, correctement implémentés par les navigateurs, mais détournés de leur affectation primaire. Les tableaux sont là pour structurer des contenus tabulaires… et non pour caler des interfaces.

Et pourquoi me direz-vous? Parce que les outils utilisés par les aveugles et les mal voyants s’emmêlent les balises dans tout ce code inutile; avec ces techniques, la maintenance des sites est très lourde; des quantités faramineuses d’informations inutiles engorgent la bande du net; le référencement naturel des sites est moins efficace; la linéarisation (absence de mise en page) des contenus n’est pas possible.

Pourquoi se soucier d’une minorité ?

Vote site s’adresse à une clientèle jeune, il flashe un maximum, il est complètement «sisomo» (sight sound motion). Parfait, l’accessibilité n’est pas votre priorité.

Vous délivrez des informations à caractère public, vous intéressez un large public? Vous devriez penser qu’une loi (LHand 2002) vous recommande vivement de ne pas établir de discrimination à l’encontre des personnes handicapées de la parole, de l’ouïe ou de la vue.

Si nous sommes environ 50% de la population à utiliser régulièrement le web, ce sont plus de 80% des personnes handicapées qui profitent de cet intégrateur social pour se rapprocher de leurs semblables. Ainsi, une personne aveugle peut lire son journal ou un livre, échanger des e-mails, etc. La Confédération a montré la voie en rendant progressivement ses sites conformes aux normes actuelles, incluant l’accessibilité.

Finalement, quels sont les freins à l’accessibilité?

Selon les handicaps, les problèmes vont se trouver dans le code de la page, à l’écran, sur les périphériques (souris, claviers), ou dans un joyeux mélange des trois.

Les aveugles utilisent un synthétiseur vocal ou une plage braille. Le synthétiseur vocal, meilleur marché, est plus utilisé. Il lit le code de la page, l’interprète et le restitue sous forme vocale. L’exercice est stupéfiant. Il demande de l’apprentissage, une concentration absolue et un très gros effort de mémoire pour naviguer un peu confortablement.

Des fenêtres spécialisées et des touches d’accès rapides regroupent des types d’informations. Mais voilà, si la page n’est pas bien structurée sémantiquement, tintin, plus d’aides. Exemple : votre page comprend 52 liens, pas de problème. Nous voyants, scannons l’écran pour tomber rapidement sur l’info. Si vous êtes aveugle et que ces liens ne sont pas organisés, vous les passez tous en revue (auditivement), l’enfer!

Une personne mal voyante utilisera un agrandisseur d’écran. Mais pas pour zoomer juste un petit peu, jusqu’à 16x! Et pour celles qui ont de vrais problèmes de vue, les couleurs sont modifiées pour correspondre à leur pathologie. C’est comme si vous lisiez le journal à travers le trou de la serrure. Pour s’y retrouver sur l’écran, ça tient de l’exercice de style si vos informations ne sont pas regroupées.

Nos trouvons aussi tout un groupe de personnes atteintes d’handicaps mentaux. Leurs facultés cognitives sont celles d’un enfant de 4 à 6 ans. Elles utilisent donc principalement des sites spécialisés.

Les secrets de l’accessibilité enfin dévoilés

Installez-vous confortablement avec une bonne canette. Ensuite, passez en revue les normes CSS et les Guidelines WCAG (Web Content Accessibility Guidelines), qui sont les recommandations pour l’accessibilité. Ensuite prenez votre éditeur HTML préféré, faites quelques essais et vérifiez votre chef-d’œuvre sur les principaux navigateurs. Oups, les rendus ne sont pas pareils! En effet, bien que les principaux constructeurs soient parties prenantes dans les projets du W3C, les vieilles manies d’interpréter les normes ne sont pas complètement passées d’époque. Bon ça s’arrange progressivement avec le temps (IE8). Concentrez peut-être vos tests sur Firefox et IE.

L’important, finalement, est de séparer le contenu du contenant. Le contenant, soit l’interface écran et la présentation des contenus (titres, paragraphes, etc.) sont l’affaire des CSS. En somme, toutes les informations de mise en page sont regroupées dans un fichier .css, chargé avec la première page d’un site. Ensuite, à chaque appel de page, ne circulent plus que les contenus. Et pour la maintenance, quelques retouches au CSS et hop, tout le site est à jour. Super, non?

Cerise sur le gâteau, en codant votre site de manière normalisée, vous avez fait un grand pas dans l’accessibilité et le web de demain, où la sémantique doit jouer un rôle majeur, foi de Tim Berners Lee (le grand patron du web).

Bon, un fichier CSS ne sort pas par magie de son chapeau. Il faut l’écrire soigneusement, tester à mesure. Les sites d’OpenWeb ou  d’Alsacréations sont de bons points de départs.

Problématique. Les rectangles rouges et verts soulignent la présence de tables HTML dans la structure de l'interface.

Eparpillement. L'affichage de la page, sans feuilles CSS, n'est pas linéaire. Dès lors, les malvoyants ont beaucoup de difficultés à s'y retrouver.

Un exemple : affichez les sites bk.admin et jura.ch. Ok, ça ressemble à des sites, interfaces sympas, tout va bien. Mais dans le web, tout se passe sous le manteau! Le site du Jura, bien que récent, est difficilement accessible car il n’est pas possible de faire la distinction entre les différentes zones d’informations (éléments HTML mal définis), la navigation dynamique est inutilisable par les personnes handicapées, il est impossible de se servir du site avec le clavier. Visuellement, tout va bien, par contre, côté code (ce que le mandant ne peut à priori pas déceler), tout va mal.

Le site de la Chancellerie fédérale répond, lui, aux exigences de la LHand. Il offre une bonne accessibilité aux personnes handicapées. Un bon site à décortiquer.

Page de garde de la Chancellerie fédérale. C’est le nouveau look de la Confédération avec un code normalisé, conforme à l’accessibilité.

Accessible. Sans feuille de style, l'affichage de la page d'accueil du site de la Confédération est linéaire. Pour mettre en évidence la sa structure, il est fait mention des différentes sections composant la page, tels la navigation principale, le contenu ou l'accès réservé aux membres de l'administration fédérale.

Comment construire des sites accessibles

Le plus simple est de choisir des prestataires appliquant les normes du W3C. Ce dernier publie sur une de ses pages une liste d’arguments et de pré-requis forts utiles. Vous pouvez aussi faire évaluer votre site auprès de la Fondation Accès pour tous, désignée par la Confédération pour promouvoir une technologie adaptée aux handicapés. De nombreuses instances publiques profitent de la toute récente labellisation label4all, garantie d’un site web accessible.

Que coûte l’accessibilité?

En principe, le fait de construire un site normalisé n’apporte pas de coût supplémentaire. Pour en faire un site accessible, il y a un petit effort supplémentaire de codage générant un surcoût de 10 à 15%. Cela dépend bien évidemment des configurations. Si votre site est construit autour d’un CMS, il faudra que votre CMS génère du code conforme et là, ça peut devenir un peu plus compliqué.

Votre site est maintenant tout neuf, il sort des garages de votre Web Agency. Avez-vous les bons mécaniciens? L’équipe de maintenance devrait sans doute suivre une formation appropriée, sans quoi, le capital de départ risque de vite se dégrader. Il faudrait en tenir compte dans le budget du site.

Christian Rufi,
Accès pour tous