Améliorer l'accessibilité de son site.

Vous avez un soucis dans la création, la retouche graphique ou dans votre feuille de style ? Un problème dans la manipulation de Gimp ou de Photoshop ? Ou encore mieux, des réponses à apporter ? C'est par là.
Avatar de l’utilisateur
Tilde3
Messages : 461
Inscription : 19 octobre 2011 à 13:11
Contact :

Bonjour à tou(te)s !

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 !
Avatar de l’utilisateur
Elodie
Fondatrice / Responsable
Fondatrice / Responsable
Messages : 7937
Inscription : 2 avril 2010 à 20:14

Effectivement, c'est assez bluffant !

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 !
Vous avez une question ? Posez-la de préférence sur le forum et si ça demande un contact plus instantané, n'hésitez pas à vous rendre sur le t'chat IRC. Si votre question est personnelle, contactez-nous directement.
Avatar de l’utilisateur
Tilde3
Messages : 461
Inscription : 19 octobre 2011 à 13:11
Contact :

Naviguer facilement à l'intérieur du contenu de la page.

Pour faciliter la navigation dans une page de texte, il peut être bon de :
  1. Découper son texte en paragraphes titrés.
  2. Créer un menu de navigation et/ou des boutons de saut de parties.
Exemple de code HTML et CSS pour la version avec menu de navigation :
- 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>
-CSS

Code : Tout sélectionner

h1 {text-align: center;}
div.sommaire {float: right; width: 20%; padding: 1ex; border: thin solid black;}
Aperçu :
Image
Avatar de l’utilisateur
Tilde3
Messages : 461
Inscription : 19 octobre 2011 à 13:11
Contact :

Créer une mise en forme en tableau… sans tableau!

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>
- CSS

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;}
Le résultat? Une page dont les contenus ne débordent pas et sont toujours bien répartis et alignés, même si vous rajoutez de nouvelles "cellules" ou si vous en remplissez une plus que d'autres. Ce type de mise en forme peut aussi subir de forts zooms et dézooms sans sortir de la page :

Image
Avatar de l’utilisateur
Tilde3
Messages : 461
Inscription : 19 octobre 2011 à 13:11
Contact :

Optimisation des couleurs de son site.

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").
Avatar de l’utilisateur
Elodie
Fondatrice / Responsable
Fondatrice / Responsable
Messages : 7937
Inscription : 2 avril 2010 à 20:14

Bonjour Tilde,

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.
Vous avez une question ? Posez-la de préférence sur le forum et si ça demande un contact plus instantané, n'hésitez pas à vous rendre sur le t'chat IRC. Si votre question est personnelle, contactez-nous directement.
Avatar de l’utilisateur
Tilde3
Messages : 461
Inscription : 19 octobre 2011 à 13:11
Contact :

C'est une excellente idée !

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.
Avatar de l’utilisateur
Tilde3
Messages : 461
Inscription : 19 octobre 2011 à 13:11
Contact :

Ça y est, c'est fait !
DokuWiki est vraiment simple et pratique.
Avatar de l’utilisateur
Elodie
Fondatrice / Responsable
Fondatrice / Responsable
Messages : 7937
Inscription : 2 avril 2010 à 20:14

Merci :)

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
Vous avez une question ? Posez-la de préférence sur le forum et si ça demande un contact plus instantané, n'hésitez pas à vous rendre sur le t'chat IRC. Si votre question est personnelle, contactez-nous directement.
Répondre