Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL

Hébergement Webou.net => Tutoriels => Discussion démarrée; par: K@cem le 18 Juin 2007, 17:33:17



Titre: Le point sur l'accessibilité
Posté par: K@cem le 18 Juin 2007, 17:33:17
L'accessibilité du Web, c'est, selon Tim Berners-Lee, directeur du W3C :
                           
« 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. »

Comme l'a dit Tim Berners-Lee, un site web accessible c'est un site qui peut être consulté par tous, et spécialement pour ces personnes :

  • Ceux ne sont pas capables de voir, entendre, bouger ou qui ne peuvent pas accéder à l'information de manière classique;
  • Ceux qui ont des difficultés pour lire ou comprendre un texte (on parlait tout à l'heure des dyslexiques par exemple);
  • Ceux qui ne peuvent pas utiliser de clavier ou de souris;
  • Ceux qui utilisent un lecteur d'écran, un petit écran à faible résolution ou une connexion Internet lente;
  • Ceux qui ne parlent pas la langue dans laquelle le document est écrit;
  • Ceux qui sont dans des situations où leurs yeux, leurs oreilles ou leurs mains sont occupés (par exemple en conduisant ou en travaillant sur des chantiers bruyants);
  • Ceux qui ont un navigateur différent du votre, un navigateur audio par exemple ou un système d'exploitation différent.

Pour rendre votre site accessible vous devez avant tout respecter certaines règles comme :

  • fournir une alternative textuelle aux images et à tout medium non textuel ;
  • structurer logiquement le document (balises de titres, utilisation des balises meta dans l'en-tête, indications spécifiques en amont des listes, ...) ;
  • fournir des intitulés de liens pertinents et faisant sens quand ils sont lus hors contexte ;
  • séparer la présentation du contenu et éviter le détournement des balises structurantes pour des effets de présentation;
  • réaliser un site web utilisable sans images ni style CSS ni JavaScript.

Et justement, nous allons voir ici comment rendre votre site accessible  ;D

Les "Accesskey" :

Les Accesskey sont tout simplement des raccourcis clavier, grâce à eux vous pouvez par exemple vous déplacer d'une page à autre facilement ...
Supposant par exemple que vous ayez un menu dans toutes vos pages où il y a les liens "Accueil" + "Forum" ...

Pour mettre en places les Accesskey, il suffit de mettre l'attribut accesskey à une balise a, input, textaera, label, button ou encore dans legend (pour les fieldset) ...
Exemple :

Code:
<!-- Pour des liens : -->
<a href="index.htm" accesskey="1">Accueil</a>
<a href="forum.htm" accesskey="2">Accueil</a>

<!-- Pour des formulaires : -->
<form action="#" method="post">
<p>Pseudo : <input name="texte" type="text" accesskey="3" /><br />

Message : <br /><textarea name="textarea" cols="21" rows="5" accesskey="4"></textarea>
</p>

<fieldset>
<legend accesskey="5">formulaire</legend>

<label accesskey="6" for="email">Email :</label> <input name="email" id="email" type="text" />

</fieldset>
<p><input name="button" type="button" accesskey="G" value="envoyer"></p>
</form>

Voici les chiffres qui sont généralement utilisés pour les Accesskey:

1 - Page d'accueil
2 - Page de news
3 - Plan du site
4 - Formulaire de recherche
5 - FAQ
6 - Page d'aide pour la navigation
7 - Contact
8 - Copyright
9 - Livre d'or
0 - Liste des touches des Accesskey

Attention : Il faut bien choisir vos raccourcis, parce que par exemple les touches "F", "E", "A", "V", "O", "?" , servent à la barre de menu (fichiers, édition...), les Accesskey prendront le dessus, et ça empêchera les utilisateurs déficients d'accéder au menu.
Il faudra donc vous rabattre aux touches numérotées ou alors à certains symboles...


Pour utiliser un raccourci, la méthode dépend de votre système d'exploitation :
  • Windows :
    • Internet Explorer : appuyez sur les touches Alt, Shift et sur le numéro du raccourci simultanément + la touche Entrée pour valider !
    • Les autres naviguateurs (Firefox ...) : appuyez sur les touches Alt, Shift et sur le numéro du raccourci simultanément
    • Sous Opera, la combinaison de touches est Echap + Shift + numéro du raccourci.
  • Mac OS : appuyez sur la touche Ctrl (ou Pomme) et sur le numéro du raccourci simultanément.
  • Linux : pour les navigateurs Galeon, Mozilla et Firefox, appuyez sur la touche Alt sur le numéro du raccourci simultanément.
          Avec Konqueror, appuyez sur Ctrl puis sur le numéro de raccourci successivement.

Les "Tabindex" :
Les Tabindex permettent de naviguer dans un ordre voulu entre des liens ou encore des formulaires.
Ces raccourcis fonctionnent dans l'ordre croissant et n'a pas vraiment de limite.

En Xhtml il faut mettre l'attribut tabindex à une balise a input, textaera, select, button ...
Exemple :

Code:
<a href="page1.htm" tabindex="2">Aller sur la page 1</a>

<form action="#" method="post">
<p>Pseudo : <input name="texte" type="text" tabindex="1" /><br />

Message : <br /><textarea name="textarea" cols="21" rows="5" tabindex="3" ></textarea><br />

<select name="menu deroulant" tabindex="4">
  <option>choix 1</option>
  <option>choix 2</option>
  <option>choix 3</option>
</select><br />

<input name="button" type="button" tabindex="5"></p>
</form>

Dans l'ordre de l'exemple on mettra d'abord un message dans le formulaire, ensuite on sera sur le lien vers la page 1, on reviendra mettre un message, on pourra choisir une option et enfin nous serons placés sur le bouton d'envoi.

Pour vous déplacer, il faut utiliser la touche TAB, (à la gauche de A pour un clavier azerty, ou Q pour un clavier qwerty).
Si vous voulez aller dans l'ordre inverse, il suffit de garder la touche MAJ (ou Shift pour certains) enfoncée et d'appuyer sur TAB

Liens externes :

  • L'article sur l'Accessiblité Web sur Wikipédia : http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_Web
  • Bien utiliser le texte alternatif : http://www.pompage.net/pompe/bien-utiliser-le-texte-alternatif/
  • Histoire de tabindex : http://css.alsacreations.com/Accessibilite-du-Web/Histoire-de-tabindex
  • Accesskey le grand échec de l'accessibilité du Web : http://css.alsacreations.com/Accessibilite-du-Web/Accesskey-le-grand-echec-de-l-accessibilite-du-Web
  • Respecter la sémantique XHTML : http://openweb.eu.org/articles/respecter_semantique/

Conclusion :

Rappelez vous que rendre son site accessible c'est permettre à tous vos visiteurs d'accéder à l'information ou aux services que vous lui proposez quelque soit son outil de navigation.
C'est une question de choix et de principes ...


Voilà, le tuto est terminé et maintenant vous savez comment faciliter la vie des internautes, alors n'hésitez surtout pas à le faire  ;)


Titre: Re: Le point sur l'accessibilité
Posté par: Ninety le 22 Juin 2007, 20:55:39
Merci pour les liens et ce post !
Je sais ce qu'il me reste a faire :D

Par contre, pour moi la touche Pomme c'est celle avec le symbole Pomme dessus (celle qu'on nomme aussi Option), plus precisement celle qui se trouve entre la barre d'espace et la touche alt. Or, cette touche ne permet pas les Acceskey, seulement les favoris situe dans la Bookmarks Bar ...

Citation
<a href="page1.htm" tabindex="2">Aller sur la page 1</a>

<form action="#" method="post">
<p>Pseudo : <input name="texte" type="text" tabindex="1" /><br />

Non ?


Je rajouterais quand meme ces deux liens :

* Validez votre code XHTML grace a ce DocType (http://validator.w3.org/) (premiere ligne de votre page html) :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* Validez votre code CSS (http://jigsaw.w3.org/css-validator/)


EDIT : Pour les curieux voila comment webou.net est interprete par le navigateur Lynx :

http://img411.imageshack.us/img411/8783/screenshot3sn1.png


Titre: Re: Le point sur l'accessibilité
Posté par: K@cem le 22 Juin 2007, 21:39:23
<a href="page1.htm" tabindex="2">Aller sur la page 1</a>

<form action="#" method="post">
<p>Pseudo : <input name="texte" type="text" tabindex="1" /><br />

Corrigé merci :D

Pour la touche c'est ctrl + access ...
je vais enlever la pomme  :)

Merci pour les liens de la validation xHTML & CSS, ils serviront peut être à quelqu'un  ;)


Titre: Re: Le point sur l'accessibilité
Posté par: Ninety le 23 Juin 2007, 15:25:52
Encore une petite remarque :D Sur Linux (Ubuntu avec FF), quand j'appuie sur Alt + 2, il me met sur le 2e onglet ; si j'appuie sur Alt + 1, il me met sur le 1er :D.

Comment je fais :D

EDIT : Bon deja j'avais ecrit acesskey avec un seul "c" :D Ensuite si je fais Shift + Alt + x ca marche ;)
Ou x appartient a |N :D (C'est ca non ? ^^).


Titre: Re: Le point sur l'accessibilité
Posté par: K@cem le 27 Juin 2007, 21:41:34
oui c'est bien ça :)