FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Accessibilité

Sauter la navigation

 

 
 1 - Définition de l'accessibilité
 2 - Vérifier l'accessibilité d'une page
 3 - Taille de police
 4 - Points importants dans l'accessibilité
 5 - Adresses de référence
 6 - Touches du clavier
 7 - Définir un doctype
 

Remarque: les règles d'accessibilité sont les mêmes pour tous les logiciels créant des pages Web. Le logiciel Microsoft Expression Web et celui SharePoint Designer contiennent de nombreux outils pour appliquer et vérifier l'accessibilité.

 

1 - Définition de l'accessibilité

Question 1 Quand on parle de l'accessibilité d'une page Web, qu'est-ce que cela signifie?

Réponse 1 Une des grandes caractéristiques d'Internet est l'universalité. Peu importe le système informatique utilisé, les pages Web devraient être accessibles pour tous. Mais plusieurs utilisateurs d'Internet ont des problèmes de vision ou de manipulation de la souris. Certains utilisent alors des navigateurs spécialisés pour faire la synthèse vocale des pages Web ou pour transformer le texte en braille. D'autres préfèrent accentuer le contraste des couleurs ou n'utilisent que le clavier.

Une page Web accessible est une page lisible dans toutes les conditions, pour tous les équipements. Les images et les tableaux y sont identifiés textuellement, tandis que tous les liens sont quand même fonctionnels.

Les règles d'accessibilité sont basées sur des normes standards, afin de rejoindre le plus de gens possible et de répondre aux exigences à venir pour les sites Web. Le fait de respecter entièrement ces normes profite aussi à ceux qui utilisent des terminaux mobiles et à ceux qui n'ont pas accès à une large bande passante.

Retour au début

2 - Vérifier l'accessibilité d'une page

Question 2 J'aimerais savoir si mes pages Web sont accessibles pour tous. Quels sont les outils à utiliser?

Réponse 2 La vérification de l'accessibilité se fait avec le menu Outils - Rapports d'accessibilité (ou Outils - Accessibilité). Pour plus de détails, voir:
http://msdn.microsoft.com/fr-fr/library/cc295280%28v=Expression.10%29.aspx

http://louise.mvps.org/accessibilite/outils1.htm
http://louise.mvps.org/accessibilite/outils2.htm

Plusieurs validateurs sont aussi disponibles dans Internet, comme:
http://www.ocawa.com/faireaudit.htm?lang=fr
http://validator.w3.org/

Retour au début

3 - Taille de police

Question 3 Par défaut, la police est de taille 3. Cette police étant trop grande, j'utilise le taille 2.  Par malheur, lorsque je passe le vérificateur d'accessibilité (F8), il me retourne un avertissement "cette ligne contient un élément non autorisé" et me surligne la balise <font...>. Donc, y a-t-il possibilité de mettre la taille 2 en valeur par défaut pour toutes les pages et que je ne retrouve plus "font"?

Réponse 3 Pour éviter que la commande "font" se répète continuellement, vous pouvez utiliser des feuilles de style. Avec une feuille de style en cascade externe, la commande se trouve placée dans une page avec l'extension .css qui est ensuite liée à votre page Web. Pour plus d'informations, voyez les rubriques Polices et Styles CSS.

Retour au début

4 - Points importants dans l'accessibilité

Question 4 Est-ce qu'une page Web accessible pour tous est vraiment différente des autres pages Web?

Réponse 4 Pas du tout, le même site peut être offert à tous. La méthode fondamentale est de séparer le fond de la forme. C'est pourquoi TOUS les paramètres de présentation: couleur, taille, italique, largeur/couleur des cellules/tableau, etc... doivent se trouver dans une feuille de style externe CSS. (On ne doit plus passer par le changement de couleur et de police en direct, car les instructions correspondantes "bgcolor" et "font" sont déclarées obsolètes par FrontPage lui-même lors de la vérification de l'accessibilité.)

La seconde contrainte la plus importante, c'est qu'aucune dimension ne doit être fixée en absolu (donc la taille des polices et des cellules se trouve en pourcentage) afin que le lecteur puisse faire varier la taille des polices sans fracasser l'interface. Pour plus d'infos: http://edu.ca.edu/article70.html

