Vosges Accueil Tourisme
Accessibilité et aide navigation
Sommaire de la page
Préambule
Les informations données à propos des différents navigateurs Web sont valables dans leur dernière version stable à la date d'écriture de cette page : mars 2008
Définition de l'accessibilité :
"Mettre le web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales."
Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web en 1990.
La politique de développement et d'accessibilité de Vosges Accueil Tourisme est fondée sur les recommandations du W3C -
et d'AccessiWeb - 
Vosges Accueil Tourisme a pour objectif de s'adresser à tous les visiteurs, sans exclusion arbitraire, et quelque soit l'outil de consultation utilisé :
- Navigateurs graphiques et textes
- Pour tous les systèmes d'exploitation (Windows, Linux, Mac, Unix...)
- Dans toutes leurs versions : anciennes, actuelles et futures
- Assistants de navigation (lecteurs brailles et vocaux,...)
- Navigateurs mobiles (PDA, Pocket PC, téléphone mobile...)
- ...
- Tous les futurs outils de consultation
"Quiconque appose sur une page du web un logo du type : 'Cette page est optimisée pour le navigateur X' est quelqu'un qui semble souhaiter revenir à l'époque préhistorique d'avant le web, lorsque l'on avait très peu de chances de pouvoir lire un document écrit sur un autre ordinateur, un autre traitement de texte, ou un autre réseau."
Tim Berners-Lee dans Technology Review, Juillet 1996
[ - - ]
Respect des normes W3C
- Le code XHTML est conforme à la Spécification XHTML 1.0 Strict. Il est testé à l'aide du validateur HTML du W3C. Un lien présent en bas du menu principal sur chaque page permet de vérifier la validité du code.
- Le code CSS est conforme à la Spécification CSS2. Il est testé à l'aide du validateur CSS du W3C. Un lien présent en bas du menu principal sur chaque page permet de vérifier la validité du code.
[ - - ]
Contenu et présentation
Le contenu, structuré par le code XHTML, est séparé de la mise en forme structurée par le code CSS. Toute page peut ainsi être consultée par n'importe quel outil.
Sans CSS, le contenu suit un ordre logique : Titre, Contenu, Menu, avec entre chaque zone, un menu d'accès rapide aux différentes zones.
Les balises XHTML sont utilisées à bon escient :
- Titres : balises
<h1> à <h6> dans l'ordre
- Paragraphe :
<p>
- Liste d'items :
<ul>, <ol>, <dl>
- Citations :
<cite> et <blockquote> (et non pas pour un retrait de paragraphe)
- ...
[ - - ]
Feuilles de Styles
Grace aux feuilles de Styles, le site peut être consulté par les navigateurs graphiques sous plusieurs formes :
- Fond clair et police contrastées (en standard)
- Fond contrasté et polices claires
- Sans mise en forme, ni couleur (sans style)
Les feuilles de styles permettent également une impression de l'essentiel de la page, c'est-à-dire son contenu sans les différents menus.
Un utilisateur avec un navigateur graphique sans JavaScript supporté ou activé, pourra uniquement changer le style du site si son navigateur répond correctement aux normes W3C en supportant les feuilles de styles alternatives de façon persistante. A ce jour :
- Support complet : Mozilla Firefox 2 avec l'extension "StyleSheet Chooser Plus" -

- Support partiel (CSS non persistante) : Mozilla Firefox 1.5, Mozilla, Netscape, Opéra
- Aucun support : Microsoft Internet Explorer
[ - - ]
Navigation clavier – Touches d'accès rapide
Liste des raccourcis clavier
Liste recommandée par Accessiweb -
(Ces touches sont aussi appelées "accesskeys") :
- 0 = Cette liste (Avec Internet Explorer, mode "Sans style" uniquement)
- 1 = Accueil
- 3 = Plan du site
- 5 = Glossaire
- 6 = Politique d'accessibilité et d'aide
- 7 = Contact
- 8 = Copyright
Aucune lettre n'est utilisée en raccourcis clavier pour éviter tout risque de conflit avec des raccourcis déjà utilisés par les navigateurs.
Exemples d'utilisations
- Firefox, Mozilla, Netscape (Windows) : Uniquement les chiffres en haut du clavier (avec caractères spéciaux) : touches Alt + Maj + accesskeys
- Microsoft Internet Explorer 6 et 7 (Windows) : Uniquement les chiffres en haut du clavier (avec caractères spéciaux) : touches Alt + Maj + accesskeys, puis appuyez sur la touche Entrée
- Opéra (Windows) : Dans l'ordre touches Maj + Echap + accesskeys sur pavé numérique
- K-méleon (Windows) : touches Alt + accesskeys sur pavé numérique
- Amaya (Windows) : Alt + accesskeys ou Maj + accesskeys (configuration dans les options)
[ - - ]
Redimensionnement/Tailles des caractères
La mise en page et la taille du texte utilisent prioritairement des unités relatives (em et pourcentages) pour permettre d'agrandir la présentation des pages.
Exemples d'utilisations
- Firefox (Windows) :
- Agrandir : Ctrl + + sur pavé numérique
- Réduire : Ctrl + - sur pavé numérique
- Taille d'origine : Ctrl + 0 sur pavé numérique
- Menu " ", puis " ", puis votre choix
- Mozilla (Windows) : Uniquement les chiffres en haut du clavier
- Agrandir : Ctrl + + sur pavé numérique
- Réduire : Ctrl + - sur pavé numérique
- Taille d'origine : Ctrl + 0 en haut du clavier (avec caractères spéciaux)
- Menu " ", puis " ", puis votre choix
- Netscape (Windows) : Uniquement les chiffres en haut du clavier
- Agrandir : Ctrl + + sur pavé numérique
- Réduire : Ctrl + - sur pavé numérique
- Taille d'origine : Ctrl + 0 en haut du clavier (avec caractères spéciaux)
- Menu " ", puis " ", puis votre choix
- Microsoft Internet Explorer 6 et 7 (Windows) : Menu " ", puis " ", puis votre choix
- Microsoft Internet Explorer 7 (Windows) : Les combinaisons des Ctrl + +, Ctrl + - ou l'utilisation du zoom en bas à droite du navigateur ne respecte pas le réglage proportionnel des feuilles de styles.
- Opéra (Windows) :
- Agrandir : + sur pavé numérique
- Réduire : - sur pavé numérique
- Taille d'origine : * sur pavé numérique
- Menu " ", puis " ", puis votre choix
- K-méleon (Windows)
- Agrandir : Ctrl + + sur pavé numérique
- Réduire : Ctrl + - sur pavé numérique
[ - - ]
Navigation et liens
- Les menus sont affichés sur chaque page du site. Ils représentent la structure du site.
- Les liens des menus sont regroupés par catégorie, et ne dépassent pas le nombre de 9 par catégorie.
- Le texte de chaque lien est significatif (aucun lien du type "Cliquez-ici"), et l'attribut "title" (titre) donne plus d'explication quand cela est nécessaire
- Le plan du site est disponible sur chaque page du site.
- Tous les liens, hors menus, sont soulignés, et la couleur des liens non visités est différente de celle des liens visités.
- Les liens vers des pages extérieures au site de Vosges Accueil tourisme sont marqués par le signe

