Fil d'Ariane : Consultant Expert Web > Solutions > Métier > Accessibilité numérique > site plus universel > Méthodologie +Universel

Méthodologie +Universel

La méthode de conception de Business & Decision Interactive Eolas, nommée +Universel.

Eolas+Universel

+UniverselB&DI Eolas s'engage en faveur d'un web "diversifié" en proposant des services construits sur une base commune à tous : celles des standards Internet élaborés par le Consortium du World Wide Web (W3C).

Pourquoi d'une indépendance croissante vis à vis du navigateur

  • Pour laisser l'usager libre d'utiliser le navigateur qui lui convient sur le système d'exploitation de son choix,
  • Parce que l'histoire du WEB nous montre que nous ne pouvons pas connaître le paysage des navigateurs de demain,
  • Parce que nous voulons construire des services plus pérennes que les simples effets de modes,
  • Parce que des normes internationales sur les langages informatiques utilisés pour rédiger et mettre en forme les documents WEB existent et qu'elles assument le passé et la pluralité du WEB,
  • Parce que les éditeurs de navigateur - conscient de ces enjeux - implémentent de plus en plus ces normes.

Une diminution des temps de téléchargement

Notre approche du développement WEB par les standards nous force à identifier et à séparer les grandes composantes d'une page : le contenu et le design.

Ŕ chacun de ces deux points correspond un langage de plus en plus spécialisé :

  • Le HTML pour la rédaction des contenus,
  • Le langage des feuilles de style en cascade (CSS) pour la mise en forme.

