Exemple d`analyse n°3: le site www.sncb.be

Transcription

Université Catholique de Louvain la Neuve
Institut d’administration et de gestion
GETI 3813 : Informatique interactive de gestion
Conception ergonomique de pages Web
M. J. Vanderdonckt
Mai 2000
Sophie Matthys
Introduction ................................................................................................................................ 1
1. Conception globale du site ................................................................................................. 2
2. Navigation .......................................................................................................................... 8
3. Présentation ...................................................................................................................... 10
4. Formulaires, titres et en-têtes ........................................................................................... 12
5. Cadres et fenêtres ............................................................................................................. 16
6. Graphiques........................................................................................................................ 19
7. Eléments multimédias ...................................................................................................... 20
8. Accessibilité ..................................................................................................................... 21
9. Adéquation aux critères ergonomiques et conclusion...................................................... 22
A. La compatibilité........................................................................................................... 22
B. La cohérence................................................................................................................ 22
C. La charge de travail ..................................................................................................... 23
D. L’adaptation................................................................................................................. 23
E. Le contrôle du dialogue ............................................................................................... 23
F. La représentativité........................................................................................................ 24
G. Le guidage ................................................................................................................... 24
H. La gestion des erreurs.................................................................................................. 24
I. Conclusion .................................................................................................................... 24
Annexe 1 : Bobby..................................................................................................................... 26
Priority 1 Accessibility......................................................................................................... 26
P1 - Manual check............................................................................................................ 27
Browser Compatibility Errors .............................................................................................. 29
Download Time.................................................................................................................... 30
Bobby finished. .................................................................................................................... 31
Priority 1 Accessibility......................................................................................................... 31
P1 - Manual check............................................................................................................ 32
Browser Compatibility Errors .............................................................................................. 34
Download Time.................................................................................................................... 35
INTRODUCTION
L'avènement de l’informatique et la formidable expansion d'Internet ont, en quelques années,
bouleversé la façon de travailler. Chaque jour davantage, la société actuelle se transforme en
une Société de l’Information. Il est donc important que les sites qu’on retrouve sur le Web
soient conçus de manière à ce que l’information qui s’y trouve soit accessible le plus
efficacement possible, c’est à dire de manière rapide, sans erreur et sans effort inutile de la
part de l’utilisateur. Pour ce faire, le site doit être conçu de manière ergonomique.
Ce travail ayant pour but de mettre en pratique les concepts vus au cours d’informatique
interactive de gestion, j’ai choisi la page du site de la SNCB permettant de consulter les
horaires des trains en Belgique.
Cette page est bien interactive puisqu’elle propose un
dialogue entre l’utilisateur et le système d’information, en ce sens que sur base des
informations données par l’utilisateur, le système d’information va répondre à sa requête.
Cette page est très utile, consultée chaque jour par de nombreux internautes, mais n’est pas
parfaite.
Je vais donc essayer au cours de ce travail de montrer quelles améliorations
pourraient y être apportées.
Nous commencerons l’analyse par l’examen du site, de sa présentation, sa conception, son
accessibilité et nous conclurons par une critique basée sur les 8 critères ergonomiques vus au
cours : la compatibilité, la cohérence, la charge de travail, le contrôle du dialogue, la
représentativité, l’adaptation, le guidage, et la gestion des erreurs.
-1-
1. Conception globale du site
En tapant l’adresse http://www.sncb.be le visiteur arrive sur une page lui permettant de choisir
la langue dans laquelle il veut visiter le site, vient ensuite la page d’accueil. Cette page permet
à nouveau de choisir la langue de navigation et affiche une série de liens menant aux
différentes pages d'informations du site. Le visiteur peut alors choisir d’aller consulter les
horaires des trains du réseau belge et International. (voir figures 1,2,3 et 4)
Il est donc relativement simple pour l’utilisateur d’arriver sur la page qui l’intéresse. D’autant
plus que la conception du site est cohérente, on retrouve les mêmes images, et logos : un
espace est réservé au-dessus de chaque page avec le titre et le logo de la SNCB, la partie
gauche est réservée au menu qui s’affiche sur une bande de couleur.
La structuration générale du site reste assez sobre, avec une conception organisée en
hiérarchie. La page d’accueil présente un menu sous forme de liens qui permettent à
l’utilisateur de progresser dans sa visite. Le titre de la page nous montre qu’il s’agit de la
SNCB, les sous-titres permettent de choisir le type d’information que nous voulons obtenir :
trafic voyageur, informations sur la société, télécoms, offres d’emploi, … A partir des pages
référencées par les liens de la page d’accueil il est possible d’atteindre certaines autres pages,
grâce au menu, sans devoir retourner à la page d’accueil. La hiérarchie n’est donc pas trop
stricte.
L’utilisateur a accès à des sous-menu pour les pages sur lesquelles il navigue par
l’intermédiaire du menu de liens situé sur la gauche de l’écran, par exemple à la figure 4 nous
pouvons voir que le sous menu ARI est disponible, sur la page du trafic international,
l’utilisateur aura accès au sous-menu international lu permettant de visiter les pages
concernant l’eurostar, le thalys,…
Le site est relativement statique, mais les sections « les nouvelles de la SNCB »,
« évènements » et « travaux » sont mises à jour régulièrement.
Ce site contient des informations susceptibles d’intéresser le visiteur assez souvent. Il prendra
le train plus d’une fois dans sa vie, il devrait donc avoir facilement accès aux horaires et
-2-
formules de voyage possibles.
Il est surprenant de constater que ce site n’offre pas
explicitement la possibilité explicite d’être notée par un signet.
Figure 1 : Choix de la langue
Le site ne dispose pas de page d’invitation (mis à part celle où on peut choisir la langue de
navigation), ni de page de clôture.
La logique de dénomination des fichiers est relativement cohérente : Les boutons nommés
news, mail, links, permettent par exemple de savoir directement de quoi il s’agit. Par contre,
quand il s’agit d’un fichier nommé squa_b2 pour le carré en haut à gauche contenant le logo
de la SNCB il devient plus difficile d’identifier ce dont il s’agit.
-3-
Figure 2 : Page d'accueil
Figure 3 : Page d’accueil
-4-
Figure 4 : Horaires
Au niveau de l’ergonomie du site, si nous testons la page d’accueil et celle des horaires avec
le logiciel Bobby, nous voyons qu’il existe des problèmes d’accessibilité (certaines images
n’ont pas d’alternative textuelle), de compatibilité avec les navigateurs et que le temps de
chargement est relativement long pour la page d’accueil. (voir annexe1)
Chaque page du site a un titre explicite, un indicateur de structure figure au bas de la page,
des méta-balises mais il n’y a pas de balises cachées, les noms de fichiers ne sont pas tous
représentatifs l’utilisation d’un moteur de recherche ne sera donc pas optimale.
Un moteur de recherche interne est disponible, il permet de faire une recherche sur tout le site
et dans n’importe quelle langue. (figures 5 et 6)
-5-
Figure 5 : Moteur de recherche interne
Figure 6 : Moteur de recherche interne
-6-
Ce moteur de recherche est disponible à partir de toutes les pages du site via le menu situé sur
la gauche de l’écran.
Il permet d’effectuer des recherches dans les quatre langues
(simultanément ou séparément), et dans la partie du site qui intéressent l’utilisateur, ou dans le
site entier.
La flexibilité linguistique est assurée puisque l’utilisateur peut choisir une des trois langues
nationales ou l’Anglais pour visiter le site. La configuration du site est toutefois différente en
allemand et en Anglais.
Nous avons donc vu dans cette section que la conception globale du site est bonne,
l’utilisateur peut s’y retrouver facilement malgré quelques lacunes.
-7-
2. Navigation
La navigation doit être aisée, de manière à ce que l’utilisateur ne s’ennuie jamais et qu’il
puisse arriver de manière simple et rapide à l’information qu’il recherche.
Nous pouvons observer que le site n’a pas énormément de niveaux, et si la règle des trois clics
n’est pas toujours respectée, elle l’est toutefois dans la plupart des cas.
L’utilisateur peut en effet accéder en deux clics à la page des horaires. Par contre pour
obtenir le prix d’un trajet vers l’Espagne en train de nuit, au moins six « clics » sont
nécessaires.
L’information la plus importante est celle qui est présenté en premier lieu. En effet, la plupart
des utilisateurs vont plutôt consulter la page des horaires des trains que celles concernant le
trafic international ou les offres d’emploi.
Sur le côté gauche de chaque page on peut voir une sorte de table des matières composée de
liens menant vers les diverses pages du site. L’utilisateur n’est donc pas obligé de retourner
sur la page d’accueil pour changer de page et il n’est jamais désorienté. Ce menu s’adapte à
l’endroit où l’utilisateur se trouve en affichant un sous menu pour la page où il se trouve.
Mais ce ne sont pas les seuls repères de navigation, en bas de pages, des liens permettent
d’accéder aussi aux diverses pages du site.
Ces liens en bas de pages sont cohérents avec
ceux du menu situé sur la gauche, ils restent au même endroit, l’utilisateur peut donc s’y
retrouver facilement dans le plan du site.
Ce site contient aussi de nombreux liens textuels permettant d’accéder aux informations plus
précises. Il n’y a pas de liens du style « cliquer ici » ou « précédent-suivant » pour aller à une
page il faut utiliser les liens du menu de gauche, les liens de bas de page ou les liens textuels.
Il n’est pas toujours possible de reconnaître les liens déjà visités de ceux qui ne l’ont pas
encore été. Lorsqu’on visite un lien puis qu’on revient sur la page où se trouve le lien, ce
dernier a toujours sa couleur d’origine. L’utilisateur doit donc mémoriser le nom des pages
qu’il a déjà visité s’il ne veut pas perdre de temps à les visiter plusieurs fois.
-8-
Le temps d’accès aux pages est raisonnable. Il est vrai que la page d’accueil fait près de 80Ko,
ce qui peut prendre un certain temps à charger sur un modem peu puissant, mais d’autres
pages sont plus rapides à charger, la page concernant les horaires par exemple n’en fait
qu’une trentaine.
Une image réactive existe sur le site à certains endroits, par exemple pour le choix du pays de
destination lors de voyages internationaux, ou pour certaines promotions.
Il n’y a pas de liens vers des pages incomplètes ou en cours de construction, le site est
complet. Il n’y a pas non plus de liens intra-pages, pourtant le site contient quelques pages
très longues (voir figures 13, 14, 15).
La navigation n’est donc pas parfaite, mais pour la page des horaires elle est très aisée.
-9-
3. Présentation
L’information importante doit être présentée de manière à ce que l’utilisateur puisse y accéder
facilement. Généralement peu de visiteurs font défiler le contenu informationnel présenté à
l’écran, il faut donc que l’information pertinente soit immédiatement visible.
Nous avons déjà vu plus haut (figures 2 et 3) que la page d’accueil ne tient pas sur un seul
écran, mais qu’il en remplit deux entiers en résolution 800 x 600. Il est donc peu probable
qu’elle pourra tenir sur une seule page si on modifie la résolution ou la plate-forme (voir
figure 7). Toutes les informations ne sont donc pas visibles en même temps. Mais une plus
haute résolution permet d’avoir accès aux liens vers toutes les langues disponibles. Les
informations qui semblent importantes pour la plupart des visiteurs sont toutefois situées en
début de page : les horaires et le trafic intérieur. Les personnes utilisant le trafic international
ou ayant besoin d’informations sur B-cargo, ou la SNCB sont probablement moins
nombreuses.
Figure 7 : Page d'accueil 1024 x 768
- 10 -
Cette page n’utilise pas la technique de transparence, les images font partie des bannières
supérieures et réduisent ainsi l’espace réservé aux liens menant aux informations. Si ces
images étaient affichées en arrière plan, cela laisserait plus de place sur la page et peut être la
possibilité d’avoir une page d’accueil en un seul écran. Le texte n’est pas excessivement long
et les espaces blancs l’aèrent suffisamment pour que le visiteur puisse lire cette page
facilement.
La page des horaires par contre tient en un seul écran (sur une plate-forme Windows 98 en
résolution 800 x 600, avec Microsoft explorer 5.0 voir figure 4).
La présentation de la page horaires est cohérente : elle comporte un titre clair, des liens vers
les autres pages d’information, ainsi que vers la page d’accueil, vers le moteur de recherche
interne et vers le vaguemestre.
Le choix d’en faire une page courte est assez judicieux, puisqu’il s’agit d’une page pour
laquelle le visiteur veut accéder à une information précise rapidement.
Le confort de lecture est élevé sur cette page, le texte est très court et la page bien agencée.
- 11 -
4. Formulaires, titres et en-têtes
La saisie d’informations nécessaire pour la recherche horaire se fait dans un formulaire. Il
faut indiquer le nom de la gare de départ ainsi que celle d’arrivée et choisir la date et l’heure
de départ ou d’arrivée. Pour la date et l’heure, les concepteurs du site ont utilisé des listes de
sélection. Si ce choix est judicieux pour les mois et éventuellement l’année, l’utilité n’en est
pas démontrée pour les heures ou les jours où il serait plus simple d’insérer le nombre au
clavier. Ce système permet toutefois d’avoir la date du jour par défaut.
Figure 8 : Choix de la date
Pour la saisie des gares de départ et d’arrivée, l’utilisateur doit entrer le nom correct de la gare
au clavier. S’il fait une erreur, ou s’il manque de précision, un choix multiple lui est proposé.
- 12 -
Figure 9 : Saisie des gares de départ et d’arrivée
Figure 10 : Plusieurs choix possibles
- 13 -
Figure 11 : Plusieurs choix possibles
L’utilisateur peut aussi obtenir une liste des gares via la page des horaires, ce qui lui permet
de faire un « copier – coller » dans le formulaire. Malheureusement cette liste ne permet pas
de cliquer simplement pour entrer le nom de la gare dans le formulaire.
Le codage du titre est le suivant : <TITLE>ARI - Horaires</TITLE>, ce qui permet au moteur
de recherche interne de le trouver assez facilement.
Lorsque l’utilisateur a rempli le formulaire, il peut accéder au résultat en appuyant sur le
bouton recherche horaire. Le résultat est affiché sur un seul écran. Si l’utilisateur veut un
train arrivant plutôt ou plus tard, deux boutons sont à sa disposition sur cette page : train
précédent et train suivant. Il peut donc parcourir toute une série de résultats chaque fois sur
un seul écran. Cela prend du temps à charger, mais permet à l’utilisateur de voir très
rapidement l’information nécessaire sur l’écran.
- 14 -
Figure 12 : Résultat de la demande
Au niveau de la page horaire, nous pouvons donc conclure qu’il est facile d’interagir avec
l’application.
- 15 -
5. Cadres et fenêtres
Ce site n’utilise pas de frames, cela ne pose pas de problème pour la page d’accueil ou la page
des horaires, mais pour des pages plus longues, le défilement empêche l’accès a menu situé
sur la gauche de l’écran.
Figure 13 : Abonnements ; exemple d’une page trop longue
- 16 -
- 17 -
Nous voyons ici que l’écran central (figure 14) n’a accès ni au menu situé sur la gauche de
l’écran ni aux liens de bas de page.
Le site n’utilise pas beaucoup de fenêtres secondaires (il en existe une pour la liste des gares
de la page horaires).
L’auteur pourrait envisager leur utilisation pour les promotions
ponctuelles, les grands évènements par exemple. Cette fenêtre pourrait apparaître en même
temps que la page d’accueil, en prenant soin toutefois à ne pas cacher les informations
contenues sur cette dernière.
- 18 -
6. Graphiques
Le site n’utilise pas vraiment de graphiques, il y a bien le logo de la sncb et quelques autres
images qui égaient les pages, mais pas de graphique contenant un lien. Les liens sont toujours
textuels.
Sur la page d’accueil trois boutons permettent à l’utilisateur de consulter les nouvelles de la
sncb, d’envoyer un mail ou de consulter les liens. Et sur la page d’horaire, un seul bouton est
présent, celui de la recherche horaire. Ce nombre limité de boutons ne donne pas l’impression
à l’utilisateur que la « page web est comme un magnétoscope, truffé de boutons ».
L’auteur aurait pu faire en sorte que les logos de B-cargo ou des télécoms fassent partie du
lien menant à la page correspondante. Pour ces deux liens en effet, un logo est représenté
avant le lien textuel, mais ces logos ne contiennent pas de lien, l’utilisateur est obligé de
cliquer sur le lien textuel.
- 19 -
7. Eléments multimédias
Il n’y a pas de ligne d’horizon, le fond d’écran est blanc et sans motifs, on se trouve donc face
à un site d’une grande sobriété. Le texte est en bleu ou noir, ce qui permet un bon contraste
entre les éléments.
La partie gauche du site est orange claire et le logo de la sncb est sur fond gris. Les couleurs
utilisées font partie des 216 couleurs principales et sont codées en hexadécimal : «
bgcolor="#FFCC99" ».
La police de caractères est claire, mais les textes décrivant les liens de la page d’accueil sont
en italique, ce qui ne facilite pas la lecture.
Il n’y a pas de son, ni d’animation sur ce site. Le visiteur peut donc se concentrer uniquement
sur le contenu informationnel, il n’est pas distrait.
- 20 -
8. Accessibilité
Le site est relativement accessible, en effet, puisqu’il n’y a pas ou peu d’images cliquables,
d’images animées, cela facilite la navigation des malvoyants. Le formulaire de la page
d’horaire ne comporte pas de liste de sélection pour les gares (à condition de ne pas faire
d’erreur), par contre celles de la date et de l’heure peuvent poser problème pour des
malvoyants.
Il y a de nombreux liens textuels sur ce site, or les liens sont « les éléments qui sont sujets au
plus grand nombre de problèmes ». Les liens sont difficilement visibles, la navigation est
donc ralentie et compliquée pour les personnes handicapées. Toutefois, les liens de la page
d’accueil par exemple utilisent une police différente du reste du texte, ce qui permet de
repérer plus facilement les liens.
Le choix d’un fond d’écran blanc et de caractères bleus ou noirs, diminue la fatigue visuelle
due à la lecture à l’écran.
- 21 -
9. Adéquation aux critères ergonomiques et conclusion
Les qualités, ou les défauts, d'un site web sont mesurables grâce à une série de critères.
Certains d'entre eux proviennent de vingt années d'études sur les ordinateurs et leurs logiciels.
D'autres sont spécifiques au web, et se basent sur l'étude, souvent empirique, du
comportement du visiteur face à un nouveau site. Sur base de l’analyse effectuée plus haut
sur les différents aspects du site, nous allons ici évaluer ce site par rapport aux critères
ergonomiques.
A. La compatibilité
La compatibilité est en quelque sorte une cohérence avec l’environnement extérieur à
l’application. Elle est de deux types :
·
site/lecteur
·
site/autres applications, environnement informatique.
Le site doit donc s’adapter aux caractéristiques du lecteur et à celles de l’environnement
informatique.
Ce critère est en général bien respecté, particulièrement sur la page des horaires. Le site est
clair et fonctionnel, l’utilisateur ne sera pas distrait dans l’effectuation de sa tache. La
recherche d’horaires est groupée sur une seule page avec un formulaire simple accessible dans
quatre langues et est donc d’une grande compatibilité.
De petites critiques peuvent toutefois être faites au niveau du site en général :
-
Certaines pages assez longues peuvent décourager la lecture.
-
Le temps de chargement de certaines pages peut être long sur un modem lent.
-
Il n’y a aucune option d’impression.
B. La cohérence
« Une interface homme-machine est qualifiée de cohérente si et seulement si les donées et les
actions sont facilement identifiables, reconnaissables et utilisables. » Une grande cohérence
permet de faciliter l’apprentissage de fonctionnement.
- 22 -
Nous avons vu lors de l’analyse que la présentation du site était cohérente, la présentation des
pages est généralement semblable. Les repères de localisation sont nombreux et permettent à
l’utilisateur de s’y retrouver facilement.
Les critiques à ce niveau-ci sont qu’il n’y a ni page d’invitation ni page de sortie.
C. La charge de travail
Il faut une charge de travail réduite pour effectuer une tâche, cela permettra une interaction
plus rapide de l’utilisateur avec l’application. Il faut que l’utilisateur ait un minimum de
données à manipuler en un nombre minimal d’actions.
Le nombre de clics nécessaires à l’accès à la page des horaires est minime, et à l’intérieur de
cette page l’action est elle aussi effectuée au moyen d’un nombre très petit d’opérations (a
condition toutefois que l’utilisateur ne se trompe pas pour le nom des gares).
Les critiques sont ici que les liens déjà visités ne sont pas marqués, l’accès à certaines pages
nécessite beaucoup d’actions, certaines pages contiennent un trop grand nombre de liens
textuels, ou sont trop longues.
D. L’adaptation
Il s’agit de la capacité du site à s’adapter aux préférences de l’utilisateur.
Un nouvel
utilisateur n’appréhendra pas le site de la même manière qu’un utilisateur expérimenté.
La flexibilité du site n’est pas très grandes, les paramètres peuvent difficilement évoluer en
fonction des préférences de l’utilisateur.
Par contre le site est bien adapté au niveau
d’expérience de l’utilisateur. Un nouvel utilisateur pourra lire la description de différents
liens sur la page d’accueil, tandis qu’un utilisateur expérimenté aura directement accès aux
nouveautés ou à l’information qu’il désire.
E. Le contrôle du dialogue
Le visiteur doit être maître du résultat de ses actions. Il doit pourvoir contrôler ce qui se passe
lorsqu’il interagit avec l’application. La page des horaires est très bien faite dans ce sens
puisqu’après son choix, l’utilisateur a le loisir de consulter l’horaire du train suivant, du train
précédent,…
- 23 -
F. La représentativité
Les symboles doivent être compréhensibles afin de ne pas ralentir la compréhension du site, la
mémorisation de sa structure et l'acquisition de l'information. Nous avons vu plus haut que
les noms de fichiers ou d’images ne sont pas toujours évidents à identifier. Et les quelques
images présentes sur le site ne sont pas toujours associées à un lien. Le logo de la sncb
pourrait par exemple mener à la page d’accueil, ou vers les renseignements sur la sncb.
G. Le guidage
Ce terme regroupe l'ensemble des moyens mis en œuvre pour conseiller, orienter, informer le
lecteur et l'inciter à effectuer certaines actions. La présentation générale du site étant claire et
assortie d’un menu présent en permanence, nous pouvons dire que ce critère est bien respecté.
H. La gestion des erreurs
Ce critère concerne la gestion des messages d’erreur lors d’une mauvaise manipulation de la
part de l’utilisateur. Pour la page des horaires nous avons vu que lorsque l’utilisateur se
trompe ou est imprécis dans l’encodage du nom des gares de départ et d’arrivée, la fenêtre
suivante lui permet de choisir parmi une liste des noms se rapprochant le plus de ce qu’il a
tapé. Les champs des heures et des dates sont eux aussi protégés contre les erreurs puisque
l’utilisateur est obligé de choisir dans une liste déroulante ce qu’il veut introduire dans le
champ. Ce critère est donc lui aussi bien respecté.
I. Conclusion
Nous pouvons donc conclure que malgré quelques faiblesses sur certains critères ce site est
ergonomique. L’utilisateur s’y retrouve facilement et accède rapidement à l’information
recherchée. Quelques améliorations sont toutefois possibles :
-
faire en sorte que l’utilisateur puisse sélectionner les gares de départ et d’arrivée de la
page des horaires directement dans la liste sans devoir faire un copier-coller ;
-
améliorer la dénomination des fichiers et des images ;
-
associer à chaque image une description de ce qu’elle représente (voir Bobby) ;
-
créer une page d’invitation et une page de sortie ;
-
…
- 24 -
Il n’est donc pas simple de construire un site sur internet, de nombreux critères doivent être
pris en compte pour en assurer son ergonomie. Pour les quelques parties que nous avons
examinées, la sncb s’en est bien sortie même si la perfection n’est pas encore atteinte.
- 25 -
ANNEXE 1 : BOBBY
URL: http://www.b-rail.be/F/index.html, April 5, 2000 4:43:45 AM EDT
Bobby Core v3.1.1 build 7, Guidelines Version: W3C WAI GL 99/05/05 (cvs), Bobby Server
v3.1.1
build
7
Browser Compatibility: HTML4.0, AccEval
Priority 1 Accessibility
This page does not yet meet the requirements for Bobby Approved status. Below is a list of 1
accessibility problems that should be fixed in order to make this page accessible to people
with disabilities.
1. Provide alternative text for all images. (14 instances)
All HTML IMG elements should contain a short alternative (alt) text description that
represents
the
function
of
the
graphic.
Line 31: <td rowspan="2" background="/images/rose.jpg" bgcolor="#CEB3B3" colspan="2"
align="right"><img
src="images/h_maison.gif"
WIDTH="310"
HEIGHT="80"><img
src="../images/logo.gif" WIDTH="98" HEIGHT="80"><img src="../images/ban_home.gif" WIDTH="50"
HEIGHT="80"></td>
Line 38: <td colspan="3" width="20" height="5"><img src="../cgi-script/logip.cgi" hspace="0"
width="500"
height="8"></td>
Line 43: <td bgcolor="#000080" colspan="2" align="right"><a href="/N/index.html"><img
src="../images/nl.gif" border="0" WIDTH="89" HEIGHT="18"></a><a href="/D/index.html"><img
src="/images/de.gif" border="0" WIDTH="89" HEIGHT="18"></a><a href="/E/index.html"><img
src="/images/en.gif"
border="0"
WIDTH="89"
HEIGHT="18"></a></td>
Line 54: <td rowspan="2"><img src="/images/banners/ban1_f.gif" border="0" WIDTH="349"
HEIGHT="80"></td>
Line 65: <td align="right" valign="top" width="50"><img src="/images/b.gif" WIDTH="40"
HEIGHT="27"></td>
Line 87: <td align="right" valign="top" width="50"><img src="/images/b-cargo.gif" WIDTH="48"
HEIGHT="24"></td>
HEIGHT="27"></td>
HEIGHT="27"></td>
HEIGHT="27"></td>
Line 144: <td width="100" bgcolor="#FFCC99"><img src="../images/white.gif" width="120"
height="10"></td>
- 26 -
P1 - Manual check
There are some checkpoints that an automatic program like Bobby cannot examine. These 6
item(s) are presented below. You will need to be able to respond affirmatively to these items
as well to obtain Bobby Approved status.
1.
Ensure that descriptions of dynamic content are updated with changes in content.
2.
Provide alternative content for each SCRIPT that conveys important information or function. (1
instance)
Line 27: <table border="0" cellspacing="0" width="100%">
3.
If any of the images on this page convey important information beyond what is in each image's
alternative
text,
add
a
LONGDESC
attribute.
(22
instances)
align="right"><img
WIDTH="310"
HEIGHT="80"><img
src="../images/logo.gif"
WIDTH="98"
HEIGHT="80"><img
src="../images/ban_home.gif"
WIDTH="50"
HEIGHT="80"></td>
width="500"
height="8"></td>
border="0"
WIDTH="89"
Line 53: <td rowspan="2"><a href="/press/F/nieuws/index.html"><img src="images/links/news0.gif"
alt="SNCB
Nouveautés"
border="0"
WIDTH="80"
HEIGHT="80"></td>
Line 55: <td><a href="misc/feedback.html"><img src="images/links/mail.gif" alt="Questions et
suggestions"
border="0"
WIDTH="80"
Line 58: <td><a href="misc/links.html"><img src="images/links/links.gif" alt="Liens vers autres sites"
border="0"
WIDTH="80"
HEIGHT="27"></td>
Line
73:
<p><font
size="5"><strong><a
href="internat/index.html">Trafic
international</a></strong></font><a href="internat/televerk.html"><img src="images/telesales.gif"
alt="Réservez votre biljet-TGV online!" border="0" WIDTH="200" HEIGHT="43"></a><font
size="5"><strong><br>
HEIGHT="24"></td>
Line 94: <td align="right" valign="middle" width="50"><img src="/images/telecom_s.gif"
alt="Telecom"
WIDTH="70"
HEIGHT="21">
</td>
HEIGHT="27"></td>
HEIGHT="27"></td>
HEIGHT="27"></td>
Line
129:
<td
colspan="2"
align="center"><a
href="/F/misc/feedback.html"><img
src="/F/images/links/butt_feedb.gif" border="0" vspace="1" name="butt_feedb" alt="Questions et
Suggestions"
WIDTH="96"
Line 132: <td align="left"><a href="/search/searchF.html"><img src="/N/images/links/butt_sear.gif"
border="0" vspace="1" name="butt_search" alt="Rechercher le site avec mots-clés" WIDTH="47"
Line
133:
<td
align="right"><a
href="/press/F/nieuws/index.html"><img
src="/N/images/links/butt_news.gif" border="0" vspace="1" name="butt_search" alt="Nouveautés"
- 27 -
WIDTH="47"
height="10"></td>
4.
If you can't figure out any other way to make a page accessible, construct an alternate version of the
page which is accessible and has the same content.
5.
If this table contains data in rows and columns (i.e. a spreadsheet), have you identified headers for the
table
rows
and
columns?
(3
instances)
Line
27:
<table
border="0"
cellspacing="0"
width="100%">
Line 51: <td align="center" valign="top" colspan="2"><table border="0" cellspacing="1"
cellpadding="0">
Line 127: <td align="center" width="100" bgcolor="#FFCC99"><table border="0" cellpadding="0"
cellspacing="0">
6.
alternative
text,
add
descriptive
(D)
links.
(22
instances)
align="right"><img
WIDTH="310"
HEIGHT="80"><img
WIDTH="98"
HEIGHT="80"><img
WIDTH="50"
HEIGHT="80"></td>
width="500"
height="8"></td>
border="0"
WIDTH="89"
Line 53: <td rowspan="2"><a href="/press/F/nieuws/index.html"><img src="images/links/news0.gif"
alt="SNCB
Nouveautés"
border="0"
WIDTH="80"
HEIGHT="80"></td>
Line 55: <td><a href="misc/feedback.html"><img src="images/links/mail.gif" alt="Questions et
suggestions"
border="0"
WIDTH="80"
Line 58: <td><a href="misc/links.html"><img src="images/links/links.gif" alt="Liens vers autres sites"
border="0"
WIDTH="80"
HEIGHT="27"></td>
Line
73:
<p><font
size="5"><strong><a
href="internat/index.html">Trafic
international</a></strong></font><a href="internat/televerk.html"><img src="images/telesales.gif"
alt="Réservez votre biljet-TGV online!" border="0" WIDTH="200" HEIGHT="43"></a><font
size="5"><strong><br>
HEIGHT="24"></td>
Line 94: <td align="right" valign="middle" width="50"><img src="/images/telecom_s.gif"
alt="Telecom"
WIDTH="70"
HEIGHT="21">
</td>
HEIGHT="27"></td>
HEIGHT="27"></td>
HEIGHT="27"></td>
Line
129:
<td
colspan="2"
align="center"><a
Suggestions"
WIDTH="96"
Line
133:
<td
align="right"><a
- 28 -
WIDTH="47"
height="10"></td>
This page does not yet meet the requirements for Bobby Approved status.
Browser Compatibility Errors
The following section contains a list of 4 browser compatibility errors. Browser compatibility
errors help to determine when HTML tags and their attributes are not compatible with certain
web browsers or HTML specifications. Problems here do not mean that this page is
necessarily inaccessible. Browser compatibility errors do not affect the accessibility rating of
a page.
1.
Unknown attribute NAME in element IMG. for browser(s): HTML4.0 (3 instances)
Line
129:
<td
colspan="2"
align="center"><a
Suggestions"
WIDTH="96"
Line
133:
<td
align="right"><a
WIDTH="47" HEIGHT="14"></a></td>
2.
Required attribute ALT is missing from tag IMG for browser(s): HTML4.0 (10 instances)
align="right"><img
WIDTH="310"
HEIGHT="80"><img
WIDTH="98"
HEIGHT="80"><img
WIDTH="50"
HEIGHT="80"></td>
width="500"
height="8"></td>
border="0"
WIDTH="89"
HEIGHT="80"></td>
HEIGHT="27"></td>
HEIGHT="24"></td>
HEIGHT="27"></td>
HEIGHT="27"></td>
HEIGHT="27"></td>
height="10"></td>
- 29 -
3.
Unknown attribute BACKGROUND in element TD. for browser(s): HTML4.0 (1 instance)
align="right"><img
WIDTH="310"
HEIGHT="80"><img
WIDTH="98"
HEIGHT="80"><img
WIDTH="50" HEIGHT="80"></td>
4.
Unknown attribute BORDERCOLOR in element TD. for browser(s): HTML4.0 (2 instances)
Line 29: <td width="100" bgcolor="#FFCC99" bordercolor="#FFFF00" align="right"><font
color="#000080"><em>Bienvenue
à
la
SNCB</em></font></td>
Line 34: <td align="right" width="100" bgcolor="#FFCC99" bordercolor="#FFFF00"><font
color="#000080" size="1"><em>Le Website officiel</em></font></td>
Download Time
The following three-column table gives download time statistics for the images, applets, and
objects on this page. The first column contains the URL of each item, the second column the
item size in kilobytes, and the third column the approximate download time for each item
when using a 28,800 baud modem. At the end of the report, an arbitrary delay of 0.5 seconds
is added for each file to account for slow-downs caused by HTTP connection times.
URL
Size
http://www.b-rail.be/F/index.html
9.37 K
2.60
http://www.b-rail.be/F/images/h_maison.gif
1.84 K
0.51
http://www.b-rail.be/images/logo.gif
1.68 K
0.47
http://www.b-rail.be/images/ban_home.gif
3.11 K
0.86
---
---
http://www.b-rail.be/images/nl.gif
1.06 K
0.29
http://www.b-rail.be/images/de.gif
1.03 K
0.29
http://www.b-rail.be/images/en.gif
1.03 K
0.29
http://www.b-rail.be/F/images/links/news0.gif
3.64 K
1.01
http://www.b-rail.be/images/banners/ban1_f.gif
15.28 K
4.25
http://www.b-rail.be/F/images/links/mail.gif
1.39 K
0.39
http://www.b-rail.be/F/images/links/links.gif
2.33 K
0.65
http://www.b-rail.be/images/b.gif
1.07 K
0.30
38.20 K
10.61
1.10 K
0.31
http://www.b-rail.be/cgi-script/logip.cgi
http://www.b-rail.be/F/images/telesales.gif
http://www.b-rail.be/images/b-cargo.gif
- 30 -
Time (secs)
http://www.b-rail.be/images/telecom_s.gif
1.62 K
0.45
http://www.b-rail.be/F/images/links/butt_feedb.gif
0.23 K
0.06
http://www.b-rail.be/N/images/links/butt_sear.gif
0.15 K
0.04
http://www.b-rail.be/N/images/links/butt_news.gif
0.14 K
0.04
http://www.b-rail.be/images/white.gif
0.11 K
0.03
84.38 K
23.44
HTTP Request Delays
--
10.00
Total + Delays
--
33.44
Total
Bobby finished.
URL: http://193.121.180.8/scripts/AARI.exe?LANGUE=0&CODE=0, April 5, 2000 5:14:51
AM
EDT
Bobby Core v3.1.1 build 7, Guidelines Version: W3C WAI GL 99/05/05 (cvs), Bobby Server
v3.1.1
build
7
Browser Compatibility: HTML4.0, AccEval
Priority 1 Accessibility
This page does not yet meet the requirements for Bobby Approved status. Below is a list of 1
accessibility problems that should be fixed in order to make this page accessible to people
with disabilities.
1.
Provide
alternative
text
for
all
images.
(13
instances)
Lines 49-51: <TD background="../images/F/rose.jpg" bgColor=#ceb3b3><IMG border=0 height=80
src="../images/F/squa_b2.gif"
width=100></TD>
Lines 57-59: bgColor=#ceb3b3 width="100%%"><IMG height=80 src="../images/F/title_f.gif"
width=350><IMG
height=80
Lines 59-61: src="../images/F/title_f.gif" width=350><IMG height=80 src="../images/F/logo.gif"
width=98><IMG
height=80
Lines 61-63: src="../images/F/logo.gif" width=98><IMG height=80 src="../images/F/ban_home.gif"
width=50></TD></TR>
Lines 77-79: <TD bgColor=#000080 width="100%%"><IMG height=14 src="../images/F/blue_bar.gif"
width=500></TD></TR>
Lines 103-105: <TD><IMG
height=5
src="../images/F/back.gif"
width=5></TD></TR>
height=5
width=5></TD></TR>
Lines 133-137: <TD><IMG height=5 src="../images/F\back(1).gif" width=5></TD></TR>
Lines 149-151: <TD><IMG height=5 src="../images/F/back.gif" width=5></TD></TR>
- 31 -
Lines 155-157: <TD><IMG border=0 height=15 src="../images/F/pers.gif" width=95></TD></TR>
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
P1 - Manual check
There are some checkpoints that an automatic program like Bobby cannot examine. These 5
item(s) are presented below. You will need to be able to respond affirmatively to these items
as well to obtain Bobby Approved status.
1.
Ensure that descriptions of dynamic content are updated with changes in content.
2.
alternative
text,
add
a
LONGDESC
attribute.
(25
instances)
width=100></TD>
width=350><IMG
height=80
width=98><IMG
height=80
Lines 95-99: <TD><A href="http://www.b-rail.be/F/index.html"><IMG alt="Retour vers la page
principale"
border=0
height=15
src="../images/F/home.gif"
width=95></A></TD></TR>
height=5
width=5></TD></TR>
Lines 111-115: href="http://www.b-rail.be/search/searchF.html"><IMG alt="Rechercher par mots-clés"
border=0
height=15
src="../images/F/searc.gif"
height=5
width=5></TD></TR>
Lines 125-129: <TD><A href="http://www.bcargo.com/F/index.html"><IMG alt="Transport de
marchandises" border=0 height=15 src="../images/F/bcargo.gif" width=95></A></TD></TR>
Lines 141-145: <TD><A href="http://www.telecomrail.com/index.html"><IMG alt=B-Telecom
border=0
height=15
src="../images/F/telecom.gif"
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
Lines 167-171: <TD><A href="http://www.b-rail.be/rnvn/F/index.html"><IMG alt="Trafic voyageurs
intérieur"
border=0
height=15
src="../images/F/binn.gif"
height=5
width=5></TD></TR>
Lines 181-185: <TD><A href="http://www.b-rail.be/F/internat/index.html"><IMG alt="Trafic
voyageurs international" border=0 height=15 src="../images/F/int.gif" width=95></A></TD></TR>
height=5
width=5></TD></TR>
Line 197: <IMG alt=ARIdisc border=0 height=15 src="../images/F/ari.gif" width=95>
Line 209: <IMG alt="Horaires" border=0 height=15 src="../images/F/dienstreg.gif" width=95></a>
Line 221: <IMG alt="Affiches jaunes Gares" border=0 height=15 src="../images/F/geel.gif"
width=95></a>
Line
231:
<IMG
alt="ARIdisc
informations
abonnement"
border=0
height=15
src="../images/F/aboinfo.gif"
width=95></a>
Lines 1001-1007: <TD><A href="http://www.b-rail.be/F/misc/feedback.html"><IMG alt="Questions
et Suggestions" border=0 height=14 name=butt_feedb src="../images/F/butt_feedb.gif" vspace=1
Lines 1013-1019: href="http://www.b-rail.be/search/searchF.html"><IMG alt="Rechercher par mots-
- 32 -
clés"
border=0
height=14
name=butt_search
src="../images/butt_search.gif"
width=96></A></TD></TR></TBODY></TABLE></TD>
vspace=1
3.
If you can't figure out any other way to make a page accessible, construct an alternate version of the
page which is accessible and has the same content.
4.
If this table contains data in rows and columns (i.e. a spreadsheet), have you identified headers for the
table
rows
and
columns?
(6
instances)
Line
43:
<TABLE
border=0
cellSpacing=0
width="100%%">
Line
89:
<TABLE
border=0
cellPadding=0
cellSpacing=0
width="100%">
Line
247:
<table
border="0"
cellspacing="0"
cellpadding="0"
width="100%">
Line
277:
<table
border="0"
width="100%"
cellspacing="0">
Line
288:
<table
border="0"
width="100%"
cellspacing="0">
Line 995: <TABLE border=0 cellPadding=0 cellSpacing=0>
5.
alternative
text,
add
descriptive
(D)
links.
(25
instances)
width=100></TD>
width=350><IMG
height=80
width=98><IMG
height=80
Lines 95-99: <TD><A href="http://www.b-rail.be/F/index.html"><IMG alt="Retour vers la page
principale"
border=0
height=15
src="../images/F/home.gif"
height=5
width=5></TD></TR>
Lines 111-115: href="http://www.b-rail.be/search/searchF.html"><IMG alt="Rechercher par mots-clés"
border=0
height=15
src="../images/F/searc.gif"
height=5
width=5></TD></TR>
Lines 125-129: <TD><A href="http://www.bcargo.com/F/index.html"><IMG alt="Transport de
marchandises" border=0 height=15 src="../images/F/bcargo.gif" width=95></A></TD></TR>
Lines 141-145: <TD><A href="http://www.telecomrail.com/index.html"><IMG alt=B-Telecom
border=0
height=15
src="../images/F/telecom.gif"
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
Lines 167-171: <TD><A href="http://www.b-rail.be/rnvn/F/index.html"><IMG alt="Trafic voyageurs
intérieur"
border=0
height=15
src="../images/F/binn.gif"
height=5
width=5></TD></TR>
Lines 181-185: <TD><A href="http://www.b-rail.be/F/internat/index.html"><IMG alt="Trafic
voyageurs international" border=0 height=15 src="../images/F/int.gif" width=95></A></TD></TR>
height=5
width=5></TD></TR>
Line 197: <IMG alt=ARIdisc border=0 height=15 src="../images/F/ari.gif" width=95>
Line 209: <IMG alt="Horaires" border=0 height=15 src="../images/F/dienstreg.gif" width=95></a>
Line 221: <IMG alt="Affiches jaunes Gares" border=0 height=15 src="../images/F/geel.gif"
width=95></a>
Line
231:
<IMG
alt="ARIdisc
informations
abonnement"
border=0
height=15
src="../images/F/aboinfo.gif"
width=95></a>
Lines 1013-1019: href="http://www.b-rail.be/search/searchF.html"><IMG alt="Rechercher par motsclés"
border=0
height=14
name=butt_search
vspace=1
- 33 -
This page does not yet meet the requirements for Bobby Approved status.
Browser Compatibility Errors
The following section contains a list of 5 browser compatibility errors. Browser compatibility
errors help to determine when HTML tags and their attributes are not compatible with certain
web browsers or HTML specifications. Problems here do not mean that this page is
necessarily inaccessible. Browser compatibility errors do not affect the accessibility rating of
a page.
1.
Unknown attribute NAME in element IMG. for browser(s): HTML4.0 (2 instances)
Lines 1013-1019: href="http://www.b-rail.be/search/searchF.html"><IMG alt="Rechercher par motsclés"
border=0
height=14
name=butt_search
vspace=1
2.
Required attribute ALT is missing from tag IMG for browser(s): HTML4.0 (13 instances)
width=100></TD>
width=350><IMG
height=80
width=98><IMG
height=80
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
height=5
width=5></TD></TR>
3.
Unknown attribute BACKGROUND in element TD. for browser(s): HTML4.0 (2 instances)
Line
49:
<TD
background="../images/F/rose.jpg"
bgColor=#ceb3b3><IMG
Lines
55-57:
<TD
align=right
background="../images/rose.jpg"
bgColor=#ceb3b3
width="100%%"><IMG height=80
4.
Unknown attribute FONT in element FONT.
Line
358:
<font
Line 518: <font face="Arial" font="black">
- 34 -
for
browser(s): HTML4.0
face="Arial"
(2 instances)
font="black">
5.
Unknown attribute COLOR in element
Line
987:
<HR
Line 1055: <HR color=#0000ff SIZE=1>
HR.
for
browser(s): HTML4.0
color=#0000ff
(2
instances)
SIZE=1>
Download Time
The following three-column table gives download time statistics for the images, applets, and
objects on this page. The first column contains the URL of each item, the second column the
item size in kilobytes, and the third column the approximate download time for each item
when using a 28,800 baud modem. At the end of the report, an arbitrary delay of 0.5 seconds
is added for each file to account for slow-downs caused by HTTP connection times.
URL
Size
Time (secs)
http://193.121.180.8/scripts/AARI.exe?LANGUE=0&CODE=0 20.08 K
5.58
http://193.121.180.8/images/F/squa_b2.gif
1.27 K
0.35
http://193.121.180.8/images/F/title_f.gif
2.58 K
0.72
http://193.121.180.8/images/F/logo.gif
1.68 K
0.47
http://193.121.180.8/images/F/ban_home.gif
3.11 K
0.86
http://193.121.180.8/images/F/blue_bar.gif
0.93 K
0.26
http://193.121.180.8/images/F/home.gif
0.17 K
0.05
http://193.121.180.8/images/F/back.gif
0.09 K
0.02
http://193.121.180.8/images/F/searc.gif
0.18 K
0.05
http://193.121.180.8/images/F/bcargo.gif
0.19 K
0.05
http://193.121.180.8/images/F\back(1).gif
0.09 K
0.02
http://193.121.180.8/images/F/telecom.gif
0.20 K
0.06
http://193.121.180.8/images/F/pers.gif
0.23 K
0.06
http://193.121.180.8/images/F/binn.gif
0.18 K
0.05
http://193.121.180.8/images/F/int.gif
0.20 K
0.06
http://193.121.180.8/images/F/ari.gif
0.16 K
0.04
http://193.121.180.8/images/F/dienstreg.gif
0.19 K
0.05
http://193.121.180.8/images/F/geel.gif
0.24 K
0.07
http://193.121.180.8/images/F/aboinfo.gif
0.22 K
0.06
- 35 -
http://193.121.180.8/images/F/butt_feedb.gif
0.23 K
0.06
http://193.121.180.8/images/butt_search.gif
0.17 K
0.05
32.40 K
9.00
HTTP Request Delays
--
10.50
Total + Delays
--
19.50
Total
- 36 -

Exemple d`analyse n°3: le site www.sncb.be

Transcription

Documents pareils

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

Le module EPG de Progdvb

GIF AUTO - RETRO AMERICAN DAY III www.gifamericanday.fr

DUT SRC - Webchronique

CV résumé Acteur

Battlefield 2142 : Northern Strike

ergonomic ergonomique

ReeSeal 25-32 Semiautomatic Tray Sealer Machine Machine

Comment insrer une image dans le forum