Améliorer l'accessibilité de son site.
Avec la multiplication des supports et la diversité croissante des utilisateurs (notamment les seniors), quels sont vos choix d'actions — ou de non-actions ! — en terme d'accessibilité ? Votre design est-il modulable selon les usages ?
Pour ma part, je viens d'intégrer un media query dans le CSS de mon site, pour que le design sous un écran en 1024*768 reste le même sous 1280*800.
C'est une méthode efficace et légère (à coder et à maintenir). La prochaine fois, ce sera le css pour tablettes !
Pour les personnes qui veulent découvrir cette possibilité, vous pouvez vous rendre directement à l'adresse : http://www.alsacreations.com/xmedia/tut ... index.html et vous amuser à redimensionner la fenêtre de votre navigateur.
Vous vous apercevrez que le CSS de cette page est assez "intelligent" pour vous dire comment vous l'affichez ... en mode portrait, en paysage et même sa largeur !
Pour faciliter la navigation dans une page de texte, il peut être bon de :
- Découper son texte en paragraphes titrés.
- Créer un menu de navigation et/ou des boutons de saut de parties.
- HTML
Code : Tout sélectionner
<h1>Titre de la page.</h1>
<div class="sommaire">
<h2>0. Menu</h2>
<ol>
<li><a href="#part_1">Partie 1</a></li>
<li><a href="#part_2">Partie 2</a></li>
...
</ol>
</div>
<h2 id="part_1">1. Partie 1</h2>
<p>Bla bla bla...</p>
<h2 id="part_2">2. Partie 2</h2>
<p>Bla bla bla...</p>
Code : Tout sélectionner
h1 {text-align: center;}
div.sommaire {float: right; width: 20%; padding: 1ex; border: thin solid black;}
L'élément HTML <table>, qui sert à réaliser un tableau, était souvent utiliser aux origines du web pour faire une mise en forme: en effet, le tableau permet de facilement répartir les différents contenus d'une page.
Or, utiliser <table> pour de la mise en forme est mauvais du point de vue sémantique et alourdit le code. Il existe pourtant une technique CSS 2.1 pour réaliser une mise en forme en tableau lorsqu'on n'a pas le droit d'utiliser l'élément HTML <table>: c'est display: table et display: table-cell.
Il s'agit de donner à chaque contenu les attributs d'une cellule de tableau, puis de les placer dans un conteneur qui fera office de tableau.
Exemple de code HTML et CSS :
- HTML
Code : Tout sélectionner
<h1>Table en CSS.</h1>
<div class="table">
<div class="table-cell">
<p>tata</p>
<p>titi</p>
</div>
<div class="table-cell">
<p>tata</p>
<p>titi</p>
<p>toto</p>
<p>tutu</p>
</div>
<div class="table-cell">
<p>tata</p>
<p>titi</p>
<p>toto</p>
</div>
</div>
Code : Tout sélectionner
h1 {text-align: center;}
div.table {display: table; width: 100%;}
div.table-cell {display: table-cell; border: thin solid black; text-align: center;}
Du choix des couleurs et de leur intensité dépend grandement l'accessibilité de son site. Voici quelques outils simples et pratiques pour choisir les bonnes tonalités de sa charte graphique :
1. Cercle Chromatique Accessible (mode hexadécimal) :
Le Cercle Chromatique Accessible vous permet de tester les rapports de contraste et de luminosité entre un texte et son arrière-plan, selon divers handicaps visuels et exigences des WCAG. Les couleurs et niveaux de gris sont choisis directement à la souris ou édités au clavier, et l'exemple de rendu est modifié en temps réel.
Le texte «OK !» apparait lorsque le choix satisfait à toutes les exigences définies.
2. Colour Contrast Check (mode hexadécimal et rgba) :
Cousin anglophone de l'outil précédent, le Colour Contrast Check est plus rudimentaire, mais les résultats sont finalement plus simples à analyser. Les couleurs peuvent être définies au clavier ou à l'aide de boutons linéaires.
On notera la présence d'un analyseur de compatibilité entre les couleurs sélectionnées.
3. Juicy Studio: Colour Contrast Analyser (sous Firefox) :
Si votre site est déjà conçu, Juicy Studio propose un plug-in sous Firefox pour évaluer une page entière. Un clic droit sur la page pour lancer le test, et hop! Les rapports de contrastes, d'intensité, et les différences de couleurs apparaissent à l'écran, pour chaque balise et selon les critères des WCAG.
BONUS : Wolfram Alpha (en anglais) :
Le prometteur moteur statistique Wolfram Alpha permet de trouver des couleurs voisines et complémentaires à une couleur donnée. De plus, quand vous entrez le nom de la couleur (ex: "blue"), le résultat propose son équivalent hexadécimal et rgba. Le champ de recherche accepte aussi la version hexadecimal; avec les mêmes résultats.
On peut s'amuser à imaginer des mélanges, sous forme d'hexa ou de mots-clés (ex: "blue + red + yellow").
Est ce que ça te dit de t'occuper, si tu le souhaites bien sûr, de la page Wiki que je viens d'ouvrir pour toi : https://www.franceserv.fr/wiki/ameliore ... e_son_site ?
Ça te sera déjà bien plus simple pour mettre en forme ce que tu fait déjà sur le forum et surtout plus accessible avec un sommaire et des titres.
Je t'ai placé dans un groupe que je nomme "Contributeurs", c'est une idée comme ça ... n'hésitez pas à me dire ce que tu en pense, si ça te vas ou pas. Une fois en forme, je pourrai proposer le lien sur l'index de la documentation comme "Contributions des membres"
Je peut aussi faire un sous dossier où les membres pourront créer directement leur tuto, procédures, etc ... concernant l'hébergement mutualisé chez FSH. Je l'avais déjà fait au tout début du Wiki où tout était permis mais j'ai eu des saccages de pages (insertion de publicité, destruction etc), c'est pour ça que j'ai du tout verrouiller.
Je peut alors y penser de nouveau en structurant un peu plus ces contributions dans ce dossier et ensuite déplacer la page lorsque qu'elle devient assez intéressante dans un autre en plaçant le membre dans le groupe des contributeurs.
D'une part, c'est un sujet qui sort du cadre du forum. Ensutie, ce sera effectivement plus simple à éditer, et surtout chacun peut ainsi corriger et ajouter du contenu.
Très honoré de votre proposition ! Je fais ça cette semaine.
DokuWiki est vraiment simple et pratique.
J'ai alors crée un dossier où tous les hébergés peuvent créer et écrire. J'explique comment ça fonctionne à cette adresse : https://www.franceserv.fr/wiki/contributions:aide