Cette séparation permet d'obtenir un seul fichier CSS (externe aux sources HTML) pour l'ensemble du site et des fichiers HTML plus petits en poids pour chacun des contenus (de 10 à 50% de réduction par rapport à une source HTML mélangeant le contenu et la mise en forme).
L'utilisation d'un fichier CSS unique et identique sur l'ensemble du site rend obsolète son téléchargement à chaque page consultée. Le navigateur va pouvoir l'enregistrer sur la machine de l'utilisateur (le cache) et l'appliquer à chaque fois que nécessaire (c'est à dire à chaque page). En fin de compte et pour ce site consulté en profondeur, le navigateur n'aura à télécharger que les sources HTML qui sont alors très légères. L'utilisateur va donc pouvoir gagner de précieuses secondes qui vont augmenter sensiblement son confort de navigation.

Une personnalisation des contenus aux besoins et désirs de chacun

Parce que chaque personne est différente et a des besoins ou des désirs particuliers, nous offrons la possibilité de personnaliser le rendu des pages que nous développons en soumettant au navigateur de l’internaute une feuille de style qu'il va appliquer à chacun des contenus consultés.
Une " feuille de style utilisateur " correspond à un fichier de mise en forme CSS - semblable à celle implémentée par les auteurs du site - qui permet de préciser le rendu par défaut des éléments HTML .
Cette personnalisation est possible grâce à deux facteurs :

  • une séparation forte entre les contenus HTML et les éléments de mise en forme des fichiers CSS ,
  • un respect du sens original des éléments HTML comme spécifiée par la recommandation internationale de ce langage. Par exemple, chaque niveau de titrage est implémenté au sein de la source HTML par un élément <hX> ou X représente le dit niveau (de 1 à 6 en HTML ).

+U : Si vous jugez que le contraste des pages est insuffisant pour votre vue, si les titrages ne ressortent pas assez à votre goût et que vous voulez changer leur couleur et leur taille.

Vous avez la possibilité de modifier ces éléments au sein d'une feuille de style utilisateur en incorporant un fichier texte ayant pour extension ".css" comprenant le texte ci-dessous :

/* 
Appliquer une couleur rouge et une police de 18 pixels à tous les titrages de niveau 2 (décrit en HTML par l'élément H2 (Heading level 2)
Le libellé "!important" permet simplement d'appliquer le style quelque soit les styles implémentés par l'auteur du site.
*/
h2 {
color :red !important;
font-size : 18px !important ;
}
/*
Appliquer à tous les éléments une couleur de texte jaune sur un fond noir.
En CSS le caractère * permet de sélectionner l'ensemble des éléments de la source HTML */ * { background-color : black !important;
color : yellow !important;
}

+U : Procédure d’intégration de la feuille de style :

La méthode d'importation variant d'un navigateur à l'autre nous allons nous limiter à la description de la procédure sous Internet Explorer 5 et versions supérieures.
Sur ce navigateur, ce sont les "options d'accessibilité" qui permettent de profiter de cette fonctionnalité.
Au sein des menus "Outils", "Options Internet ..." et de l'onglet "Général" il suffit de cliquer sur le bouton "Accessibilité" pour qu'une nouvelle fenêtre apparaisse. Sur cette fenêtre et au niveau de la section "Feuille de style utilisateur" il suffit de cocher l'option "Mettre les documents en forme en utilisant ma feuille de style" et de sélectionner votre fichier ".css" nouvellement créé. A partir de là, il ne vous reste plus qu'à valider chacun de vos choix en cliquant sur les boutons "OK". (Pour revenir à votre configuration de base, il suffit de recommencer la procédure et de décocher l'option "Mettre les documents en forme en utilisant ma feuille de style")

+U : Pour compléter cette feuille de style "minimale"

Nous vous proposons un fichier CSS un peu plus évolué permettant d'annuler certaines propriétés que les auteurs de sites conformes aux standards implémentent et faire ressortir les éléments importants comme les titrages, les liens, les champs de formulaire et les listes en tout genre.

Les aides techniques

Parce que le WEB permet aux personnes handicapées de gagner en autonomie nous voulons leur proposer des services plus utilisables, plus intelligibles et plus robustes aux différentes aides techniques.
Le terme d' « aides techniques » englobe ici toutes les aides logiciels et matériels permettant de restituer et d'utiliser les ressources du WEB.
Dans cette catégorie, nous pouvons citer les reconnaissances vocales qui permettent aux personnes handicapées moteur d’effectuer des commandes de navigation vocales.
Nous pouvons citer également les navigateurs textes, les synthèses vocales et les afficheurs brailles utilisés par les personnes aveugles. Chacune de ces aides donne à l'usager une représentation totalement différente du WEB de celle que nous pouvons avoir avec un navigateur graphique :

  • une représentation textuelle où les notions d'image, de mise en forme et d'interactivité sont totalement inexistantes,
  • une représentation vocale où l'utilisation correcte des éléments HTML porteurs de sens (titrage, mise en emphase, liste etc.) est capitale. En effet, ne pouvant restituer que séquentiellement les contenus et dans le but de faciliter leur compréhension globale, ces aides techniques adoptent une intonation ou une voix différentes selon la signification des éléments implémentés par l'auteur.
  • une représentation tactile (pouvant être couplée à une synthèse vocale) ou toute la compréhension des pages repose sur le seul contact avec la plage braille. D'où l'importance encore une fois d'implémenter des éléments HTML dont tout le monde s'est accordé sur la signification.

Afin d'avoir des contenus plus adaptables à toutes ces représentations et qui soient plus simple dans leur compréhension globale, nous mettons en avant une organisation logique des pages et des informations qu'elles contiennent. C'est à dire qu'au-delà du respect des standards du W3C, au-delà d'une forte séparation "contenu / mise en forme" et au-delà d'une utilisation sémantique du HTML, nos contenus sont organisés de manière à présenter textuellement, vocalement ou de manière tactile le contenu principal en premier - ce contenu étant suivi de près par les éléments en rapport avec lui, et seulement ensuite par les informations plus générales comme la navigation principale. L'utilisateur n'aura donc pas dépensé une énergie importante pour reconstruire mentalement l'organisation de la page et se souvenir par exemple que la navigation principale est située au début comme sur la majorité des sites existants.

  • +U : Pour mieux comprendre les bienfaits d'une conception intégrant un HTML sémantique et une organisation logique des contenus, nous vous recommandons de tester un client texte comme "Lynx" ou une synthèse vocale comme "Home Page Reader" qui correspond à deux logiciels parfaitement accessibles aux personnes non initiées.

Lynx

Téléchargement pour les différentes plateforme.
Documentation officielle en anglais .
Aide en français.

Home Page Reader

Téléchargement de la version d'évaluation en français et consultation de l'aide en ligne en anglais.

Une intégration native de plusieurs médias de consultation

Parce que les normes permettent de sortir les contenus du média écran, nous pouvons vous garantir une parfaite qualité d'impression des différents articles directement depuis les fonctionnalités de votre navigateur ou encore une consultation relativement aisée depuis votre assistant personnel (PDA) ou votre téléphone connectable aux services WEB.
Le langage des feuilles de styles CSS permet de proposer une présentation des contenus particulière pour un certain nombre de média dont l'impression et les appareils portatifs à petit écran.

  • +U : Nous vous invitons à réaliser un aperçu avant impression depuis Internet Explorer 6 (ou réaliser une impression depuis les versions 5) ou tout autre navigateur récent. Vous constaterez alors que les éléments de navigation - qui n'apportent aucun intérêt pour ce média - ont été supprimés pour ne pas vous faire dépenser papier et encre inutilement. Pour un autre exemple de la puissance des CSS , il est possible - sur les navigateurs autre que Internet Explorer - d'imprimer les URL des liens de certaines sections de type "en savoir plus" afin que l'usager puisse retrouvez plus facilement les ressources qu'il a précédemment imprimées.
  • +U : Pour les appareils de type PDA et téléphone mobile intégrant le langage CSS , il est tout aussi envisageable de réaliser une mise en forme spécifique en jouant avec les caractéristiques de ces périphériques et d'y ajouter par exemple un peu de couleur. Pour ceux n'implémentant pas les CSS et pour l'ensemble des médias non pris en compte lors du développement et qui sont connectable aux services WEB, il est important de noter que :
    • l'implémentation d'une séparation "forme / contenu",
    • l'utilisation d'un HTML dont tout le monde s'est accordée sur la signification des éléments,
    • et la mise en avant d'une organisation logique des contenus.

Permet d'obtenir des pages facilement utilisables et compréhensibles. Ces dernières devant se dégrader harmonieusement selon les contraintes fortes pouvant exister sur chacun des périphériques.

Si vous ne possédez pas directement de PDA ou de téléphone mobile de ce type vous avez la possibilité de télécharger une émulation (5 Mo ) - gratuitement après enregistrement - simple d'utilisation vous permettant de naviguer sur les sites aux normes équivalentes à celui-ci.

Une réutilisation simplifiée des contenus en dehors de la consultation en ligne

  • Parce que nous pensons qu'un des prochains défis technologiques concernera la réutilisation des contenus WEB par chacun avec plus de puissance et de simplicité,
  • et par ce que les normes sont élaborées pour permettre l'échange de données entre divers environnements.

Nous proposons à l'usager de profiter des premières briques de ce vaste projet dès aujourd'hui.

  • +U : Par exemple un article vous intéresse et vous désirer avoir la possibilité de le consulter très facilement hors ligne ou de le transférer tout aussi facilement à un de vos amis sans connexion Internet. Notre méthode de conception va vous simplifier la tâche : il vous suffira de sélectionner le dit contenu ou toute la page à l'aide des touches « CTRL + A » pressées simultanément sous Windows, de le copier (CTRL + C) et de le coller (CTRL + V) dans une application tiers comme l'application bureautique Microsoft Word . Vous obtiendrez un contenu tout à fait adapté à cet environnement qui sera dégagé des multiples fichiers présents lors d'une sauvegarde au format HTML .
  • +U : Une autre application possible est la conversion au format PDF : Pour cela, il vous suffit d'utiliser un formulaire en ligne comme celui proposé par pdf-o-matic en renseignant l' URL de la ressource HTML désirée. La validation d'un tel formulaire vous montrera le portage réussi d'un document HTML au format PDF . Vous pourrez de cette manière être libre de diffuser ou de consulter en mode déconnecté chacun des contenus.

Des navigateurs Internet

+Universel

Nous vous invitons à découvrir des navigateurs de qualité. Il en existe pour tous les goûts et pour toutes les configurations :