De plus, tous les éléments visuels (images, graphiques...) doivent être décrits textuellement avec les attributs alt ou longdesc.

Pour compléter, voici les principales règles:
http://www.la-grange.net/accessibilite/
http://www.accessibiliteweb.org/bdc/directives

Puis les critères utilisés par AccessiWeb pour évaluer l'accessibilité d'un site: 
http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale.html

Un Centre de développement MSDN sur l'accessibilité, offrant aux développeurs des conseils et des outils favorisant l'accessibilité numérique:
http://msdn.microsoft.com/fr-fr/dd759316.aspx

Retour au début

5 - Adresses de référence

Question 5 Où puis-je obtenir plus d'informations sur les règles d'accessibilité?

Réponse 5 En plus des adresses dans la question précédente, voici des astuces classées par principe de conception, par handicaps, par types de navigateurs... pour plonger dans l'accessibilité:
http://www.la-grange.net/accessibilite/

Une liste de points à vérifier pour l'accessibilité (en anglais):
http://www.w3.org/TR/WCAG10/full-checklist.html

Retour au début

6 - Touches du clavier

Question 6 Quelle est la technique permettant d'ouvrir un lien avec les touches du clavier?

Réponse 6 Dans plusieurs navigateurs, la touche du claver Tab permet de naviguer d'un lien à l'autre, tandis que la touche Entrée ouvre le lien sélectionné.

Toutefois, une instruction "accesskey" permet d'utiliser les touches du clavier plutôt que de cliquer sur un certain lien. Il faut l'ajouter manuellement dans le code Html du lien, comme ceci:
<a href="page2.htm" accesskey="0">

Ensuite, pour atteindre le lien, l'utilisation des touches diffère selon le navigateur:
- avec Internet Explorer, il faudrait faire Alt+0 pour sélectionner le lien, puis appuyer sur Entrée pour l'ouvrir;
- avec Mozilla Firefox, il suffirait de faire Alt+0 pour atteindre le lien et l'ouvrir.

De plus, aucun standard ne définit le choix des lettres ou des chiffres servant aux raccourcis. En voici quelques exemples:
http://www.openweb.eu.org/articles/ accesskey_essai_non_transforme/

Retour au début

7 - Définir un doctype

Question 7   Plusieurs tests de validation exigent que le doctype soit indiqué dans les pages Web. Qu'est-ce que cela signifie?

Réponse 7 La balise DOCTYPE indique aux navigateurs quelle version du html a été utilisée pour coder la page. Elle se met au tout début de la page avant la balise <html>. Elle s'inscrit en majuscule, comme ceci:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Avec Expression Web et SharePoint Designer, le doctype est automatiquement inscrit au début des nouvelles pages. Sa version est définie au menu Outils - Options de l'éditeur de pages - onglet Opérations d'auteur. Dans la section Déclaration de type document, choisissez de préférence celle plus récente (en ce moment: XHTML 1.0 Strict). Pour changer le doctype au niveau du code, effacez celui en place, puis utilisez les touches du clavier Ctrl+Entrée et sélectionnez celui voulu.  

FrontPage n'inscrit pas cette commande automatiquement et, pourtant, son absence est souvent la première source de différences d'affichage d'un navigateur à un autre. Quand elle est en place, la plupart des navigateurs se conforment alors aux normes et affichent les pages sensiblement de la même façon. Dans ce cas, beaucoup d'arguments dans les balises deviennent interdits (ceux de présentation comme align="center", ainsi que "frame" et "target"). Pratiquement toute la mise en page est alors réalisée avec les feuilles de style.

Un peu plus d'explications sur la question ici:
http://msdn.microsoft.com/fr-fr/library/cc295208%28v=Expression.10%29.aspx
http://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html

De plus, dans FrontPage, le doctype pourrait s'inscrire dans le modèle servant aux nouvelles pages:
http://www.spiderwebwoman.com/tutorials/doctypesolution.asp (en anglais)

Retour au début