Différences
Ci-dessous, les différences entre deux révisions de la page.
contributions:accessibilite [2013/06/26 03:49] |
contributions:accessibilite [2013/06/26 03:51] (Version actuelle) |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Rendre son site plus accessible. ====== | ||
+ | Cette page vous permet de connaître et de publier des astuces simples pour améliorer l' | ||
+ | |||
+ | L' | ||
+ | |||
+ | //Plus d' | ||
+ | |||
+ | ===== Un point sur l' | ||
+ | > //«Le pouvoir du web est dans son universalité. Que chacun y ait accès quelque soit ses difficultés est un aspect essentiel.»// | ||
+ | > (Tim Berners-Lee, | ||
+ | |||
+ | À l' | ||
+ | |||
+ | Désormais, ce concept couvre aussi les multiples conditions matérielles de l' | ||
+ | * Diversité des supports (ordinateurs personnels, tablettes, smartphones…) et des résolutions d' | ||
+ | * Variété des types de navigateurs (mode graphique, mode texte), de leur [[wp> | ||
+ | * Limitations diverses : faible connexion, navigation au clavier uniquement, etc. | ||
+ | |||
+ | ===== Sémantique. ===== | ||
+ | L' | ||
+ | |||
+ | ===== Design. ===== | ||
+ | Parce qu'un site élégant peut aussi être un site accessible. | ||
+ | |||
+ | ==== Responsive et adaptive design. ==== | ||
+ | Il s'agit d' | ||
+ | |||
+ | Le // | ||
+ | |||
+ | L'// | ||
+ | Les notions de «dégradation élégante» et d' | ||
+ | |||
+ | ==== La typographie web. ==== | ||
+ | La typographie d'un site web est un élément de design à part entière. Non seulement elle participe de l' | ||
+ | |||
+ | Voici quelques conseils généraux. | ||
+ | |||
+ | === Choix de la police. === | ||
+ | |||
+ | - Pour de longs textes, préférez les polices avec empattements (dites " | ||
+ | - Évitez d' | ||
+ | - Préférez les polices aux caractères ouverts. Par exemple, Georgia est plus lisible que Times New Roman. Oubliez aussi les polices qui ne sont pas adapter aux usages du web, ou mal conçues en général (telle Comic Sans). | ||
+ | - Veillez au bon usage typographique dans un texte littéraire: | ||
+ | - L' | ||
+ | - Les guillemets ne sont pas " " (touche 3) mais « ». | ||
+ | - Les points de suspension ne sont pas ... (trois points) mais … . | ||
+ | - Le tiret long n'est pas - (tiret 6) mais —. | ||
+ | - Les opérateurs de calcul ne sont pas - (tiret 6), * (étoile) ou x (lettre x) et / (slash), mais − × et ÷. | ||
+ | - Il faut mettre une espace insécable avant : (deux points), ; (point virgule), ? (point d' | ||
+ | |||
+ | //NOTA: la réalisation de certains caractères peut être difficile sur des claviers standards. La [[http:// | ||
+ | // | ||
+ | |||
+ | === Taille de la police et disposition. === | ||
+ | |||
+ | - La taille standard d'une police sur le web est de 16 pt. Évitez d' | ||
+ | - La largeur d'un texte ne devrait pas excéder 80 caractères. À l' | ||
+ | - Il n'est pas nécessaire de justifier le texte, surtout s'il est long. D'une part, la justification est assez mal gérée par les navigateurs. D' | ||
+ | - Alignez votre texte à gauche plutôt que de le centrer. C'est plus naturel et plus simple à lire. | ||
+ | - On sait aujourd' | ||
+ | - Les interlignes d'un paragraphe sont d'au moins 1.5 fois la hauteur d'une ligne de texte. La lecture est ainsi plus confortable. Exemple de code css: | ||
+ | |||
+ | < | ||
+ | p, ul, ol {line-height: | ||
+ | </ | ||
+ | |||
+ | === Couleurs de la police. === | ||
+ | |||
+ | - Les couleurs de votre site ne doivent pas agresser ni fatiguer les yeux de l' | ||
+ | - Dans tous les cas, le fond et le texte doivent être suffisamment distincts. Veillez à la couleur, à la luminosité et au contraste. | ||
+ | - Idéalement, | ||
+ | |||
+ | === Les tables en CSS. === | ||
+ | Aux origines du web, l' | ||
+ | |||
+ | Aujourd' | ||
+ | |||
+ | 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 " | ||
+ | |||
+ | Les possibilités : | ||
+ | * **display: table;** : disposer en tableau. | ||
+ | * **display: table-row; | ||
+ | * **display: table-column; | ||
+ | * **display: table-cell; | ||
+ | |||
+ | ===== Ergonomie. ===== | ||
+ | Interface utilisateur, | ||
+ | |||
+ | ==== Naviguer facilement dans le site. ==== | ||
+ | Penser à : | ||
+ | * Une arborescence logique pour vos pages. | ||
+ | * Un plan de site, accessible depuis n' | ||
+ | * Un menu sur chaque page, qui rappelle à l' | ||
+ | |||
+ | ==== Naviguer facilement à l' | ||
+ | Pour faciliter la navigation dans une grande page de texte, on peut : | ||
+ | * Découper son texte en paragraphes titrés. | ||
+ | * Créer un menu de navigation, des boutons de saut de parties, des boutons de retour en haut de page, etc. | ||
+ | |||
+ | ===== Applications riches et interactivité. ===== | ||
+ | Le web évolue ; les façons de naviguer aussi. Aujourd' | ||
+ | |||
+ | ===== Outils gratuits pour l' | ||
+ | |||
+ | ==== Valider ses codes HTML et CSS. ==== | ||
+ | Que vous soyez intégrateur amateur ou professionnel, | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | ==== Tester l' | ||
+ | WebAIM propose [[http:// | ||
+ | |||
+ | ==== Tester l' | ||
+ | Si votre site est déjà conçu, [[http:// | ||
+ | |||
+ | Un clic droit sur la page pour lancer le test, et hop! Les rapports de contrastes, d' | ||
+ | |||
+ | ==== Tester le responsive design. ==== | ||
+ | Que l' | ||