- En dehors des menus, La langue du site Web ou de la page Web de destination est renseignée dans l'attribut "hreflang"
- Chaque lien vers un autre site Web est ouvert dans la même fenêtre du navigateur, afin de ne pas casser la navigation de l'utilisateur. Si ce dernier souhaite garder la page en cours, il pourra cliquer sur l'image
. Cette action ouvrira soit une nouvelle fenêtre de navigation, soit un nouvel onglet selon le navigateur utilisé, à condition que JavaScript soit pris en charge et ne soit pas désactivé (l'attribut "target" n'est plus valide en XHTML1 strict )
[ - - ]
Images/Photos
- Toutes les images ou photos utiles possèdent un équivalent textuel grâce à l'attribut "alt" qui est renseigné.
- Aucune image invisible n'est utilisée pour la mise en page
- Pour permettre un affichage plus aisé et plus grand des photos, l'agrandissement des photos s'établit dans une fenêtre de type "Pop-up" à condition que JavaScript soit activé. Si l'utilisateur utilise un navigateur qui ne supporte pas ce langage ou si l'utilisateur a volontairement désactivé ce langage, la photo s'affichera dans la fenêtre courante malgré tout.
- Les vignettes des photos à agrandir sont des photos réellement de petites tailles et non pas une simple réduction des photos réelles avec les attributs "width" (largeur) et "height" (hauteur)
- La taille des photos est dans tous les cas de taille raisonnable tout en gardant une bonne qualité pour permettre à tous les utilisateurs de les afficher, y compris ceux utilisant une connexion bas-débits RTC ou RNIS.
[ - - ]
Tableaux
- Les tableaux de ce site Web sont utilisés uniquement pour ce dont ils sont prévus, c'est-à-dire la présentation de données et en aucun cas pour la mise en forme des pages.
- Chaque tableau contient un résumé avec l'attribut summary de l'élément
<table>
- Chaque tableau possède un titre avec l'élément
<caption>
- Les entête de colonnes sont identifiées avec les éléments
<thead> et <th>
- Les données du tableau sont mises en relation avec leur entête de colonne grâce à l'attribut "id" de l'élément
<th> et l'attribut "headers" de l'élément <td>
[ - - ]
Langues
- La langue principale du site Web Vosges Accueil Tourisme est en français. Il est possible de changer de langue sur chaque page du site.
- La langue de chaque page est identifiée par les attributs "xml:lang" et "lang" dans la balise
<html>
Scripts
Aucun script à la consultation de ce site Web n'est indispensable.
[ - - ]
Redirections
Les redirections de page sont réalisées au niveau du serveur et non pas avec les balises Meta du langage XHTML
Les éléments des formulaires sont identifiés avec l'élément <label>
[ - - ]
Abréviations, Acronymes, Sigles
Définitions :
- Abréviation :
- Retranchement de lettres dans un mot, de mots dans une phrase. Exemple : HTML
- Acronyme :
- Abréviation ou sigle prononcé comme un mot ordinaire. Exemple : FAQ ou Wysiwyg
- Sigle :
- Ensemble de lettres initiales servant d'abréviation. Exemple : ADSL
Utilisation sur le site
- Les abréviations et sigles sont marqués par l'élément
<abbr>, même ci celui-ci n'est toujours pas supporté par Microsoft Internet Explorer 6.
- Les acronymes sont marqués par l'élément
<acronym>, même si celui-ci devrait disparaitre dans la prochaine version XHTML2.
- Pour chacun de ces 2 éléments, l'attribut
title indique leur signification (info-bulle au passage de la souris) et les attributs lang et xml:lang indiquent la langue si celle-ci est différente du français.
- Les navigateurs graphiques qui supportent ces éléments et les feuilles de styles version 2, les signaleront par un soulignement de pointillés rouge.
Toutes les significations des abréviations, acronymes et sigles utilisés sur ce site sont regroupées et classées alphabétiquement dans le glossaire du site.
[ - - ]