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é
Quand on parle de l'accessibilité d'une page Web, qu'est-ce que cela
signifie?
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.
2 - Vérifier l'accessibilité d'une page
J'aimerais savoir si mes pages Web sont accessibles pour tous. Quels
sont les outils à utiliser?
La vérification de l'accessibilité se fait avec le menu Outils -
Rapports d'accessibilité (ou Outils - Accessibilité). Pour plus de
détails, voir:
https://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, souvent comme des extensions d'un navigateur:
https://www.uottawa.ca/uoweb/fr/guide-usager/outils-verification-accessibilite
3 - Taille de police
Par défaut, la police de mes pages 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"?
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.
4 - Points importants dans l'accessibilité
Est-ce qu'une page Web accessible pour tous est vraiment différente des
autres pages Web?
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.
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:
https://www.la-grange.net/accessibilite/
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
Et un Centre de développement MSDN sur l'accessibilité, offrant aux
développeurs des conseils et des outils favorisant l'accessibilité
numérique:
https://msdn.microsoft.com/fr-fr/dd759316.aspx
5 - Adresses de référence
Où puis-je obtenir plus d'informations sur les règles d'accessibilité?
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é:
https://www.la-grange.net/accessibilite/
Une liste de points à vérifier pour l'accessibilité (en
anglais):
https://www.w3.org/TR/WCAG10/full-checklist.html
6 - Touches du clavier
Quelle
est la technique permettant d'ouvrir un lien avec les touches du
clavier?
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:
https://www.openweb.eu.org/articles/accesskey_essai_non_transforme/
7 - Définir un doctype
Plusieurs tests de validation exigent que le doctype soit indiqué dans
les pages Web. Qu'est-ce que cela signifie?
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. Le doctype le plus simple est celui du HTML5:
<!DOCTYPE html>
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.
Pour changer le doctype au niveau du code, effacez celui en place, puis
utilisez les touches du clavier
Ctrl+Entrée et, dans le volet Extrait, sélectionnez celui voulu.
L'absence de cette commande 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:
https://koor.fr/DevWeb/HTML/doctype.wp
https://www.w3schools.com/tags/ref_html_dtd.asp